函数

1.函数使用

?函数的作用:把代码包裹起来,可以通过调用多次复用
?函数使用:代码封装
?函数声明:
function 函数名(形式参数) {
函数体
}
??调用函数:函数名(参数);参数可以没有

代码实例如下:

<!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>Document</title>
    <style>
        div {
            display: inline-block;
            height: 50px;
            width: 80px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;
            margin: 10px;
        }
    </style>
</head>

<body>
    <script>
        // 函数的作用:把代码包裹起来,可以通过调用多次复用

        // 函数使用:代码封装

        // 函数声明: 
        // function 函数名() {
        //     函数体
        // }

        function fn() {
            document.write(`我是函数输出的<br>`)
        }
        fn()

        function sayHello() {
            console.log('早上好呀!!');
        }
        sayHello()
        sayHello()
        sayHello()

        function stu() {
            // 打印九九乘法表
            for (let i = 1; i <= 9; i++) {
                for (let j = 1; j <= i; j++) {
                    document.write(`<div>${j}x${i}=${i * j}</div>`)
                }
                document.write("<br>")
            }

        }
        stu()
        stu()
        stu()


    </script>
</body>

</html>

2.参数

   // 有参数的函数

        // 函数声明: 
        // function 函数名(参数列表) {
        //     函数体
        // }

? 形参(形式上的参数)声明函数时写在函数名小括号里的参数名
// 形参如果不被赋值，就是undefined
?实参(实际上的参数)调用函数时写在函数名小括号里的参数,调用时会把实参赋值给形参

代码实例如下:

    // 求两数之间所有数的和
        let start = +prompt('请输入较小的整数')
        let end = +prompt('请输入较大的整数')
        function getSum100(start, end) {
            let sum = 0
            for (let i = start; i <= end; i++) {
                sum = sum + i

            }
            document.write(sum)
        }
         getSum100(start, end)
        getSum100(2, 200)

3.代码返回值 (return)

// 函数返回值
?1.用return返回数据
//语法: return 数据
/*注意:
1.函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
2. return会立即结束当前函数函数
3.可以没有 return，这种情况函数默认返回值为 undefined*/

// 如何返回两个值?
// return 返回一个数组
return [a,b]

代码实例如下:

// 求数组中的最大值
        function getArrMaxValue(array) {
            let max = array[0]
            let min = array[0]
            for (let i = 1; i < array.length; i++) {
                if (max < array[i]) {
                    max = array[i]
                }
                if (min > array[i]) {
                    min = array[i]
                }
            }   
            return [max, min]
        }
        const x = getArrMaxValue([23, 66, 35, 342])
        document.write(`最大值为:${x[0]}<br>最小值为${x[1]}`)

4.作用域

?作用域:可用性的代码范围
/* 1.全局作用域:
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js文件*/
/*2.局部作用域:作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
3.块级作用域块:作用域由 { } 包括,if语句和for语句里面的{ }等*/

 // 变量根据作用域分类
        // let num = 0//全局作用域
        // 1.全局变量全局能用
        // let num =30
        // function fn() {
        //     let a =20//局部作用域
        //     console.log(a);
        //     console.log(num);
        // }
        // fn()
        // console.log(a);
        // 2.局部变量只在局部作用域有效
        // for (let i = 0; i < 3; i++) {
        //     console.log(i);
        // }
        // console.log(i);
        // 3.块级变量

4.1变量作用域的一个坑

// ?变量作用域的一个坑：如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐,推荐在全局作用域先声明这个变量
        let a
        function fn() {
            a = 20
        }
        fn()
        console.log(a);

4.2作用域链


        // ?作用域链：采取就近原则的方式来查找变量最终的值
        // function f1() {
        //     let num = 123
        //     function f2() {
        //         let num = 0
        //         console.log(num)
        //     }
        //     f2()
        // }
        // let num = 456
        // f1()

结果:

5.匿名函数

5.1 函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为 函数表达式

let 变量名 =function(){
函数体
}

 //  1.  匿名函数
        const fn = function (food) {
            console.log(food);

        }
        fn('清汤羊肉')

5.2. 立即执行函数

场景介绍: 避免全局变量之间的污染

// 第一个小括号放形参,第二个小括号放的实参
// 注意:多个立即执行函数之间必须加分号结束

;(function (){})()

 // 第二种写法
;(function (){}())

不同之处:第二个小括号的位置不同.

原文链接：https://blog.csdn.net/wusandaofwy/article/details/126107881