我们之前已经用过很多函数了，比如 alert 、 prompt 、 confirm 都属于一个函数。

很多时候需要执行一些类似的功能，而将这些代码封装成函数就可以避免重复的代码。

函数声明

声明函数的语法如下：

function name(arg1, arg2) {
    // code
    return result
}

name：函数名。
arg：传入的参数，可以省略。多个参数使用逗号分割。
result：返回值，可省略。

我们来看一个简单的例子：

$$edit$$
$$jsdemo$$
function sayHello() {
    alert("你好世界~")
}

sayHello()
sayHello()
sayHello()

在上面例子中，我们定义了一个函数 sayHello ，提示一段问候语句，并且在之后连续调用了三次，这个例子体验到了以下好处：

避免臃肿的重复性代码。
一处定义，随处执行。
要改变运行效果，只需要修改函数内的代码。

$$tip

不同于变量的声明，函数的声明可以在调用之后。

参数

$$edit$$
$$jsdemo$$
function sayHello(name) {
    alert(`你好，${name}~`)
}

sayHello("小明")
sayHello("小红")
sayHello("小蓝")

在上面例子中添加一个参数 name ，并且在调用的时候传入。

参数顺序

传入的参数是按照顺序赋值的，如果传入的参数不足则未赋值的参数为 undefine 。

$$edit$$
$$jsdemo$$
function func(x, y, z) {
    console.log(x)
    console.log(y)
    console.log(z)
}
func(1, 2)

参数默认值

可以为参数设置一个默认值，当参数未赋值时将会采用默认值。

$$edit$$
$$jsdemo$$
function func(x, y = 123) {
    console.log(x)
    console.log(y)
}

func(1)

返回值

函数可以返回一个值作为结果。

$$edit$$
$$jsdemo$$
function sum(a, b) {
    return a + b
}

let result = sum(3, 5)
alert(result)

函数一旦执行 return 便会返回，不会执行剩下的代码。

function checkData(a, b, c) {
    // 检查是否小于 0
    if (a < 0) {
        return "第一个数小于 0"
    }

    if (b < 0) {
        return "第二个数小于 0"
    }

    if (c < 0) {
        return "第三个数小于 0"
    }

    return "数据 OK"
}

let result = checkData(1, -1, 3)
alert(result)

$$tip

如果没有 return 一个值则返回值是 undefined 。

函数也是一个值

由于函数也是一个值，因此可以被赋值给一个变量。

$$edit$$
$$jsdemo$$
function sum(a, b) {
    return a + b
}

let x = sum

alert(typeof x)
alert(x(5, 6))

函数也可以被当作参数传递或作为返回值。

作为参数：

$$edit$$
$$jsdemo$$
function callFunc(func) {
    func()
}

function sayHello() {
    alert("你好世界~")
}

callFunc(sayHello)

作为返回值：

$$edit$$
$$jsdemo$$
function getSayHello() {
    return function () {
        return alert("你好世界~")
    }
}

let result = getSayHello()
result()

函数表达式

在声明变量时直接创建并赋值一个函数的形式被称为函数表达式。

$$edit$$
$$jsdemo$$
let sayHello = function () {
    alert("你好，世界~")
}

sayHello()

函数表达式和函数声明的区别

函数表达式：函数调用不能在函数表达式之前。
函数声明：函数调用可以在函数声明之前。

// 函数调用不能在函数表达式之前
sayHello() // Cannot access 'sayHello' before initialization

let sayHello = function () {
    alert("你好，世界~")
}

回调函数

当我们定义了一个函数，将其传给了某个调用方，那这个函数就被称为回调函数（callback）。

$$jsdemo$$
$$edit$$
function notice() {
    alert("买一个冰淇淋。")
}

function ask(cb) {
    let result = confirm("你有20元钱吗？")
    if (result) {
        cb() // 调用回调函数
    }
}

ask(notice)

$$tip

回调函数的调用方通常不是由我们控制的，比如按钮的点击事件或者一个第三方消息通知库。我们无需关心调用方的实现逻辑，只需传递回调函数给它，当某个事件触发时调用我们的回调函数。

练习

写一个函数，每次调用时显示 中国你好。 $$demo <button onclick="sayHelloToChina()">中国你好</button> <script> function sayHelloToChina() { alert("中国你好") } </script> $$ $$answer

$$jsdemo$$
$$edit$$
function sayHelloToChina() {
    alert("中国你好")
}

sayHelloToChina()

补全以下函数，接收一个年龄作为参数，判断其是否成年，返回布尔值。

function checkAge(age) {
    // 补全这里
}

let age = Number(prompt("输入你的年龄："))

if (checkAge(age)) {
    alert("欢迎光临")
} else {
    alert("请你关闭网站")
}

$$answer

$$jsdemo$$
$$edit$$
function checkAge(age) {
    return age >= 18
}

let age = Number(prompt("输入你的年龄："))

if (checkAge(age)) {
    alert("欢迎光临")
} else {
    alert("请你关闭网站")
}

写一个函数，接收两个数字作为参数，返回它们的最小值。 $$demo <button onclick="work()">最小值</button> <script> function work() { function min(a, b) { return a < b ? a : b }
```
 let a = Number(prompt("输入第一个数："))
 let b = Number(prompt("输入第二个数："))

 alert(`最小值为：${min(a, b)}`)
```
} </script> $$

$$answer

$$jsdemo$$
$$edit$$
function min(a, b) {
    return a < b ? a : b
}

let a = Number(prompt("输入第一个数："))
let b = Number(prompt("输入第二个数："))

alert(`最小值为：${min(a, b)}`)

写一个函数，接收两个数字作为参数，并返回它们差值的绝对值。 $$demo <button onclick="work()">差值的绝对值</button> <script> function work() { function diffAbs(a, b) { let diff = a - b return diff > 0 ? diff : -diff }
```
 let a = Number(prompt("输入第一个数："))
 let b = Number(prompt("输入第二个数："))

 alert(`差值的绝对值为：${diffAbs(a, b)}`)
```
} </script> $$

$$answer

$$jsdemo$$
$$edit$$
function diffAbs(a, b) {
    let diff = a - b
    return diff > 0 ? diff : -diff
}

let a = Number(prompt("输入第一个数："))
let b = Number(prompt("输入第二个数："))

alert(`差值的绝对值为：${diffAbs(a, b)}`)

写一个函数，接收一个数字数组作为参数，返回其中的最大值。 $$answer

$$jsdemo$$
$$edit$$
function maxOfArray(array) {
    let max = array[0]

    for (let n of array) {
        if (n > max) {
            max = n
        }
    }

    return max
}

let array = [-2, 10, 5, 3, 6]

alert(`最大值为：${maxOfArray(array)}`)