在 ES9（ECMAScript 2018）标准中，新增了 Default Parameter Values 特性。它允许我们为函数的参数设置默认值，使代码更加简洁和易读。在本文中，我们将深入研究这个特性的使用，并为大家提供一些实用的示例代码。
Default Parameter Values 是什么
Default Parameter Values（默认参数值）是指在定义函数时，为参数指定默认值。在调用该函数时如果没有传入对应参数的值，则参数的默认值将被使用。
使用 ES6 之前，我们需要在函数中手动检查参数是否存在并设置默认值。例如：
function greet(name) {
var n = name || 'world';
console.log('Hello ' + n + '!');
}
greet(); // Hello world!
greet('Alice'); // Hello Alice!在这个例子中，我们使用 || 操作符来检查传入的参数是否存在，并设置一个默认值 'world'。
在 ES6 版本中，引入了解构和剩余参数(...rest)的特性，我们可以使用它们来为函数参数指定默认值。例如：
function greet({ name = 'world' } = {}) {
console.log('Hello ' + name + '!');
}
greet(); // Hello world!
greet({ name: 'Alice' }); // Hello Alice!在这个例子中，我们使用解构语法来提取传入的参数中的 name 属性，并为其设置了一个默认值 'world'。
而在 ES9 中，我们可以更加简单地为函数参数设置默认值。例如：
function greet(name = 'world') {
console.log('Hello ' + name + '!');
}
greet(); // Hello world!
greet('Alice'); // Hello Alice!在这个例子中，我们直接在函数定义中为参数 name 设置了默认值 'world'。
Default Parameter Values 的优势
Default Parameter Values 的引入，使我们可以更加方便地为函数参数设置默认值。这样，我们就不需要在函数中判断参数是否存在并手动设置默认值。
使用 Default Parameter Values 还有如下优势：
- 使代码更加简洁易读。
- 避免因疏忽而导致的 bug。
- 提高编码效率，减少冗余代码。
Default Parameter Values 的使用
在使用 Default Parameter Values 时，我们需要注意一些细节。
作用域问题
在使用 Default Parameter Values 时，需要注意参数的作用域。例如：
function greet(date = new Date()) {
console.log(date);
}
greet(); // 2019-05-02T09:12:25.505Z
greet(); // 2019-05-02T09:12:30.512Z在这个例子中，我们为参数 date 设置了一个默认值 new Date()。但是，由于默认值只在函数定义时计算一次，所以每次调用函数时，都会使用同一个默认值对象。这可能会引起一些问题。
解决这个问题的方法是使用剩余参数(...rest)或使用默认参数为空对象来处理。例如：
function greet({ date = new Date() } = {}) {
console.log(date);
}
greet(); // 2019-05-02T09:18:43.609Z
greet(); // 2019-05-02T09:18:45.405Z在这个例子中，我们使用解构语法和默认参数 {} 来处理默认值。这样，每次调用函数时，都会使用一个新的默认值对象。
undefined 和 null 的区别
在使用 Default Parameter Values 时，需要注意参数值为 undefined 和 null 的区别。例如：
function greet(name = 'world') {
console.log(name);
}
greet(undefined); // world
greet(null); // null在这个例子中，当传入的参数值为 undefined 时，会使用默认值 'world'；而当传入的参数值为 null 时，则会将该值赋给参数 name。
函数参数位置
在使用 Default Parameter Values 时，需要注意设置默认值的参数的位置。例如：
function greet(name, message = 'Hello') {
console.log(message + ' ' + name + '!');
}
greet('Alice'); // Hello Alice!
greet('Bob', 'Hi'); // Hi Bob!在这个例子中，参数 message 设置了默认值 'Hello'，而参数 name 没有设置默认值，所以它必须在参数列表的第一个。
实用示例代码
根据参数值计算结果
function multiply(a, b = a * a) {
return a * b;
}
multiply(2); // 4
multiply(2, 3); // 6在这个例子中，参数 b 通过设置默认值为 a * a 实现。当调用函数时，如果没有传入参数 b 的值，则会使用默认值 a * a。
处理空字符串
-- -------------------- ---- -------
-------- ---------- - -------- -
-- ----- --- --- -
---- - -----------
-
------------------ -----------
-
-------- -- ----- ------
---------- -- ----- ---------
--------------- -- ----- ------在这个例子中，我们检查参数值是否为空字符串，并在需要时将其替换为默认值 'world'。
处理数组元素
function sum(numbers = []) {
return numbers.reduce((acc, val) => acc + val, 0);
}
sum(); // 0
sum([1, 2, 3]); // 6在这个例子中，参数 numbers 通过设置默认值为一个空数组 [] 实现。当调用函数时，如果没有传入参数 numbers 的值，则会使用默认值 []。
结论
在 ES9 中，Default Parameter Values 为我们提供了一种方便的方式来为函数参数设置默认值。它简化了我们的代码，并让我们更容易避免一些常见的 bug。
使用 Default Parameter Values 时，需要注意参数的作用域、参数值为 undefined 和 null 的区别、以及设置默认值的参数的位置。
在实际开发中，我们可以使用 Default Parameter Values 来处理多种情况，例如根据参数值计算结果、检查空字符串等。
希望本文能够帮助大家更好地理解 ES9 中的 Default Parameter Values 特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c3db6a336082f253f7723