ES6 默认参数的使用及常见问题解决

在 ES6 语法中，函数可以为其参数指定默认值。默认参数是指在没有传入或传入 undefined 时，参数取默认值。本文将讨论 ES6 默认参数的用法和一些常见问题的解决方法。

语法

function foo(param1 = defaultValue1, param2 = defaultValue2, ...) {
  // function body
}

上面这个函数定义了两个参数，如果调用时未给出这两个参数的值，则它们将分别取默认值。在使用默认参数时，需要注意以下几点：

• 它只适用于 undefined，而不是 null 或其他 falsy 值。
• 如果传递的参数不是 undefined，则会覆盖默认值。
• 默认参数不包括解构赋值中的属性默认值。

示例

function add(a, b = 2) {
  return a + b;
}

console.log(add(1)); // 3
console.log(add(1, 3)); // 4

上面这个函数的第二个参数设置了默认值，如果调用函数时只传入了一个参数，则第二个参数将取默认值。

常见问题

默认参数同名问题

在一些特殊情况下，可能需要将参数的默认值设为另一个参数的值，例如：

function foo(param1, param2 = param1) {
  // function body
}

上面这个函数定义了两个参数，如果调用时只传入了一个参数，则第二个参数取第一个参数的值作为默认值。但是，以上代码是不正确的，因为在设置默认值时，参数在还没有初始化的情况下访问会抛出错误。正确的写法是：

function foo(param1, param2 = this.param1) {
  // function body
}

在使用对象方法时，可以利用函数内的 this 变量来解决问题。

默认参数引用问题

在使用默认参数时，需要注意参数的默认值是在每次函数调用时求值的。因此，如果默认值是一个对象或数组，可能会出现引用问题。例如：

function foo(param = []) {
  param.push(1);
  console.log(param);
}

foo(); // [1]
foo(); // [1, 1]

上面这个函数的默认值是一个空数组，如果每次调用函数时都将同一个数组传递给参数，则每次调用后数组都会被修改。正确的写法是使用函数内部创建新的数组或对象：

function foo(param = []) {
  param = param.concat(1);
  console.log(param);
}

foo(); // [1]
foo(); // [1]

总结

ES6 默认参数是一种强大的语言特性，它可以使函数的调用更加简单和方便。在使用默认参数时，需要考虑到一些细节问题，例如同名问题和引用问题。希望本文能对读者更好地理解 ES6 默认参数的用法和问题，并为实际开发提供帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e030148841e9894c614f7