ES10 提供的可选型参数和默认值

在前端开发过程中，我们经常需要编写函数来实现某些功能，但有时在调用函数时需要传入一些可选参数，这些可选参数有些可能传入，有些则可能不传。为了避免代码更加臃肿，ES10 提供了可选型参数和默认值的语法糖，大大简化了代码的编写。

可选型参数

在 ES10 之前，我们一般通过判断参数的值是否传递来实现可选型参数。例如：

function printName(firstname, lastname) {
  if (!lastname) {
    console.log(firstname);
  } else {
    console.log(firstname + ' ' + lastname);
  }
}

这样的代码还是比较冗长的，而 ES10 提供了更简单的写法：

function printName(firstname, lastname = '') {
  console.log(firstname + ' ' + lastname);
}

如果没有传递 lastname 参数，那么它会被默认赋值为空字符串。

默认值

有时参数传递时缺失某些值，如果没设置默认值就会报错，例如：

function printName(firstname = 'Tom', lastname) {
  console.log(firstname + ' ' + lastname);
}

printName(undefined, 'Smith'); // 输出：Tom Smith
printName('Jack'); // 报错：Expected 2 arguments, but got 1

参数传递时如果 lastname 没有传值，就需要指定其默认值为一个空字符串：

function printName(firstname = 'Tom', lastname = '') {
  console.log(firstname + ' ' + lastname);
}

printName(undefined, 'Smith'); // 输出：Tom Smith
printName('Jack'); // 输出：Jack

如果所有参数都有默认值，则可以声明一个没有参数的函数：

function printName(firstname = 'Tom', lastname = '', age = 30) {
  console.log(firstname + ' ' + lastname + ' ' + age);
}

printName(); // 输出：Tom  30

总结

ES10 提供的可选型参数和默认值语法糖大大简化了代码编写方式。使用这些特性可以有效地避免代码更加臃肿，使代码更加简洁。在实际开发过程中，建议尽可能地利用这些特性，提升代码的可读性和可维护性。

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