在 ES8 中使用较短语法定义函数参数默认值

在 ES6 中，我们可以使用默认参数来定义函数的参数默认值，例如：

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

greet(); // Hello, World!
greet('Alice'); // Hello, Alice!

从 ES8 开始，我们可以使用较短的语法来定义函数参数的默认值。在这篇文章中，我们将了解这个新的语法以及如何使用它。

简短语法定义函数参数默认值

在 ES8 中，我们可以使用以下语法来定义函数的参数默认值：

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

greet(); // Hello, World!
greet('Alice'); // Hello, Alice!
greet('Bob', 'Hi there!'); // Hi there!

这个语法可以让我们在定义函数参数默认值时更加简洁明了。上面的例子中，我们定义了两个参数 name 和 message。如果调用 greet 函数时不提供任何参数，那么 name 参数的默认值是 'World'，message 参数的默认值是 Hello, ${name}!。如果提供了一个参数，那么这个参数将被当作 name 参数的值。如果提供了两个参数，那么这两个参数将分别被当作 name 和 message 参数的值。

深入了解简短语法

我们可以使用简短语法来定义一个更为复杂的函数，例如：

function multiple(x = 1, y = x, z = x * y) {
  console.log(x, y, z);
}

multiple(); // 1, 1, 1
multiple(2); // 2, 2, 4
multiple(2, 3); // 2, 3, 6

在这个例子中，我们定义了三个参数 x、y 和 z。如果调用 multiple 函数时只提供了一个参数，则它将被当作 x 的值。如果提供了两个参数，则它们将分别被当作 x 和 y 的值。如果提供了三个参数，则它们将分别被当作 x、y 和 z 的值。

需要注意的是，简短语法定义参数默认值时，我们可以使用之前定义的参数。在上面的例子中，我们使用了 y = x 和 z = x * y 这两个表达式。在这种情况下，x 参数的值将作为 y 和 z 的默认值。

使用对象解构和简短语法

我们可以将对象解构和简短语法结合起来使用，例如：

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

greet(); // Hello, World!
greet({ name: 'Alice' }); // Hello, Alice!
greet({ name: 'Bob', message: 'Hi there!' }); // Hi there!

在这个例子中，我们定义了一个参数对象，其中包括 name 和 message 两个属性，并使用简短语法定义它们的默认值。如果调用 greet 函数时不提供任何参数，则使用一个空的默认值对象。如果提供了一个参数对象，则它的 name 和 message 属性将分别被当作 name 和 message 参数的值。如果提供了两个参数，则它们将被当作 name 和 message 参数的值。

需要注意的是，如果我们想要让参数对象中的某个属性使用默认值，我们必须要给整个对象参数一个默认值。在上面的例子中，我们使用了一个空的默认值对象 {}。

总结

在本文中，我们了解了在 ES8 中使用较短语法定义函数参数默认值的方法。通过这个新的语法，我们可以更加简单明了地定义带有默认值的函数参数。这个语法也可以和对象解构一起使用，进一步简化我们的代码。

记住，在使用这个新的语法时，我们应该尽可能使用简单明了的方式来定义参数的默认值，这可以让我们的代码更加易于理解和维护。

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