ECMAScript 2021（ES12）中的默认参数的新写法-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2021（ES12）中，JavaScript 引入了一种新的默认参数的写法，使得函数的参数默认值更加灵活，方便开发者编写代码。本文将介绍这种新的默认参数写法，并提供一些示例代码，帮助读者更好地理解和应用。

传统的默认参数写法

在 ES6 中，JavaScript 引入了默认参数的写法，使得函数的参数可以有默认值。例如：

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

在这个例子中，greet 函数的参数 name 默认值为 'World'。如果没有传入参数，name 就会被赋值为 'World'。

然而，这种默认参数写法有一个问题：它只能在参数的末尾设置默认值。例如，下面的代码会报错：

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

这是因为在传统的默认参数写法中，只有最后一个参数可以设置默认值。如果要设置多个参数的默认值，就必须使用一些不太优雅的写法，例如：

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

这种写法虽然可以达到同样的效果，但是会让代码变得难以阅读和维护。

新的默认参数写法

在 ECMAScript 2021（ES12）中，JavaScript 引入了一种新的默认参数写法，可以在任意位置设置参数的默认值。例如，下面的代码就可以正常运行：

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

在这个例子中，greet 函数的两个参数都有默认值。如果没有传入参数，它们分别会被赋值为 'World' 和 'Hello'。

这种新的默认参数写法非常方便，可以让开发者更加灵活地编写函数。例如，如果我们想让 message 参数的默认值为 'Hi'，可以这样写：

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

greet('Alice', 'Hi'); // 输出：Hi, Alice!

这样，我们就可以在任意位置设置参数的默认值，使得代码更加简洁和易读。

使用场景

新的默认参数写法可以用于任何需要设置默认参数的场景。例如，我们可以在 React 组件中使用它来设置默认的 props 值：

function Button({ text = 'Click me!' }) {
  return <button>{text}</button>;
}

在这个例子中，如果没有传入 text 属性，它会被赋值为 'Click me!'。

除此之外，新的默认参数写法还可以用于处理函数的可选参数。例如，下面的代码可以接受一个可选的回调函数：

function fetchData(url, options = {}, onSuccess = () => {}, onError = () => {}) {
  // ...
}

在这个例子中，options 参数可以传入一些可选的配置项，onSuccess 和 onError 参数可以传入可选的回调函数。如果没有传入这些参数，它们都会被赋值为一个空对象或空函数。

总结

在 ECMAScript 2021（ES12）中，JavaScript 引入了一种新的默认参数写法，可以在任意位置设置参数的默认值。这种新的写法非常方便，可以让开发者更加灵活地编写函数。它可以用于任何需要设置默认参数的场景，例如 React 组件和函数的可选参数处理。开发者可以通过这种新的默认参数写法，编写更加简洁和易读的代码。

示例代码

下面是一些示例代码，演示了新的默认参数写法的用法：

// javascriptcn.com 代码示例
function greet(name = 'World', message = 'Hello') {
  console.log(`${message}, ${name}!`);
}

greet(); // 输出：Hello, World!
greet('Alice'); // 输出：Hello, Alice!
greet('Bob', 'Hi'); // 输出：Hi, Bob!

function Button({ text = 'Click me!' }) {
  return <button>{text}</button>;
}

<Button />; // 渲染一个带有默认文本的按钮

function fetchData(url, options = {}, onSuccess = () => {}, onError = () => {}) {
  // ...
}

fetchData('https://example.com', {
  headers: { 'Authorization': 'Bearer XXX' }
}, data => {
  console.log('请求成功：', data);
}, error => {
  console.error('请求失败：', error);
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65799982d2f5e1655d3a95fa