前端0×01

〃KIяItò°

已于 2024-08-31 22:37:44 修改

阅读量690

点赞数 30

文章标签：前端

于 2024-08-25 18:49:09 首次发布

本文链接：https://blog.csdn.net/weixin_55121503/article/details/141504713

版权

函数

1.1 为什么需要函数

目标：能说出为什么需要函数

函数：

function，是被设计为执行特定任务的代码块

说明：

函数可以把具有相同或相似逻辑的代码 "包裹" 起来，通过函数调用执行这些被 "包裹" 的代码逻辑，这么做的优势是有利于精简代码方便复用。de

比如我们前面使用的 alert()、prompt()和console.log() 都是一些js函数，只不过已经封装好了，我们直接使用的。

1.2函数使用

目标：掌握函数语法，把代码封装起来

函数的声明语法
```
function 函数名() {
    函数体
}
```
例

function sayHi() {
    document.write('hai~~')
}

函数名命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

函数的调用语法

//函数调用，这些函数体内的代码逻辑会被执行 
函数名()

注意：声明（定义）的函数必须调用才会真正被执行，使用()调用函数

// 函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
sayHi()
sayHi()

函数体

函数体是函数的构成部分，它赋值将相同或相似代码"包裹"起来，知道函数调用时函数体内的代码才会被执行、函数的功能代码都要写在函数体当中。

//打招呼
function sayHi(){
    console.log('嗨~');
}
sayHi()

函数案例

需求：

封装一个函数。计算两个数的和

封装一个函数，计算1-100之间所有数的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum(){
            let namber1 = +prompt('请输入第一个数')
            let namber2 = +prompt('请输入第二个数')
        SUM=namber1+namber2 
        document.write(SUM);
           
        }
getSum()
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum(){
        SUM=0
        for ( i=0; i<=100; i++){
            SUM+=i
        }
        console.log(SUM);
    }
    getSum()
    </script>
</body>
</html>

1.3函数传参

思考：这样的函数只能求 10+20，这
个函数功能局限非常大

function getSum() {
    let num1 = 10
    let num2 = 20
    console.log(num1 + num2)
}
getSum

解决办法：把要计算的数字传到函数内
结论：

若函数完成功能需要调用者，那么就需要用有参数的函数

这样可以极大提高函数的灵活性

声明语法

function 函数名(参数列表) {
    函数体
}

例

单个参数

function getSquare(num1) {
    document.write(num1 * num1)
}

多个参数

function getSum(num1,num2) {
    document.write(num1 + num2)
}

参数列表

传入数据列表

声明这个函数需要传入几个数据

多个数据用逗号隔开

调用语法

函数名(传递的参数列表)

getSquare(8)

getSum(10,20)

调用函数时，需要传入几个数据就写几个用，逗号隔开

function getSum(num1,num1) {
    document.write(num1 + num2)
}

getSum(10, 20)

形参：声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

实参：调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)试产可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

形参：可以看做变量，但是如果一个变量不给值，默认是什么？

undefined

但是如果做用户不输入实参，刚才的案例，则出现 undefined+ undefined 结果是什么？

NaN

我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为0，这样程序更严谨，可以如下操作：

function getSum(x = 0, y = 0) {
    document.write(x + y)
}
getSum()    //结果是0 ， 而不是 N
getSum(1, 2)    //结果是3

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则默认为 undefined

案例函数封装-求学生总分

需求：学生的分数时一个数组，计算每个学生的总分

分析：

封装一个求和函数
传递过去的参数时一个数组
函数内部遍历数组求和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getArrSum(arr = [])
        {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i] 
            }
            document.write(sum)
        }
        getArrSum([11,22,3])

        
    </script>
</body>
</html>

1.4函数返回值

提问：什么时函数？

函数是被设计为执行特定任务的代码块

提问：执行完特定任务之后，然后呢？

把任务的结果给我们

缺点：把计算后的结果处理凡是写死，内部处理了
解决：把处理结果返回给调用者
有返回值函数的概念：

当调用某个函数，这个函数会返回一个结果出来

这就是有返回值的函数

其实我们前面已经接触了很多的函数具备返回值：

let result = prompt("请输入你的年龄?")
let result1 = parseInt('111')

只是这些函数是JS底层内置的。我们直接就可以使用
当然有些函数，则没有返回值

alert('我是弹框， 不需要返回值')

所以要根据需求，来设定需不需要返回值

〃KIяItò°

关注

30
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫