JavaScript中的函数

Posted rangvis

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的函数相关的知识,希望对你有一定的参考价值。

javascript中的函数

函数的定义: 函数就是JavaScript的基础模块单元,包含一组语句,用于代码的复用,信息隐藏 和 组合调用。 简单点说:函数就是把任意的一段代码放在一个盒子里面,在我想要执行这段代码的时候,直接执行这个盒子里面的代码就行来

函数的创建和结构

1.函数的创建

在JavaScript语言中,可以通过一下三种方式创建:

  • 函数声明

 //函数声明式创建函数
function f1() {
    //需要编写的代码
}
// function: 声明函数的关键字,表示接下来是一个函数了
// f1: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)
// (): 必须写,是用来放参数的位置(一会我们再聊)
// {}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)
?
  • 字面量方式创建(赋值式)

var f2 = function() {
   //需要编写的代码
}
?
  • 使用Function构造函数创建(不推荐)

    var f3 = new Function(‘参数1‘,‘参数2‘,...,‘函数要执行的代码‘)
   //构造函数的参数中最后一个参数为函数体的内容,其余均为函数的形参
?

2.函数的调用

函数的调用实际上就是让函数执行(使用函数里面的代码)

函数调用 就是直接 写 函数名() 就可以了

    f1();
   f2();
   f3();

˙注意: 定义一个函数以后,如果函数没有调用,那么写在函数{}里面的代码将没有任何意义。

3.函数的结构

函数的一般表现形式为:

    //函数声明
   function fn(参数[行参]){
       //函数体
  }
   fn(参数[实参])

函数包括一下4个部分:

  • 保留字:function

  • 函数名字:fn

  • 参数:圆括号以及圆括号里面的参数

  • 函数体:花括号以及花括号里面的语句

4.匿名函数

当声明一个函数,没有函数名的时候,那么这个函数就称之为匿名函数

    function() {
       //编写的代码
  }
?

声明式创建函数 和 赋值式创建函数的区别: 虽然两种定义方式的调用方法都是一样的,但是还是会村子啊一些区别的

  • 声明式函数:调用可以在 定义之前 或者 定义之后调用

    //可以调用
   fn();
?
   //声明式函数
   function fn(){
       console.log(‘我是婧婧‘)
  }
?
   //也可以调用
   fn()
?
  • 字面量赋值式函数:调用只能 在定义函数的后面

    //不可以调用(会报错)
   fn();
   
   //赋值式函数
   var fn = function(){
       console.log(‘我是婧婧‘)
  }
?
   //可以调用
   fn();
?

函数的参数

  • 我们定义函数 和 调用函数都出现了 圆括号()

  • 思考圆括号()的作用?

  • 圆括号就是我我们用来存放参数的位置

  • 参数又 分为: 行参 和 实参

    //声明函数
   function fn(行参写在这里){
?
  }
   fn(实参写在这里))
?

1.行参 和 实参 的作用

  • 行参

    • 就是在函数内部可以使用的变量,在函数外部不可以使用

    • 没定一个行参,就相当于在函数内部定义一个可以使用的变量

    • 参数 与 参数之间 用 逗号 分隔

        function fn(a,b,c){
           //相当于在函数内部定义了a b c 三个变量,我们可以直接在函数内部使用这个三个变量
          consoloe.log( a + b +c)
      }
    • 如果只有行参,没有实参的话,那么在函数内部使用这个变量式没有值的,会得到一个undefined

    • 行参 的值 由 函数调用的时候的实参 来决定的

  • 实参

    • 在函数调用的时候给 行参 赋值

    • 也就是在调用函数的时候给一个具体的内容

        function fn(a,b,c){
           // 相当于在函数内部定义了a b c 三个变量,我们可以直接在函数内部使用这个三个变量
          consoloe.log( a + b +c)
      }
       fn(1,2,3)
    ?
       //这里的行参为: a,b,c
       //这里的实参为: 1,2,3
    ?
    • 当函数由多个参数的时候,行参 和 实参 式一一对应的

2. 参数个数的关系

函数调用时,会完成实际参数 对 形式参数的复制工作。 当实际参数的个数 和 形式参数 的 个数不匹配的时候 会导致运算错误

  • 行参 比 实参 少

    • 因为参数式按照顺序一一对应

    • 行参 比 实参 少的时候,那么行参 就拿不到多余的 实参

        function fn(a,b){
           //函数内部可以使用a 和 b
      }
    ?
       //调用函数
       fn(1,2,3)
    ?
       //本次调用传递了 三个 实参: 1 , 2 ,3
       //1 对应的行参 为a,2对应的行参 为b,那么 3 没有跟它对应的行参,也就是函数内部没有办法已通过变量来使用3这个值
    ?
  • 行参 比 实参 多

    • 因为参数式按照顺序一一对应

    • 所以多出来的行参就是没有值的,就是 undefined

        function fn(num1, num2, num3) {
       // 函数内部可以使用 num1 num2 和 num3
      }
    ?
       // 本次调用的时候,传递了两个实参,100 和 200
       // 就分别对应了 num1 和 num2
       // 而 num3 没有实参和其对应,那么 num3 的值就是 undefined
       fn(100, 200)
  • 函数的参数(arguments)

在函数的内部,我们总是可以获得一个免费配送的arguments参数。 arguments用于接收函数调用时传入的实际参数,它被设计成一个类似数组的结构,拥有length属性,但是它不是一个真正的数组,所以不能使用数组对应的的方法。 arguments参数的存在,使得我们可以便携一些无需指定行参个数的函数

?
function sum(){
   var sum = 0;
   var count = arguments.length;
   for(var i = 0;i < coung; i++){
       sum += arguments[i];
  }
   console.log(sum);
}
?
?
?
?
?
<script>
       /*
          在函数的内部有一个数据是可以不用定义就能使用的,那么这个数据就是arguments
          arguments 表示函数所有实参的集合(伪数组,像数组的集合,但是并不是数组)
          arguments有一个属性 length,表示的是函数 实参的个数
?
          每个实参在这个集合中都会有一个特定下标(索引),想要从这个集合中获取实参,必须通过实参对应的索引来获取,集合的索引是从0开始
          arguments[索引n] === 得到这个索引n对应的的数据
      */
       function sum() {
           // console.log(arguments[5]);
           // 从arguments集合中把每一个实参拿出来进行相加
           var sum = 0;
           // 通过for循环取出arguments结合中数据(函数的实参)
           for (var i = 0; i < arguments.length; i++) {
               // console.log(arguments[i]);
               // 把每一个实参相加
               sum += arguments[i]  
          }
           console.log(sum);
      }
       sum(1, 2, 3)
   </script>
?

函数的返回值(return)

  • 函数体中 return语句 给函数一个返回值 或者 终止函数的执行。

  • 当return 语句被执行时,函数立即返回而不在执行 剩余的代码。

    //  终止函数的执行
   function fn() {
       console.log(1)
       console.log(2)
       console.log(3)
       
       // 写了 return 以后,后面的 4 和 5 就不会继续执行了
       return
       console.log(4)
       console.log(5)
  }
?
   // 函数调用
   fn()
?
  • return语句后面 跟上你要返回的数据(可以式一个表达式,可以式任意的数据类型)

    function fn() {
       // 执行代码
       return 100
  }
?
   // 此时,fn() 这个表达式执行完毕之后就有结果出现了
   console.log(fn()) // 100
  • 函数总是有一个返回值,如果函数体中没有return语句或者return 后面为空,那么函数将总式返回 undefined

    function fn() {
   // 执行代码
  }
?
   // fn() 也是一个表达式,这个表达式就没有结果出现
   console.log(fn()) // undefined

函数的优点

函数就是对一段代码的封装,在我们想要使用这段代码的时候调用

【1】封装代码,是代码更加简洁

【2】复用性更强,在实现重复功能的时候,只要直接调用封装好的嗲吗即可

【3】代码执行时机,随时可以在我们想啊哟执行的时候去执行

以上是关于JavaScript中的函数的主要内容,如果未能解决你的问题,请参考以下文章

如何将此 JavaScript 代码片段翻译成 Parenscript?

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

48个值得掌握的JavaScript代码片段(上)

JavaScript 代码片段

你可能不知道的JavaScript代码片段和技巧(下)