在 ECMAScript 2015 中，我们可以定义默认参数值，即在函数定义时为参数赋默认值。这为我们编写代码提供了更便捷的方式，但是默认参数值使用时也有一些需要注意的问题，如果使用不当可能会导致程序出现错误。本文将介绍默认参数值使用的误区，并给出解决方法和示例代码。
1. 深拷贝问题
假设我们有一个函数，将两个数组合并到一个新数组中：
function merge(arr1, arr2 = []) {
return [...arr1, ...arr2];
}这个函数使用默认参数值，将 arr2 的默认值设为空数组。如果我们执行 merge([1, 2, 3], [4, 5])，得到的结果是 [1, 2, 3, 4, 5]，这是我们期望得到的结果。但是如果我们执行 merge([1, 2, 3])，得到的结果是 [1, 2, 3]，而不是我们期望的结果 Array(0)。为什么会这样呢？
这是由于默认参数值是在定义函数时计算的，而不是在每次调用函数时计算的。在上面的例子中，变量 arr2 的默认值只会在函数定义时计算一次，这意味着每次调用 merge 函数时都是使用同一个空数组。因此，如果我们修改 arr2 数组，比如执行 arr2.push(4)，那么下次调用 merge 函数时，arr2 数组仍然包含上次的修改结果。这就是所谓的“深拷贝问题”。
解决这个问题的方法是使用函数内部的默认值：
function merge(arr1, arr2) {
arr2 = arr2 || [];
return [...arr1, ...arr2];
}这样我们就可以在每次调用函数时都创建一个新的空数组，避免深拷贝问题。
2. 作用域问题
在 ECMAScript 2015 中，函数参数具有块级作用域。这意味着在函数体中声明的变量和参数中声明的变量位于不同的作用域中。例如：
function foo(a = 1) {
let b = a * 2;
console.log(b);
}
foo(); // 输出 2在上面的例子中，我们定义了一个默认参数 a，并在函数体中声明了一个变量 b。由于 b 变量在函数体内部声明，因此它的作用域仅限于函数体内部。在函数体外部访问 b 变量会产生一个 ReferenceError。另外，由于 a 默认值的计算在 b 变量声明之前进行，因此我们可以在 b 变量声明中使用 a 变量而不会报错。
但是，如果我们在函数体内部重新声明一个与参数同名的变量，就会发生错误：
function foo(a = 1) {
let a = 2;
console.log(a);
}
foo(); // 报错 SyntaxError: Identifier 'a' has already been declared这是由于在函数体内部重新声明了与参数同名的变量，造成了重复声明变量的错误。要解决这个问题，我们需要避免在函数体内部重新声明与参数同名的变量。
3. 对象默认参数值的坑
默认参数值也可以是一个对象，例如：
function foo(options = {name: 'John', age: 18}) {
console.log(options);
}
foo(); // 输出 {name: 'John', age: 18}在上面的例子中，我们定义了一个对象类型的默认参数 options，并在函数体中输出了该对象。由于我们没有传入任何参数，options 变量的值就是默认对象 {name: 'John', age: 18}。
但是，如果我们执行 foo({})，期望得到的结果是一个空对象 {}，但实际上得到的结果是 {name: 'John', age: 18}，这违背了我们的期望。这是由于对象的解构赋值的原因造成的。在上面的例子中，我们使用了默认参数值的对象解构赋值，这将导致参数传入空对象时也会使用默认值。要想解决这个问题，我们可以使用对象合并的方式：
function foo(options) {
options = {...{name: 'John', age: 18}, ...options};
console.log(options);
}
foo(); // 输出 {name: 'John', age: 18}
foo({}); // 输出 {}
foo({name: 'Tom', gender: 'male'}); // 输出 {name: 'Tom', age: 18, gender: 'male'}在上面的例子中，我们使用 {...{name: 'John', age: 18}, ...options} 的方式创建一个新的对象，该对象将默认对象和实际传入的参数对象合并在一起。这样我们就可以正确地处理对象默认参数值了。
总结
在 ECMAScript 2015 中，我们可以使用默认参数值提高代码的可读性和可维护性。但是默认参数值的使用也存在一些问题，包括深拷贝问题、作用域问题和对象默认参数值的坑。通过本文的介绍，相信读者已经了解了默认参数值的常见问题以及解决方法，可以在日常编写代码时避免这些问题的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f0f891f6b2d6eab3ade0f9