函数声明

声明函数的语法如下：

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

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

练习

写一个函数，接收一个数值数组作为参数，返回其中的最大值。
写一个函数，接收一个数值数组作为参数，返回数组所有值的和。