JavaScript 允许默认值

在 JavaScript 中，当我们定义一个函数并且希望它接受某些参数时，有时候我们希望某些参数的值没有被传递时拥有默认值，这样可以避免出错或者简化代码。在 ES6 之前，一般通过手动为参数提供默认值或者后续赋值来达到这个目的。但是 ES6 引入了一种语法糖，可以让我们更加方便地为函数参数指定默认值。

常规方法

以往我们一般需要手动为参数设置默认值，比如：

function greet(name, message) {
  name = name || 'Tom';
  message = message || 'Hello, there!';

  console.log(`${name}, ${message}`);
}

greet(); // 输出 "Tom, Hello, there!"
greet('Amy', 'Good afternoon!'); // 输出 "Amy, Good afternoon!"

上面的例子中，我们手动提供了默认值，如果用户没有传递参数，就使用默认值。但是这样的方式有一个很明显的缺点，那就是如果用户传递了一个“假值”，比如 0 或者 ""，那么它们将被视为缺失参数，使用默认值，这很可能会引起逻辑错误。

ES6 语法

ES6 引入了一种新的函数参数默认值语法，可以更加方便地为函数参数提供默认值。

function greet(name = 'Tom', message = 'Hello, there!') {
  console.log(`${name}, ${message}`);
}

greet(); // 输出 "Tom, Hello, there!"
greet('Amy', 'Good afternoon!'); // 输出 "Amy, Good afternoon!"

这样，我们就不需要手动提供默认值了，ES6 会自动为我们设置默认值。如果用户传递了“假值”，这些值也不会被视为缺失参数。

参数默认值的注意点

需要注意的是，我们不能在一个函数的参数列表中使用相同的变量名来设置默认值，例如：

function greet(name = 'Tom', name = 'Amy') {
  console.log(`${name}`);
}

这样的代码将会导致一个 SyntaxError 错误。

除此之外，需要注意的是使用默认值时，只会对那些传递为 undefined 的参数生效。换句话说，如果用户传递了 null 或者 false 等“假值”，这些默认值将不会被用到，例如：

function greet(name = 'Tom', message = 'Hello, there!') {
  console.log(`${name}, ${message}`);
}

greet(null, undefined); // 输出 "Tom, Hello, there!"
greet('Amy', false); // 输出 "Amy, false"

结论

ES6 为函数参数提供了更加便捷的默认值语法。同时需要注意使用时可能会出现的问题，包括变量名重复和传递“假值”时默认值生效的情况。