JavaScript 基础
深入数据和类型
函数进阶
运算符
浏览器存储
Document
Web API
事件
工具与规范
实例
练习
我们之前已经用过很多函数了,比如 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
回调函数的调用方通常不是由我们控制的,比如按钮的点击事件或者一个第三方消息通知库。我们无需关心调用方的实现逻辑,只需传递回调函数给它,当某个事件触发时调用我们的回调函数。
$$
练习
- 写一个函数,接收一个数值数组作为参数,返回其中的最大值。
- 写一个函数,接收一个数值数组作为参数,返回数组所有值的和。