JavaScript 函数

一、函数的概念

1、在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用

2、虽然 for 循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数

二、函数的使用

函数在使用时分为两步：声明函数和调用函数

（一）声明函数

 function 函数名() {

        // 函数体

}

function sayHi() {

      console.log('hi~~~');

}

(1)function 声明函数的关键字 必须小写

(2)函数是做某件事情，函数名一般是动词 sayHi

(3)函数不调用自己不执行

（二）调用函数

        函数名();

        sayHi();

（1）调用函数的时候千万不要忘记加小括号

1、注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

（三）函数的封装

1、函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

2、简单理解：封装类似于将电脑配件组装到机箱中（类似快递打包）

三、函数的参数

（一）形参和实参

1、在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

参数	说明
形参	形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用的时候传递的参数 实参是传递给形参的

 

 

 

 

 

2、函数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

3、代码示范

（1）函数可以重复相同的代码

        function cook() {

            console.log('酸辣土豆丝');

        }

        cook();

        cook(); 

（2）我们可以利用函数的参数实现函数重复不同的代码

        function 函数名(形参1, 形参2...) { //在声明函数的小括号里面是 形参 (形式上的参数)

        }

        函数名(实参1, 实参2...); //在函数调用的小括号里面是实参(实际的参数)

4、形参和实参的执行过程

        function cook(aru) {//形参是接收实参的  aru = '酸辣土豆丝' 形参类似于一个变量

            console.log(aru);

        }

        cook('酸辣土豆丝');

        cook('红烧肉');

 （二）函数形参和实参个数不匹配问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

 

 

 

 

 

 

 

function getSum(num1, num2) {

      console.log(num1 + num2);

}

getSum(1, 2);　　//实参个数等于形参个数,输出正确结果

getSum(1, 2, 3);　　//实参个数多于形参个数,只取到形参的个数

 getSum(1);　　//实参个数小于形参个数，多的形参定义为undefined，结果为NaN

1、注意：在JavaScript中，形参的默认值是undefined。

（三）小结

1、函数可以带参数也可以不带参数

2、声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined

3、调用函数的时候，函数名括号里面的是实参

4、多个参数中间用逗号分隔

5、形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

四、函数的返回值

（一）return 语句

1、有的时候，我们会希望函数将返回值返回给调用者，此时通过使用 return 语句就可以实现。

2、  function 函数名() {

            return 需要返回的结果;

        }

        函数名();

(1)我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的

(2)只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果

3、代码验证

        function getResult() {

            return 666;

        }

        getResult(); // getResult() = 666

        console.log(getResult());

        function cook(aru) {

            return aru;

        }

        console.log(cook('大肘子'));

（二）return 终止函数

1、return 语句之后的代码不被执行

function getSum(num1, num2) {

      return num1 + num2; //return 后面的代码不会被执行

      alert('我是不会被执行的哦');

}

console.log(getSum(1, 2));

（三）return 只能返回一个值，如果用逗号隔开多个值，以最后一个为准。

        function fn(num1, num2) {

            return num1, num2; //返回的结果是最后一个值

        }

        console.log(fn(1, 2));

　　//我们求任意两个数的 加减乘除结果

        function getResult(num1, num2) {

            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];

        }

        var re = getResult(1, 2); //返回的是一个数组

        console.log(re);

（四）函数没有 return 返回 undefined

1、函数都是有返回值的

（1）如果有return 则返回return后面的值

（2）如果没有return 则返回 undefined

（五）break、continue、return 的区别

1、break：结束当前的循环体（如for、while）

2、continue：跳出本次循环，继续执行下次循环（如for、while）

3、return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

五、arguments的使用

1、当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

2、arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

（1）具有length属性

（2）按索引方式储存数据

（3）不具有数组的 push，pop等方法

 六、函数案例

（一）函数可以调用另外一个函数

1、因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数互相调用的情况

（1）

        function fn1() {

            console.log(11);

            fn2(); //在fn1 函数里面调用了 fn2函数

        }

        fn1();

        function fn2() {

            console.log(22);

        }

 //运行结果

11

22

（2）

 

function fn1() {

            console.log(111);

            fn2();

            console.log('fn1');

        }

        function fn2() {

            console.log(222);

            console.log('fn2');

        }

        fn1();

  //运行结果

111
222
fn2
fn1

七、函数的两种声明方式

（一）利用函数关键字自定义函数(命名函数)

        function fn() {

        }

        fn();

（二）函数表达式

        var 变量名 = function() {};

        var fun = function() {

            console.log('我是函数表达式');

        }

        fun();

(1)fun是变量名 不是函数名

(2)函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而函数表达式里面存的是函数

(3)函数表达式也可以进行传递参数