ECMAScript 2021 中的新语法：Optional Chaining 和 Nullish Coalescing
随着前端技术的快速发展，JavaScript 语言的更新也在不断推进。其中，ECMAScript 2021（简称 ES2021）是最新的 JavaScript 标准，在该标准里我们可以看到一些新的语法特性。其中，Optional Chaining 和 Nullish Coalescing 是值得关注的两个新特性。
Optional Chaining
Optional Chaining 能够在对象属性不存在时，不会像传统语法那样抛出错误，而是返回 undefined。它以问号（?）为前缀，表示在问号前面的对象属性若不存在，则后面的方法或属性调用都不会执行。这个语法糖使得我们可以更加优雅地处理对象深层嵌套的情况。
下面是一段示例代码，来展示 Optional Chaining 的使用。
const users = [
{ id: 1, name: 'Alice', age: 20, book: { title: 'Book1' }},
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 30, book: { title: 'Book3' }},
];
users.forEach(user => {
console.log(user.book?.title);
});在上面的代码中，我们定义了一个 users 数组，其中每个元素都是一个对象。其中，有些对象拥有 book 属性，有些则没有。在我们调用 console.log() 方法时，如果用户拥有 book 属性，就会输出它的 title 值；否则不会输出任何内容。其中，我们使用了 Optional Chaining 这个新语法，以保证能够安全地访问对象的属性。
Nullish Coalescing
Nullish Coalescing 是另一个有用的新语法，在变量为空时给定一个默认值。这个新语法以两个竖杠符号（||）为标记。一般情况下，我们使用 || 符号来对空值进行赋默认值，但是当变量为 0 或 false 等 Falsy 值时，也会被错误地视为为空。而 Nullish Coalescing 则只对 null 和 undefined 值的变量使用默认值。这使得我们可以更好地处理变量的默认值，避免逻辑上的错误。
下面是一段示例代码，来展示 Nullish Coalescing 的使用。
const myVar1 = null; const myVar2 = undefined; const myVar3 = 0; const myVar4 = false; console.log(myVar1 ?? 'default'); // Output: 'default' console.log(myVar2 ?? 'default'); // Output: 'default' console.log(myVar3 || 'default'); // Output: 'default' console.log(myVar4 || 'default'); // Output: 'default'
在上面的代码中，我们定义了几个变量，每个变量的值都不同。然后，我们使用 Nullish Coalescing 这个新语法，给这些变量赋予了一个默认值。可以看到，在 myVar1 和 myVar2 为 undefined 或 null 时，显示的都是默认值；而 myVar3 和 myVar4 为 Falsy 值时，显示的则是原始值。
总结
ECMAScript 2021 为 JavaScript 这门语言带来了很多新的特性，其中 Optional Chaining 和 Nullish Coalescing 两个语法特性是十分有用的。Optional Chaining 可以使对象深层嵌套的属性访问变得更简单、优雅；而 Nullish Coalescing 可以更好地处理变量的默认值，避免出现逻辑错误。我们需要对这些新语法特性做深入的研究，以在实践中更好地运用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a5d8dbadd4f0e0ffe679d7