在前端项目开发中，我们经常需要处理各种数据结构和算法，例如数组、字符串、对象等。而在处理这些数据时，我们通常需要手写很多方法和函数，这不仅费时费力，而且容易引入一些 bug，给项目带来安全隐患。
然而，随着 ECMAScript 不断更新，越来越多的新特性被加入到语言中，它们可以帮助我们更加简单、高效地处理数据和算法问题，从而避免手写方法带来的问题。
本篇文章将介绍 ECMAScript 2020 中新增的几个特性，以及它们可以如何用于精简代码、避免手写带来的 bug。
可选链（Optional Chaining）
在处理对象中的属性时，很容易遇到属性不存在导致程序出错的情况。例如：
-- ----------- ----------------------- ----- --- -------------- - --------------------------------------
在上述代码中，如果 customer 对象中没有 mailingAddress 属性，那么调用 mailingAddress.streetAddress 时就会出现错误。
可选链（Optional Chaining）可以解决这个问题。它可以在对象上按照一定规则查找属性，如果查找到 properties 中不存在的属性，就直接返回 undefined。
例如：
--- -------------- - ----------------------------------------
在上述代码中，如果 customer 对象中不存在 mailingAddress 属性或者 mailingAddress 对象中不存在 streetAddress 属性，那么 mailingAddress 变量就会被赋值为 undefined。
空值合并运算符（Nullish Coalescing Operator）
在处理数据时，我们可能需要针对某些数据是 null 或者 undefined 时做出特殊处理，例如：
--- ----- - --------- -- -------- -------
在上述代码中，如果 someValue 的值为 falsy（例如 null、undefined、空字符串等），那么 value 变量就会被赋值为 'default value'。
然而，上述代码有一个缺陷，就是当 someValue 的值为 0 或者空字符串时，它们也会被视为 falsy，从而引发代码逻辑错误。
空值合并运算符（Nullish Coalescing Operator）可以解决这个问题。它可以在计算时明确区分 null 和 undefined 值，例如：
--- ----- - --------- -- -------- -------
在上述代码中，如果 someValue 的值为 null 或者 undefined，那么 value 变量就会被赋值为 'default value'。如果 someValue 的值为 0 或者空字符串，则 value 变量仍然会被赋值为 0 或者空字符串。
双冒号运算符（Optional Chaining）
双冒号运算符（Optional Chaining）可以让我们更加方便有效地使用函数。
例如，下面的代码会创建一个新数组，并将数组内的每个元素都设置为 0：
--- ----- - --- ------------------
上述代码使用了 fill() 方法来将数组元素设置为 0。然而，如果我们需要创建一个二维数组，并将数组内的每个元素都设置为 0，那么就需要使用多次 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