随着前端技术的不断发展，ECMAScript 也在不断更新。在 ECMAScript 2021 中，引入了两个新的特性：optional chaining 和 nullish coalescing。这两个特性可以使前端开发更加简单和高效，本文将对其进行详细解析，并提供示例代码以帮助读者更好地理解。
optional chaining
optional chaining 是 ECMAScript 2021 中的一个新特性，可以帮助开发者更轻松地访问深层次的对象属性。在访问深层次的对象属性时，如果某个属性不存在，传统的方法是使用多个 if 语句或者三元运算符进行判断，这样会使代码变得冗长且难以维护。而 optional chaining 可以帮助我们避免这个问题。
optional chaining 使用 ?. 运算符来访问深层次的对象属性。如果某个属性不存在，它会返回 undefined，而不是抛出错误。下面是一个示例：
----- ------ - -
----- --------
-------- -
----- ---- ------
------- ---- ---- -----
--
--
---------------------------------- -- ---- -----
------------------------------------- -- ---------在上面的示例中，我们使用 ?. 运算符访问了 person.address.city 和 person.address.zipCode 两个属性。由于 person.address.zipCode 不存在，所以返回了 undefined。
除了访问对象属性，optional chaining 还可以在调用函数时使用。下面是一个示例：
----- ------ - -
----- --------
------------ -
------ -------------
--
--
--------------------------------------- -- ---------在上面的示例中，我们使用 ?. 运算符调用了 person.getAddress() 函数，并访问了返回值的 city 属性。如果 getAddress() 函数返回 undefined，则 ?. 运算符会返回 undefined。
nullish coalescing
nullish coalescing 是 ECMAScript 2021 中的另一个新特性，可以帮助我们更方便地设置默认值。在 JavaScript 中，我们通常使用 || 运算符来设置默认值，例如：
----- ---- - ----------- -- ----------
但是，当属性的值为 false、0、'' 或 null 时，|| 运算符会返回默认值，这可能不是我们想要的结果。这时候，我们可以使用 nullish coalescing 来解决这个问题。
nullish coalescing 使用 ?? 运算符来设置默认值，只有在属性的值为 null 或 undefined 时才会返回默认值。下面是一个示例：
----- ---- - ----------- -- ----------
在上面的示例中，如果 person.name 的值为 null 或 undefined，则返回 'Unknown'，否则返回 person.name 的值。
总结
optional chaining 和 nullish coalescing 是 ECMAScript 2021 中的两个新特性，可以帮助我们更加方便地访问深层次的对象属性和设置默认值。这两个特性可以使前端开发更加简单和高效。
希望本文的解析和示例代码能够帮助读者更好地理解和应用这两个特性。在实际开发中，我们应该根据具体情况选择合适的方法来访问对象属性和设置默认值，以提高代码的可读性和维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660fe811d10417a22208ff82