ECMAScript 2021 是 JavaScript 的最新标准，它引入了许多新特性，其中一些可以帮助我们提高代码的可读性。在本文中，我们将讨论这些新特性，并提供一些示例代码来说明如何使用它们。
可选的链式调用操作符
可选的链式调用操作符（Optional Chaining Operator）是 ECMAScript 2020 中引入的新特性，它可以帮助我们更方便地访问对象的嵌套属性。在 ECMAScript 2021 中，它被进一步扩展，可以支持函数调用和数组索引。
在旧的 JavaScript 中，如果我们要访问嵌套对象的属性，我们需要写出冗长的代码，例如：
if (obj && obj.prop && obj.prop.nestedProp && obj.prop.nestedProp.finalProp) {
// do something with obj.prop.nestedProp.finalProp
}使用可选的链式调用操作符，我们可以将上面的代码简化为：
if (obj?.prop?.nestedProp?.finalProp) {
// do something with obj.prop.nestedProp.finalProp
}如果某个属性不存在，可选的链式调用操作符会返回 undefined，而不是抛出 TypeError 异常。这可以帮助我们避免写出冗长的 null 或 undefined 检查代码。
空值合并操作符
空值合并操作符（Nullish Coalescing Operator）是 ECMAScript 2020 中引入的新特性，它可以帮助我们更方便地设置默认值。在 ECMAScript 2021 中，它被进一步扩展，可以支持更复杂的表达式。
在旧的 JavaScript 中，如果我们要设置默认值，我们需要使用 || 运算符，例如：
const foo = options.foo || 'default';
但是，如果 options.foo 的值为 false、0、''、null 或 undefined，上面的代码会将 'default' 赋值给 foo。这可能不是我们期望的行为。
使用空值合并操作符，我们可以将上面的代码简化为：
const foo = options.foo ?? 'default';
如果 options.foo 的值为 null 或 undefined，上面的代码会将 'default' 赋值给 foo。如果 options.foo 的值为 false、0 或 ''，上面的代码会将 options.foo 的值赋值给 foo。
for-in 循环迭代顺序
在旧的 JavaScript 中，for-in 循环的迭代顺序是不确定的，这可能会导致代码的可读性问题。
在 ECMAScript 2021 中，for-in 循环的迭代顺序被规定为按照对象属性插入的顺序进行。
如果我们需要按照特定顺序迭代对象的属性，可以使用 Object.keys() 方法和 Array.prototype.sort() 方法。
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- -- -- ----- ---- - ------------------------ --- ------ --- -- ----- - ---------------- ---------- -
上面的代码会按照属性名的字母顺序迭代对象的属性。
总结
ECMAScript 2021 引入了许多新特性，其中一些可以帮助我们提高代码的可读性。在本文中，我们讨论了可选的链式调用操作符、空值合并操作符和 for-in 循环迭代顺序。这些新特性可以帮助我们写出更简洁、更易读的代码。
希望本文能够对你有所帮助，并提高你的 JavaScript 编程技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661031d5d10417a2220bf8bc