在前端项目开发中，我们经常需要处理各种数据结构和算法，例如数组、字符串、对象等。而在处理这些数据时，我们通常需要手写很多方法和函数，这不仅费时费力，而且容易引入一些 bug，给项目带来安全隐患。
然而，随着 ECMAScript 不断更新，越来越多的新特性被加入到语言中，它们可以帮助我们更加简单、高效地处理数据和算法问题，从而避免手写方法带来的问题。
本篇文章将介绍 ECMAScript 2020 中新增的几个特性，以及它们可以如何用于精简代码、避免手写带来的 bug。
可选链（Optional Chaining）
在处理对象中的属性时，很容易遇到属性不存在导致程序出错的情况。例如：
// 注意：下面代码中的属性 customer.mailingAddress 是不存在的 let mailingAddress = customer.mailingAddress.streetAddress;
在上述代码中，如果 customer 对象中没有 mailingAddress 属性，那么调用 mailingAddress.streetAddress 时就会出现错误。
可选链（Optional Chaining）可以解决这个问题。它可以在对象上按照一定规则查找属性，如果查找到 properties 中不存在的属性，就直接返回 undefined。
例如：
let mailingAddress = customer?.mailingAddress?.streetAddress;
在上述代码中，如果 customer 对象中不存在 mailingAddress 属性或者 mailingAddress 对象中不存在 streetAddress 属性，那么 mailingAddress 变量就会被赋值为 undefined。
空值合并运算符（Nullish Coalescing Operator）
在处理数据时，我们可能需要针对某些数据是 null 或者 undefined 时做出特殊处理，例如：
let value = someValue || 'default value';
在上述代码中，如果 someValue 的值为 falsy（例如 null、undefined、空字符串等），那么 value 变量就会被赋值为 'default value'。
然而，上述代码有一个缺陷，就是当 someValue 的值为 0 或者空字符串时，它们也会被视为 falsy，从而引发代码逻辑错误。
空值合并运算符（Nullish Coalescing Operator）可以解决这个问题。它可以在计算时明确区分 null 和 undefined 值，例如：
let value = someValue ?? 'default value';
在上述代码中，如果 someValue 的值为 null 或者 undefined，那么 value 变量就会被赋值为 'default value'。如果 someValue 的值为 0 或者空字符串，则 value 变量仍然会被赋值为 0 或者空字符串。
双冒号运算符（Optional Chaining）
双冒号运算符（Optional Chaining）可以让我们更加方便有效地使用函数。
例如，下面的代码会创建一个新数组，并将数组内的每个元素都设置为 0：
let array = new Array(10).fill(0);
上述代码使用了 fill() 方法来将数组元素设置为 0。然而，如果我们需要创建一个二维数组，并将数组内的每个元素都设置为 0，那么就需要使用多次 fill() 方法，代码逻辑会变得很冗长。
双冒号运算符可以解决这个问题。例如，下面的代码就可以创建一个二维数组，并将数组内的每个元素都设置为 0：
let array = new Array(10).fill()::map(() => new Array(10).fill(0));
在上述代码中，通过双冒号运算符将 fill() 方法绑定到 map() 方法上，从而直接在 map() 方法内部创建新的数组并设置数组元素。
参考资料
- ECMAScript® 2020 Language Specification https://tc39.es/ecma262/2020/
- 可选链(Optional Chaining) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
- 空值合并运算符(Nullish Coalescing Operator) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
- 双冒号运算符(Optional Chaining) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
总结
本篇文章介绍了 ECMAScript 2020 中的三个新特性：可选链（Optional Chaining）、空值合并运算符（Nullish Coalescing Operator）、双冒号运算符（Optional Chaining），以及它们可以如何用于精简代码、避免手写带来的 bug。在实际项目开发中，我们应该多加利用这些新特性，并善于发掘语言本身提供的更多工具和方法，从而让我们的代码更加简单、高效、安全。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a65a49add4f0e0fff1e606