/

JavaScript 函数参数

JavaScript 函数参数

学习 JavaScript 函数参数的基础知识。

函数可以接受一个或多个参数。

1
2
3
4
5
6
7
8
9
10
11
const dosomething = () => {
 //做些事情
}

const dosomethingElse = foo => {
 //做些事情
}

const dosomethingElseAgain = (foo, bar) => {
 //做些事情
}

从 ES6/ES2015 开始，函数的参数可以有默认值：

1
2
3
const dosomething = (foo = 1, bar = 'hey') => {
 //做些事情
}

这样你就可以在调用函数时不填充所有参数：

1
2
dosomething(3)
dosomething()

ES2018 引入了参数的尾随逗号，这个特性有助于减少由于移动参数导致的缺少逗号而引起的 bug（例如，将最后一个参数移动到中间时）：

1
2
3
4
5
const dosomething = (foo = 1, bar = 'hey',) => {
 //做些事情
}

dosomething(2, 'ho!')

在最后一个参数后面加上逗号来调用函数也是可以的：

1
dosomething(2, 'ho!',)

你可以将所有参数包装在数组中，并在调用函数时使用 扩展运算符：

1
2
3
4
5
const dosomething = (foo = 1, bar = 'hey') => {
 //做些事情
}
const args = [2, 'ho!']
dosomething(...args)

对于很多参数，记住参数的顺序可能很困难。使用对象和解构赋值可以保持参数的名称：

1
2
3
4
5
6
7
const dosomething = ({ foo = 1, bar = 'hey' }) => {
 //做些事情
 console.log(foo) // 2
 console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

函数现在支持默认参数：

1
2
const foo = function(index = 0, testing = true) { /* ... */ }
foo()

默认参数值是在 ES2015 中引入的，并在现代浏览器中被广泛实现。

这是一个接受 param1 参数的 doSomething 函数。

1
2
3
const doSomething = (param1) => {

}

如果在调用函数时没有指定参数，我们可以为 param1 添加一个默认值：

1
2
3
const doSomething = (param1 = 'test') => {

}

当然，对于更多的参数也适用：

1
2
3
const doSomething = (param1 = 'test', param2 = 'test2') => {

}

如果你有一个包含参数值的唯一对象呢？

很久很久以前，如果我们需要将一个选项对象传递给一个函数，以便在其中具有默认值，如果其中一个是未定义的，你必须在函数内部添加一些代码：

1
2
3
4
5
6
7
8
const colorize = (options) => {
 if (!options) {
 options = {}
 }

 const color = ('color' in options) ? options.color : 'yellow'
 ...
}

使用对象解构可以提供默认值，从而简化了代码：

1
2
3
const colorize = ({ color = 'yellow' }) => {
 ...
}

如果在调用我们的 colorize 函数时没有传递对象，我们同样可以默认分配一个空对象：

1
2
3
const spin = ({ color = 'yellow' } = {}) => {
 ...
}

tags: [“JavaScript”, “Function Parameters”, “ES6”, “ES2015”, “ES2018”, “spread operator”, “default parameters”]