函数（封装）

关于函数的总结与应用

你想要那颗糖

1902人浏览 · 2023-03-18 18:18:17

你想要那颗糖 · 2023-03-18 18:18:17 发布

一、函数的基本使用

1.函数: 是可以被重复使用的代码块（代码复用）

2.作用：函数可以把具有相同或相似逻辑的代码“包裹”起来，这么做的优势是有利于代码复用

3.函数的基本使用

（1）定义函数：利用关键字 function 定义函数（声明函数，函数名常使用动词），遵循小驼峰命名法。（变量名和函数名也不能重复，会有冲突）

（2）调用函数：定义一个函数并不会自动执行它，需要调用函数。函数可以多次调用，每次调用都会重新执行函数体里面代码。（alert() parseInt() 名字后面跟小括号的本质都是函数的调用）

（3）说明：函数参数，如果有多个则用逗号分隔，用于接受传递过来的数据；return 关键字可以把结果返回给调用者

<!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>
</head>

<body>
    <script>
        // 案例1：计算两数之和
        function sum() {
            let x = 10
            let y = 25
            console.log(x + y)
        }
        sum()

        // 案例2：求1-100之间累加的和
        function sum2() {
            let sum2 = 0
            for(let i = 1 ; i <= 100 ; i++){
                sum2 += i
            }
            console.log(sum2)
        }
        sum2()

        // 以后再用可以直接调用sum
    </script>
</body>

</html>

效果展示：

二、函数的参数

1.形参：声明函数时小括号里的叫形参（形式上的参数）

2.实参：调用函数时小括号里的叫实参（实际上的参数）

3.执行过程：会把实参的数据传递给形参，从而提供给函数内部使用，我们可以把形参理解为变量

我们曾经使用过的 alert('打印')，parseInt('11px')，Number('11') 本质上都是函数调用的传参

4.在Javascript中实参的个数和形参的个数可以不一致；如果形参过多会自动填上undefined，返回NaN;如果实参过多,那么多余的实参会被忽略；但是在开发中要尽量保持形参和实参个数一致

5.函数如果没有参数和返回值，那就只是一个包裹代码的工具，不灵活，很鸡肋。参数相当于榨汁机的入口，可以自行决定投递什么食材进去，返回值相当于榨汁机的出口，处理完后给出结果到调用者，等于流出汁水，榨汁成功。

<!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>
</head>

<body>
    <script>
        // 1.函数
        function sum(x, y) {
            // 返回结果
            return x + y

        }
        // 2.给两个值(10,20)；10给了x；20给了y
        console.log(sum(10, 20))
        // 4.输出

        // 再试一次
        console.log(sum(30 , 40))

        // 求1-100之间的累加和
        function sum2(x , y){
            let sum2 = 0
            for(let i = x ; i <= y ; i++){
                sum2 += i
            }
            return sum2
        }
        console.log(sum2(1 , 100))

    </script>

</body>

</html>

三、逻辑中断

1.逻辑中断： 存在于逻辑运算符 && 和 || 中，左边如果满足一定条件会中断代码执行，也称为逻辑短路

2.解释：

（1）false && anything // 逻辑与左边false则中断，如果左边为true，则返回右边代码的值

（2）true || anything // 逻辑或左边true则中断，如果左边为false，则返回右边代码的值

四、默认参数

1.默认参数：可以给形参设置默认值

2.默认参数和逻辑中断使用场景区别：

默认参数主要处理函数形参（处理参数要比逻辑中断更简单）

逻辑中断除了参数还可以处理更多的需求

以前因为兼容性，会使用短路或的方法来对函数设置默认值，现在可以直接使用了

案例展示：用户给不同数组（里面是数字型数据），求数组和并且返回

<!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>
    <!-- 用户给不同数组（里面是数字型数据），求数组和并且返回 -->
</head>
<body>
    <script>
        function sumArray(array) {
            // sumArry 是函数名，以后可以直接调用
            // array是形参，可以理解为函数内部定义的变量，传参这个动作就是给形参赋值
            // 这一段求和功能进行封装
            let sum = 0
            for (let i = 0 ; i < array.length ; i++){
                sum += array[i]
            }
            return sum
        }

        let arr1 = [10 , 20 , 30 , 40]
        let array = [11 , 11 , 11 , 11 , 11 ]

        document.write(sumArray(arr1))
        document.write('<br>')
        document.write(sumArray(array))    
        
        </script>
    
</body>
</html>

效果展示：

五、函数的返回值

1.返回值：把处理结果返回给调用者

2.其实我们前面已经接触了很多的函数具备返回值：比如 prompt ;比如 parseInt ;只是这些函数是JS底层内置的.我们直接就可以使用.当然有些函数，则没有返回值,比如 alert ;所以要根据需求，来设定需不需要返回值.

3.函数返回值的注意事项：

（1）return会立即结束当前函数，所以后面代码不会再被执行

（2）在 return 关键字和被返回的表达式之间不允许使用换行符，否则内部执行相当于会自动补充分号

（3）函数可以没有 return，这种情况函数默认返回值为 undefined

案例分享：

判断数组是否存在某个元素，如果有则返回true，否则返回 false

<!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>
    <!-- 如果找到该元素（第一个元素即可），则返回该元素的索引号，找不到该元素则返回-1 -->
</head>

<body>
    <script>
        function findIndex(name , arr) {
            // 分析思路
            // 1.定义一个变量，默认值为-1 ：假设法
            let index = -1
            // 2.遍历数组
            for(let i = 0 ; i < arr.length ; i++){
                // 如果找到该元素，返回该元素的索引号
                if (name === arr[i]){
                    index = i
                    break
                }
            }
            return index
        }

        let arr1 = ['榴莲', '芒果', '砂糖橘', '菠萝蜜', '沃柑']
        console.log(findIndex('菠萝蜜', arr1))
        console.log(findIndex('圣女果', arr1))
    </script>
</body>

</html>

效果展示：

六、作用域

1.作用域（scope）： 变量或者值在代码中可用性的范围

2.作用：作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

3.分类：

（1）全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

全局变量在任何区域都可以访问和修改

（2）局部作用域：1. 函数作用域。作用于函数内的代码环境。2. 块级作用域。{ } 大括号内部。

局部变量只能在当前局部内部访问和修改

4.注意：

如果函数内部，变量没有声明直接赋值，也当全局变量看，但是强烈不推荐。函数内部的形参可以看做是局部变量

5.变量的访问原则

在不同作用域下，可能存在变量命名冲突的情况，到底该执行谁呢？

访问原则：在能够访问到的情况下先局部，局部没有再找全局，总结：就近原则

七、匿名函数

1.具名函数：带有名字的函数

声明：function sum() {}

调用：fn()

2.匿名函数：没有名字的函数

function () {}

3.匿名函数两种使用方式：

（1）函数表达式

（2）立即执行函数

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】