在 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 组件和函数的可选参数处理。开发者可以通过这种新的默认参数写法，编写更加简洁和易读的代码。
示例代码
下面是一些示例代码，演示了新的默认参数写法的用法：
-- -------------------- ---- ------- -------- ---------- - -------- ------- - -------- - ------------------------ ----------- - -------- -- --------- ------ --------------- -- --------- ------ ------------ ------ -- ------ ---- -------- -------- ---- - ------ ---- -- - ------ ------------------------ - ------- --- -- ------------- -------- -------------- ------- - --- --------- - -- -- --- ------- - -- -- --- - -- --- - -------------------------------- - -------- - ---------------- ------- ---- - -- ---- -- - -------------------- ------ -- ----- -- - ---------------------- ------- ---展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65799982d2f5e1655d3a95fa
