第一章：函数的概念

  • 在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。
  • 虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

  • 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

  • 示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>什么是函数</title>
  9.     <script>
  10.         /* 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。*/
  11.         function getSum(num1, num2) {
  12.             var sum = 0;
  13.             for (var x = num1; x <= num2; x++) {
  14.                 sum += x;
  15.             }
  16.             return sum;
  17.         }
  19.         var result = getSum(1, 100);
  20.         console.log(result);
  21.         result = getSum(1, 1000);
  22.         console.log(result);
  23.     </script>
  24. </head>
  26. <body>
  28. </body>
  30. </html>

第二章：函数的使用

2.1 概述

  • 函数在使用的使用，分为两步：声明函数和调用函数。

2.2 声明函数

function 函数名(){
    //函数体代码;
}
  • function是声明函数的关键字，必须小写。
  • 由于函数一般是为了实现某个功能才定义的，所以我们通常将函数名命名为动词，比如getSum。

2.3 调用函数

函数名(); //通过调用函数名来执行函数体代码
  • 调用的时候千万不要忘记添加小括号。
  • 口诀：函数不调用，自己不执行。

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

  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的使用</title>
    <script>
        /* 函数在使用时分为两步：声明函数和调用函数。 */
        /*
            ①声明函数
            function 函数名(){
                //函数体代码
            }

            - function是声明函数的关键字，必须小写。
            - 函数是做某件事情，函数名一个都是东西，比如：sayHi
            - 函数不调用，自己不执行。
        */
        function sayHi() {
            console.log('~~你好啊，我爱你~~');
        }

        /* 
            ②调用函数
            函数名();

            - 调用函数的时候，千万不要忘记加小括号。
        */

        sayHi();
    </script>
</head>

<body>

</body>

</html>

2.4 函数的封装

  • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
  • 简单理解：封装类似于将电脑配件整合组成到机箱中。

函数的封装.jpg

  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数计算1-100之间的累加和</title>
    <script>
        /* 利用函数计算1-100之间的累加和 */
        /* ①声明函数 */
        function getSum() {
            var sum = 0;
            for (var x = 1; x <= 100; x++) {
                sum += x;
            }
            return sum;
        }

        /* ②调用函数 */
        var result = getSum();
        console.log(result);
    </script>
</head>

<body>

</body>

</html>

第三章：函数的参数

3.1 形参和实参

  • 在声明函数的时候，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数的时候，同时也需要传递相同的参数，这些参数被称为实参。 | 参数 | 说明 | | —- | —- | | 形参 | 形式上的参数，函数定义的时候传递的参数，当前并不知道是什么。 | | 实参 | 实际上的参数，函数调用的时候传递的参数，实参是传递给形参的。 |
  • 参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数的时候传递不同的值进去。
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}

// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带参数的函数</title>
    <script>
        /*
            我们可以利用函数的参数实现函数重复不同的代码。

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

            函数名(实参1,实参2,实参3,...) //在函数调用的小括号里面是实参（实际的参数）
        */
        function cook(args) { //形参是用来接收实参的，args = '酸辣土豆丝'，形参类似于一个变量
            console.log(args);
        }

        cook('酸辣土豆丝');
    </script>
</head>

<body>

</body>

</html>

3.2 函数参数的传递过程

// 声明函数
function getSum(num1, num2) {
    console.log(num1 + num2);
}
// 调用函数
getSum(1, 3); // 4
getSum(6, 5); // 11
  • 调用的时候实参传递给形参。
  • 形参简单理解为：不用声明的变量。
  • 实参和形参的多个参数之间用逗号(,)分隔。

3.3 函数形参和实参匹配问题

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

注意：

  • 在JavaScript中，形参的默认值是undefined。
  • 实际开发中，建议形参个数和实参个数匹配。
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数形参实参个数匹配</title>
    <script>
        //函数形参实参个数匹配
        function getSum(num1, num2) {
            return num1 + num2;
        }

        //如果实参个数和形参的个数一致，则正常输出结果。
        var sum = getSum(1, 2);
        console.log(sum);

        //如果实参的个数多于形参的个数，会取到形参的个数。实际开发中，不推荐。
        sum = getSum(1, 2, 3);
        console.log(sum);

        //如果实参的个数小于形参的个数，结果为NaN。在JavaScript中，形参的默认类型是undefined。实际开发中，不推荐。
        sum = getSum(1);
        console.log(sum);
    </script>
</head>

<body>

</body>

</html>

3.4 总结

  • 函数可以带参数，也可以不带参数。
  • 声明函数的时候，函数名括号里面的是形参，形参的默认值是undefined。
  • 调用函数的时候，函数名括号里面的是实参。
  • 多个参数中间用逗号隔开。
  • 形参的个数可以和实参的个数不匹配，但是结果不可预计，所以尽量要求相匹配。

第四章：函数的返回值

4.1 return语句

  • 有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现。
// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
  • 在使用return语句的时候，函数会停止执行，并返回指定的值。

  • 如果函数没有return，返回的值是undefined。

  • 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数求任意两个数的最大值</title>
    <script>
        function getMax(num1, num2) {
            return num1 >= num2 ? num1 : num2;
        }

        var max = getMax(1, 2);
        console.log(max); //2
        max = getMax(2, 3);
        console.log(max); //3
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数求任意一个数组中的最大值</title>
    <script>
        function getMax(arr) {
            var max = arr[0]
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] >= max) {
                    max = arr[i];
                }
            }
            return max;
        }

        console.log(getMax([1, 2, 3, 4, 5, 6, 7, -10])); //7
        console.log(getMax([-111, 20, 3, 544, 587, 26, 77, -10])); //587

    </script>
</head>

<body>

</body>

</html>

4.2 return终止函数

  • return语句之后的代码不会执行。
function add(num1，num2){
    //函数体
    return num1 + num2; // 注意：return 后的代码不执行
    alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 27

4.3 return返回值

  • return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
function add(num1，num2){
    //函数体
    return num1，num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6

4.4 函数没有return返回undefined

  • 函数都是有返回值的：
    • ① 如果函数有return，返回return后面的值。
    • ② 如果函数没有return，则返回undefined。

4.5 break、continue、return的区别

  • break ：结束当前的循环体（如 for、while）。
  • continue ：跳出本次循环，继续执行下次循环（如 for、while）。
  • return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码。

第五章：arguments的使用

  • 当我们不确定有多少个参数传递的时候，可以使用arguments来获取。在JavaScript中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
  • arguments实际上是一个伪数组，因此可以进行遍历。伪数组具有以下的特点：
    • 具有length属性。
    • 按照索引方式存储数据。
    • 不具有数组的push、pop等方法。

  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arguments的使用</title>
    <script>
        /* 所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参 */
        /* arguments类似于Java中的可变参数 */
        /*
            arguments形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
             - 具有 length 属性
             - 按索引方式储存数据
             - 不具有数组的 push , pop 等方法
        */
        function getMax() {
            var max = arguments[0]
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] >= max) {
                    max = arguments[i];
                }
            }
            return max;
        }

        console.log(getMax(1, 2, 3, 4, 5, 6, 7, 8, 9)); //9
    </script>
</head>

<body>

</body>

</html>

第六章：函数案例

  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数翻转数组</title>
    <script>
        function reverse(arr1) {
            var arr2 = [];
            for (var i = 0; i < arr1.length; i++) {
                arr2[arr2.length] = arr1[arr1.length - 1 - i];
            }
            return arr2;
        }

        var result = reverse([1, 2, 3, 4, 5, 6]);
        console.log(result);
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数封装冒泡排序</title>
    <script>
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i] > arr[j]) {
                        var temp = arr[i];
                        arr[i] = arr[j];
                        arr[j] = temp;
                    }
                }
            }
            return arr;
        }

        console.log(sort([-1, -100, 99, 23, 45, 84, 1])); //[-100, -1, 1, 23, 45, 84, 99]
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用函数判断闰年</title>
    <script>
        function isRun(year) {
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                return true;
            }
            return false;
        }

        var year = 2000;

        if (isRun(year)) {
            console.log('闰年');
        } else {
            console.log('平年');
        }
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数可以调用另外一个函数</title>
    <script>
        /* 因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。 */
        function fn1() {
            console.log(111);
            fn2();
            console.log(222);
        }

        function fn2() {
            console.log(222);
            console.log('fn2');
        }

        fn1(); 
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出2月份的天数</title>
    <script>
        function isRun(year) {
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                return true;
            }
            return false;
        }

        function dayNum(year) {
            return isRun(year) ? 29 : 28;
        }

        var year = 2000;

        console.log(year + '年的2月的天数是：' + dayNum(year)); // 2000年的2月的天数是：29

    </script>
</head>

<body>

</body>

</html>

第七章：函数的两种声明方式

7.1 利用函数关键字自定义函数（命名函数）

  • 语法：
// 声明定义方式
function fn() {...}
// 调用  
fn();
  • 因为有名字，所以也被称为命名函数。
  • 调用函数的代码既可以放在声明函数的前面，也可以放在声明函数的后面。

7.2 函数表达式（匿名函数）

  • 语法：
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();
  • 因为函数没有名字，所以也被称为匿名函数。
  • 这个fn里面存储的是一个函数。
  • 函数表达式原理和声明变量的方式是一致的。
  • 函数调用的代码必须写到函数体后面。