1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

我们之前已经用过很多函数了,比如 alertpromptconfirm 都属于一个函数。

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

函数声明

声明函数的语法如下:

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

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

$$


练习

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