函数（封装）

你想要那颗糖

已于 2023-03-22 13:32:11 修改

阅读量1.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 开发语言前端

于 2023-03-18 18:18:17 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129632728

版权

JavaScript 专栏收录该内容

61 篇文章 2 订阅

订阅专栏

一、函数的基本使用

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>

效果展示：