在 ES6 中，我们可以给函数的参数设置默认值，这样在调用函数时，如果没有传入该参数，函数就会使用默认值。这个特性在编写函数时非常有用，可以减少代码量，提高代码的可读性。本文将详细介绍 ES6 中的默认参数特性，并提供一些使用示例。
使用默认参数
使用默认参数非常简单，只需要在函数定义时，给参数设置默认值即可。例如：
function greet(name = 'World') {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, World!
greet('Alice'); // Hello, Alice!在上面的例子中，greet 函数有一个参数 name，我们给它设置了默认值 'World'。当我们不传入任何参数调用 greet 函数时，它会使用默认值 'World'；当我们传入参数 'Alice' 时，它会使用传入的值 'Alice'。
默认参数的注意事项
使用默认参数需要注意以下几点：
1. 默认参数的值只在函数被调用时计算一次
例如：
function add(a, b = a) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1)); // 2在上面的例子中，add 函数有两个参数 a 和 b，我们给 b 设置了默认值为 a。当我们调用 add(1, 2) 时，a 的值为 1，b 的值为 2，函数返回 3；当我们调用 add(1) 时，a 的值为 1，b 的值为 a，即 1，函数返回 2。
需要注意的是，b 的默认值是在函数被调用时计算的，而不是在函数定义时。因此，如果我们修改 a 的值，b 的默认值也会随之改变：
// javascriptcn.com 代码示例
let x = 1;
function add(a, b = x) {
return a + b;
}
console.log(add(1)); // 2
x = 2;
console.log(add(1)); // 3在上面的例子中，我们定义了一个变量 x，并将其赋值为 1。然后定义了一个 add 函数，给 b 设置了默认值为 x。当我们调用 add(1) 时，a 的值为 1，b 的值为 x，即 1，函数返回 2。然后我们将 x 的值改为 2，再次调用 add(1) 时，b 的默认值变成了 2，函数返回 3。
2. 默认参数的值可以是任意表达式
例如：
// javascriptcn.com 代码示例
function now() {
return new Date().toISOString();
}
function log(message, timestamp = now()) {
console.log(`${timestamp}: ${message}`);
}
log('Hello, World!'); // 2021-12-07T12:34:56.789Z: Hello, World!在上面的例子中，我们定义了一个 now 函数，它返回当前时间的 ISO 字符串表示。然后定义了一个 log 函数，它有两个参数 message 和 timestamp，我们给 timestamp 设置了默认值为调用 now 函数的结果。当我们调用 log('Hello, World!') 时，message 的值为 'Hello, World!'，timestamp 的值为 now() 的结果，即当前时间的 ISO 字符串表示，函数打印出了日志。
使用默认参数的示例
下面是一些使用默认参数的示例：
1. 给数组添加默认值
function createArray(length = 0, value = undefined) {
return Array.from({ length }, () => value);
}
console.log(createArray()); // []
console.log(createArray(3)); // [undefined, undefined, undefined]
console.log(createArray(3, 0)); // [0, 0, 0]
console.log(createArray(3, 'x')); // ['x', 'x', 'x']在上面的例子中，我们定义了一个 createArray 函数，它有两个参数 length 和 value，我们给它们设置了默认值。当我们不传入任何参数调用 createArray 函数时，它会返回一个空数组 []；当我们传入一个参数 3 调用 createArray 函数时，它会返回一个长度为 3 的数组，数组的元素都是 undefined；当我们传入两个参数 3 和 0 调用 createArray 函数时，它会返回一个长度为 3 的数组，数组的元素都是 0；当我们传入两个参数 3 和 'x' 调用 createArray 函数时，它会返回一个长度为 3 的数组，数组的元素都是 'x'。
2. 给对象添加默认值
function createUser({ name = 'Anonymous', age = 0, address = {} } = {}) {
return { name, age, address };
}
console.log(createUser()); // { name: 'Anonymous', age: 0, address: {} }
console.log(createUser({ name: 'Alice', age: 20 })); // { name: 'Alice', age: 20, address: {} }
console.log(createUser({ address: { city: 'Shanghai' } })); // { name: 'Anonymous', age: 0, address: { city: 'Shanghai' } }在上面的例子中，我们定义了一个 createUser 函数，它有一个参数 user，我们给它设置了默认值 { name: 'Anonymous', age: 0, address: {} }。当我们不传入任何参数调用 createUser 函数时，它会使用默认值，返回一个对象 { name: 'Anonymous', age: 0, address: {} }；当我们传入一个参数 { name: 'Alice', age: 20 } 调用 createUser 函数时，它会使用传入的值，返回一个对象 { name: 'Alice', age: 20, address: {} }；当我们传入一个参数 { address: { city: 'Shanghai' } } 调用 createUser 函数时，它会使用传入的值，返回一个对象 { name: 'Anonymous', age: 0, address: { city: 'Shanghai' } }。
总结
在本文中，我们介绍了 ES6 中的默认参数特性，并提供了一些使用示例。使用默认参数可以减少代码量，提高代码的可读性，但需要注意默认参数的值只在函数被调用时计算一次，以及默认参数的值可以是任意表达式。在编写函数时，我们可以根据需要为参数设置默认值，使代码更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65599e5fd2f5e1655d4092af