斑码教育web前端课堂笔记-第27天-js基础06

js第六天 函数

一、复习

流程控制

• 分支结构
• 循环结构

分支结构：

• if
• if else
• if else if … else
• switch

循环结构：

• for
• while
• do while

关键词：

• break
• continue

循环的嵌套

二、函数

函数： 一个功能的集合体，一段功能代码

2.1 函数的声明

格式:

function 函数名() {
	函数体
}
           

函数的调用：

• 函数不调用不执行
• 函数调用的方式:

  函数名()

执行代码：

<script>
    // 声明函数
    function createTable() {
        // 创建表格
        document.write('<table  align="center">');
        // 循环生成行
        for (var row = 0; row < 5; row++) {
            // 生成行
            document.write('<tr>');
            // 循环生成列
            for (var col = 0; col < 5; col++) {
                // 生成列
                document.write('<td>斑码教育</td>');
            }
            document.write('</tr>');
        }

        // 表格的结束
        document.write('</table>');
    }

    // 调用函数
    createTable();
    createTable();
    createTable();
    createTable();

</script>
           

结果：

2.2 函数的参数

参数分类：

按照位置的不同：

• 形参：声明函数时写的参数
• 实参：调用函数时传入的参数

实参和形参是一一对应的

形参的分类：按照是否有默认值：

• 可选参数:有默认值，当你不传入对应的实参，使用默认值
• 必选参数：没有默认值

必选参数写在前面，可选参数写在后面

执行代码：

<script>
    // 声明函数
    function createTable(rowNum, colNum) {
        // 创建表格
        document.write('<table  align="center">');
        // 循环生成行
        for (var row = 0; row < rowNum; row++) {
            // 生成行
            document.write('<tr>');
            // 循环生成列
            for (var col = 0; col < colNum; col++) {
                // 生成列
                document.write('<td>第' + (row + 1) + '行：斑码教育:第' + (col + 1) + '列</td>');
            }
            document.write('</tr>');
        }

        // 表格的结束
        document.write('</table>');
    }

    // 调用函数
    // 生成一个8行9列
    createTable(8, 9);
    // 生成一个6行3列
    createTable(6, 3);
</script>
           

结果：

执行代码：

<script>
    // 声明函数
    function createTable(rowNum, colNum, content = '斑马教育') {
        // 创建表格
        document.write('<table  align="center">');
        // 循环生成行
        for (var row = 0; row < rowNum; row++) {
            // 生成行
            document.write('<tr>');
            // 循环生成列
            for (var col = 0; col < colNum; col++) {
                // 生成列
                document.write('<td>' + content + '</td>');
            }
            document.write('</tr>');
        }

        // 表格的结束
        document.write('</table>');
    }

    // 调用函数
    // 生成一个8行9列
    createTable(8, 9, 'i love you');
    // 生成一个6行3列
    createTable(6, 3);
    

</script>
           

结果：

2.3 书写函数的步骤

1. 完成功能代码
2. 将经常改变的量设置为变量提取为形参
3. 调用的时候传入对应的实参，实参和形参是一一对应的

2.4 函数的提升

函数的提升：包括声明和定义。

变量的提升： 包括变量的声明。

函数名不能和变量名重名

执行代码：

<script>
// 上面进行函数的调用
demo();
// 函数声明之前查看demo
console.log(demo);
// 函数的声明
function demo () {
    console.log('this is demo function');
}   

demo();
// 函数声明之后查看demo
console.log(demo);
// 变量
console.log(a); // undefined
var a = 1;
console.log(a); // 1
</script>
           

结果：

2.5 函数的提升优于变量的提升

执行代码：

<script>
    // 在定义之前查看demo
    console.log(demo); //  function undefined
    // 定义了demo
    var demo = 1;
    function demo() {
        console.log('demo');
    }
    // 在定义之后查看demo
    console.log(demo); // 1


    //  在定义之前查看demo
    console.log(demo1); // function
    // 定义了demo
    function demo1() {
        console.log('demo1');
    }
    var demo1;
    // 在定义之后查看demo
    console.log(demo1);  // function

    /* 
        多次声明只有第一次声明有用

        // 函数
        function demo() {
            console.log('demo');
        }
        // 变量
        var demo; // 寻找demo， 有 当前的声明无意义
        console.log(demo); //  function
        // 给demo赋值
        demo = 1;
        // 在定义之后查看demo
        console.log(demo); // 1 
    
    
    */
</script>
           

2.6 函数名不能和变量重名

重名发生下面的错误：

• 函数名与变量重名
• 函数名写错了

执行代码：

<script>
    var demo = 1;
    function demo() {
        console.log(111);
    }
    console.log(demo); // 1
    demo(); // 执行错误
    // va b = 1; // 语法错误
</script>
           

结果：

2.7 函数的练习

2.7.1 输出n以内的质数

质数： 约数只有1和他本身

执行代码：

function demo(n) {
    for (var i = 2; i <= n; i++) {
        // console.log(i);
        // 声明一个标识
        var lock = true; // 让每一个数默认都是一个质数
        for (var num = 2; num < i; num++) {
            if (i % num == 0) {
                // console.log(i + '不是一个质数' );
                // 当前不是一个质数的时候，将标识lock改为false
                lock = false;
            }

            if (!lock) {
                // 当前数不为质数
                break;
            }
        }

        // 判断lock状态，当lock依旧为true，则表示当前数为质数
        if (lock) {
            console.log(i + '是一个质数');
        }
    }
}

/* 
    n 是不是一个质数？
    验证过程： 
        n 跟 2 ~ n-1都取余， 在取余的过程中，如果出现了一个余数为0，则不需要继续计算（退出循环），可以判断n不是一个质数。 
        当n 和 2 ~ n - 1 所有数取余结果余数都不为0，n是一个质数

*/

// 查看30以内的质数
demo(30);
</script>
           

2.7.2 输出n以内的和（累加）

执行代码：

<script>
    function demo(n) {
        var sum = 0;
        for (var i = 1; i <= n; i++) {
            sum += i;
        }
        console.log(sum);
    }
    demo(100);
</script>
           

2.8 作用域

函数好比一堵墙，这堵墙将作用域划分成不同的区域。变量因此按照可以作用的范围分为全局变量和局部变量。

全局变量： 哪里都能用（函数体外声明的变量）

局部变量：指定的区域可以使用（函数体内声明的变量）

作用域： 查找变量的规则、使用变量的权限

执行代码：

<script>
    // 声明全局变量
    var b = 2;
    function demo() {
        // 局部变量a
        var a = 1;
        console.log(a);
        // 查看b
        console.log(b); // 2
    }

    // 调用函数
    demo();
    // 查看b
    console.log(b);
    // 查看a
    console.log(a);

</script>
           

2.9 变量的生命周期和垃圾回收机制

生命周期： 什么时候生，什么时候亡

全局变量：在程序运行时产生，关闭页面变量消亡

局部变量：函数调用时产生，函数调用结束消亡（当前变量被全局引用的时候，不消亡-----闭包函数）

2.10 作用域和作用域链（变量的查找规则）

在这里相当于存在一个作用域的分割（函数），函数外围全局，函数内为局部。

当函数demo执行的时候， b = 1; 引擎会让作用域查找b，作用域首先在当前的作用域（局部作用域—demo里面的作用域查找b），作用域没有找到b，

作用域会根据查找规则（作用域链）会去当前作用域的上级作用域查找对应的变量，如果上级没有，则去上级的上级，直到找到全局为止。如果全局有，则使用。

如果全局没有，则声明对应的变量。然后进行赋值操作。整个在查找变量的过程，是沿着作用域的层级进行查找（逐级向上）这个逐级向上的操作，称之为作用域链。

2.11 变量的遮蔽效应

内层作用域的变量和外层作用域的变量重名，在内层使用变量的时候，会使用内层的变量忽略外层的变量，这种效果称之为变量的遮蔽效应。

执行代码：

<script>
    var a = 1;
    var b = 1;
    function demo() {
        var a = 3;
        console.log(a + b); // 3 + 1 = 4
    }

    demo();
</script>