在前端开发中，我们经常需要处理数据的 null 或 undefined 值，以及对象属性的存在性判断。在 ES10 中，新增了两个操作符 Optional Chaining 和 Nullish Coalescing，这些操作符可以帮助我们更方便地处理这些问题。
Optional Chaining 操作符
Optional Chaining 操作符（?.）可以用来判断对象属性是否存在，如果属性存在则返回属性值，否则返回 undefined。
在 ES10 之前，我们通常使用以下方式来判断对象属性是否存在：
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
// do something
}这种方式看起来很冗长，而且容易出错。使用 Optional Chaining 操作符可以简化代码：
if (obj?.prop1?.prop2?.prop3) {
// do something
}这样代码更加简洁，而且不需要做冗长的判断，也不会因为属性不存在而报错。
另外，在链式调用中，Optional Chaining 操作符也很有用。比如：
const result = obj?.prop1?.method1()?.prop2;
这段代码会先判断 obj 是否存在，如果存在则调用 prop1 方法，如果返回值存在则调用 method1 方法，如果返回值存在则获取 prop2 属性的值，如果任意一步返回了 undefined，则返回 undefined。
Nullish Coalescing 操作符
Nullish Coalescing 操作符（??）可以用来处理 null 或 undefined 值。
在 ES10 之前，我们通常使用以下方式来处理 null 或 undefined 值：
const value = input || defaultValue;
这种方式虽然简单，但是存在一些问题。比如，当 input 的值为 '' 或者 0 时，上述代码会返回 defaultValue，这可能不是我们想要的结果。
使用 Nullish Coalescing 操作符可以解决这个问题：
const value = input ?? defaultValue;
这段代码只有当 input 的值为 null 或 undefined 时才返回 defaultValue。
示例代码
下面是一个使用 Optional Chaining 和 Nullish Coalescing 操作符的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- ---- ------
------ -----
---- ----
-
--
----- ---- - ------------------ -- -------- ------
----- --- - ----------------- -- -------- -----
------------------ -- ---- -----
----------------- -- -------- ----在上面的示例代码中，使用 Optional Chaining 操作符来判断 user 对象中的 address 属性是否存在，如果存在则获取 city 和 zip 属性的值，如果不存在则返回 undefined。然后使用 Nullish Coalescing 操作符来处理 zip 属性的值，如果 zip 的值为 null 或 undefined，则返回 'unknown zip'。
总结
Optional Chaining 和 Nullish Coalescing 操作符是 ES10 中新增的两个操作符，它们可以帮助我们更方便地处理 null 或 undefined 值，以及对象属性的存在性判断。这些操作符可以让我们的代码更加简洁、易读，并且减少了出错的可能性。在实际开发中，我们应该适当地使用这些操作符来提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662ff209d3423812e4deb4f0