1. 简介
ES6 是 JavaScript 的下一个重要版本，它引入了许多新的语法特性，其中一个重要的特性是默认参数。默认参数是指当函数被调用时，如果参数没有被传递或者值为 undefined，那么默认值将被使用。
默认参数使用简单，但是要注意一些技巧，合理使用默认参数可以使代码更加优雅和易读。
2. 默认参数基础
在 ES6 之前，为了实现默认参数，我们通常会这样写代码：
function foo(x, y) {
x = x || 0;
y = y || 0;
console.log(x, y);
}
foo(); // 0 0
foo(1, 2); // 1 2这段代码中，我们使用了 || 运算符为每个参数设置了默认值。如果参数没有被传递或者值为 falsy，那么默认值将被使用。
在 ES6 中，我们可以直接在函数参数中定义默认值。例如：
function foo(x = 0, y = 0) {
console.log(x, y);
}
foo(); // 0 0
foo(1, 2); // 1 2这段代码与上面的代码实现的功能是一样的。
3. 默认参数的值计算
默认参数的值可以是任意的表达式，而且默认参数的值是在函数被调用时计算的，而不是在函数定义时。
例如，我们可以使用一个函数作为默认值：
function getDefault(options) {
return options.defaultValue || 0;
}
function foo(x = getDefault({ defaultValue: 1 }), y = getDefault({ defaultValue: 2 })) {
console.log(x, y);
}
foo(); // 1 2这段代码中，我们定义了一个函数 getDefault，它返回 options.defaultValue 或者 0。然后在函数 foo 中使用 getDefault 函数作为默认值计算表达式，如果 getDefault 返回 undefined，那么默认值 0 将被使用。
4. 保留参数名
在函数参数中使用默认值时，我们可以使用参数名，例如：
function foo(x = 0, y = 0) {
console.log(x, y);
}
foo(); // 0 0
foo(1); // 1 0
foo(1, 2) // 1 2但是在某些情况下，我们需要保留参数名，例如：
function foo(x, y = 0) {
console.log(x, y);
}
foo(1); // 1 0
foo(undefined, 2); // undefined 2在这个例子中，只有 y 的默认值被定义了，x 没有默认值。如果我们想给 x 传递 undefined，那么我们必须通过 foo(undefined, 2) 的方式来明确指定 x 的值为 undefined，否则 x 的值将是默认值 0。
为了解决这个问题，我们可以使用占位符 _ 来保留参数名：
function foo(x, _ = 0) {
console.log(x, _);
}
foo(1); // 1 0
foo(undefined, 2); // undefined 2在这个例子中，我们为 y 使用了占位符 _，保留了参数名，同时定义了默认值。
5. 默认参数的使用指南
默认参数可以使代码更加简洁和易读，但是过度使用默认参数会导致代码难以理解和维护。因此，我们应该合理使用默认参数，遵循以下几个指南：
- 只有在某个参数经常被省略或为特定值时，我们才应该考虑使用默认参数。
- 默认参数的值应该尽量简单，避免过于复杂的表达式。
- 如果使用占位符 _, 应该确保它只被使用一次，否则会对代码的可读性产生负面影响。
6. 总结
默认参数是 ES6 中一个非常实用的特性，它可以简化函数的调用，并可以使代码更加易读和优雅。在使用默认参数时，我们应该注意一些技巧，遵循基本的使用指南，从而写出高质量的代码。
7. 示例代码
function createPerson(firstName, lastName, age = 18, gender = 'female') {
console.log(`firstName=${firstName}, lastName=${lastName}, age=${age}, gender=${gender}`);
}
createPerson('张', '三'); // firstName=张, lastName=三, age=18, gender=female
createPerson('李', '四', 20); // firstName=李, lastName=四, age=20, gender=female
createPerson('王', '五', 30, 'male'); // firstName=王, lastName=五, age=30, gender=male来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1fe10add4f0e0ffb2d53a