js——函数篇

一、认识函数

**函数：**就是一个装有特定任务（代码块）的容器（箱子），通过函数调用实现可以重复使用这块代码。
函数体：实现功能的内容 就是大括号里面的内容

function fn(){
     函数体
}

函数声明和调用：

• 声明和调用二者缺一不可
• 函数声明：就是将特定任务的代码块写清楚；
• 函数调用：函数名()

//函数声明
function fn(){
//函数体
   let str="哈哈哈哈"
   console.log(str)
}
//函数调用
fn()

函数封装：将一些常用的代码（函数体）包在函数中，包的过程就是封装。

不传入参数的js代码

案例一：
实现1-100的和：

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

案例二：实现两个数的和

 <script>
        function fn () {
            let num1 = 10
            let num2 = 304
            console.log(num1 + num2)
        }
        fn()
    </script>

会发现，我们使用的变量数值都是我们手动在函数内部调用的，因为我们使用函数就是看中了函数的复用性，减少了代码量，如果我们每次使用都需要更改函数内部的变量值，那么就会失去函数的灵活性，所以引出了参数

二、认识函数参数

分为形参和实参

引用上文1-100的和的案例，如果想要实现50-200的和怎么计算？如果改变数字，太麻烦，——参数，如下案例：
形参和实参一一对应，也就是实参50对应形参a，实参100对应形参的b，一般来说，形参和实参数量相同

<script>
//函数声明包含的就是形参
        function fn (a, b) {
            let sum = 0
            for (let i = a; i <= b; i++) {
                sum += i
            }
            console.log(sum)
        }
        //函数调用里面包含的就是实参
        fn(50, 100) 

形参相当于变量

可以说函数形参在函数执行的过程中“相当于”变量。它们在函数被调用时获得值，并在函数执行期间存储和操作这些值。

如果没有实参传递过来默认是 undefined
因为我们认为形参相当于变量，所以，没有实参，也就是实参的值在函数调用的时候没有传递给形参，那么没有赋值的变量默认就是undefined。如该案例没有传入实参：

 <script>
        function fn (a, b) {
            let sum
            for (let i = a; i <= b; i++) {
                sum += i
            }
            console.log(sum)
        }
        //没有传入实参
        fn() 
    </script>

实参也可以是变量

 <script>
        function fn (a, b) {
            let sum = 0
            for (let i = a; i <= b; i++) {
                sum += i
            }
            console.log(sum)
        }
        let num1 = +prompt("请输入第一个数字：")
        let num2 = +prompt("请输入第二个数字：")
        //实参变量
        fn(num1, num2)

因为形参的默认值是undefined，所以给它赋予个初值

function fn(x = 0, y = 0) {}

形参实参本质

形参的作用：本质就是函数内部声明变量，可以看做局部变量
实参的作用：就是给形参赋值
案例：传参，关于数组

 <script>
        function getArrValue (arr = []) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log(sum)
        }
        // 加入实参能得到正确结果
        getArrValue([1, 765, 786, 54, 45])
        // 未加上实参的，因为默认数组为空，所以结果为0，不会有报错；
 //因为在调用函数的时候，会有arr.length，此时如果没有传入实参，检测不出传入的数据是数组就会报arr.length的错
        getArrValue()
    </script>

相同变量名访问原则：就近原则

匿名函数： 和具名函数差不多，区别是在调用的时候具名函数可以写任何位置，但是匿名调用一定要写在声明函数的后面

   <script>
        let fn = function () {
            console.log(1)

        }
        fn()
    </script>

返回值的作用是让函数清除的明白比起输出结果，返回结果比较有用，返回结果可以让其他程序使用这个结果
把结果返回给函数的调用者
返回值返回给了函数的调用者
return结束的是函数，break结束的是for循环和switch

 <script>
        function getSum (x, y) {
            return x + y
        }
        let sum = getSum(1, 2)
        console.log(sum);
    </script>

return与console.log有区别，前者是把结果返回给了函数调用者，便于其他程序使用这个结果，而后者是为了直接输出结果

死记硬背 形参和实参一一对应，返回值给函数调用者，返回值可以是数组也可以是一个数值，只要是数据即可。

有关实参形参的一些案例

案例一：

  <script>
        function fn (x, y) {
            return x + y
        }
        console.log(fn(30, 34));
    </script>

案例二：使用三元运算符求最大值

 <script>
        function getMax (x, y) {
            // 使用到了三元运算符,如果x大于y，结果就为x；否则就为y
            return x > y ? x : y
        }
        // 相当于 let max=getMax(434,656)=656
        let max = getMax(434, 656)
        console.log(max);   
    </script>

案例三：求数组中的最大值

<script>
        function getArrMax (arr = []) {
            let max = arr[0]
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max
        }
        let Arrmax = getArrMax([32, 65, 76, 43])
        console.log(Arrmax);
    </script>

案例四：求数组中的最小值

 <script>
        function ArrMinValue (arr = []) {
            let min = arr[0]
            for (let i = 0; i < arr.length; i++) {
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            return min
        }
        let ArrMin = ArrMinValue([45, 65, 675, 54, 234, 321, 45])
        console.log(ArrMin);
    </script>

案例五：求数组中的最大值和最小值

  <script>
        function getArrValue (arr = []) {
            let max = arr[0]
            let min = arr[0]
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            return [max, min]
        }
        let newArr = getArrValue([4738, 5487, 453, 65, 543])
        console.log(`最大值是：${newArr[0]}`)
        console.log(`最小值是：${newArr[1]}`);
    </script>

断点调试

即：（查看函数的执行过程）： js中断点测试，source，选中一行，然后刷新，然后箭头

作用域

• 全局作用域和局部（函数）作用域
• 全局作用域声明的变量为全局变量，局部作用域声明的变量为局部变量

匿名函数

不加函数名并且把函数赋值给变量

    <script>
        let fn = function () {
            console.log(1)
        }
        fn()
        let fn1 = function (x, y) {
            console.log(x + y)
        }
        fn1(1, 4)
    </script>

立即执行函数

两种表达方式 ； 多个立即执行函数使用分号进行分开

    <script>
        // 方式一 (function(){})()
        (function () {
            console.log(1)
        })()
            // 方式二：(function(){}())
            (function (x, y) {
                console.log(x + y)
            }(8, 0))
    </script>