在前端开发中，我们经常会遇到对象属性不存在的错误。例如，当我们从后端获取数据时，可能会出现某些数据项不存在的情况。在这种情况下，如果我们直接访问不存在的属性，就会抛出异常，导致程序崩溃。为了避免这种情况，ES12 提供了 Optional Chaining Operator，让我们可以更加安全地访问对象属性。
Optional Chaining Operator 是什么？
Optional Chaining Operator 是 ES12 中新增的一种运算符，它的作用是在访问对象属性时，如果属性不存在，就直接返回 undefined，而不会抛出异常。
Optional Chaining Operator 的语法如下：
object?.property
其中，object 表示要访问的对象，property 表示要访问的属性。如果 object 中不存在 property 属性，运算符就会返回 undefined。
如何使用 Optional Chaining Operator？
使用 Optional Chaining Operator 很简单，只需要在访问对象属性时，加上 ?. 运算符即可。例如，下面的代码演示了如何使用 Optional Chaining Operator：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- -
--------- ------
----- -----
-
--
----------------------- -- -----
----------------------------------- -- ------
---------------------------------- -- --------------- ------ ---- -------- --------- -- ---------
----------------------------------- -- ------------在上面的代码中，我们定义了一个 user 对象，其中包含了一个 address 对象。当我们直接访问 user.address.country 属性时，由于 country 属性不存在，就会抛出异常。但是，如果我们使用 Optional Chaining Operator，就可以避免这种异常。
Optional Chaining Operator 的嵌套使用
在实际开发中，我们可能需要访问多层嵌套的对象属性。这时，我们可以使用多个 ?. 运算符来实现嵌套访问。例如，下面的代码演示了如何使用多个 ?. 运算符：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- -
--------- ------
----- ------
------- -
----- --------
------- -----
-
-
--
---------------------------------------- -- --------
-------------------------------------------- -- ------------在上面的代码中，我们访问了 user 对象的 address 属性和 street 属性，使用了两个 ?. 运算符。如果任意一个属性不存在，运算符都会返回 undefined。
Optional Chaining Operator 与 Nullish Coalescing Operator 的结合使用
Optional Chaining Operator 与 Nullish Coalescing Operator 是两个常用的运算符，它们可以结合使用，实现更加灵活的代码处理。
Nullish Coalescing Operator 是 ES12 中新增的另一个运算符，它的作用是在变量为 null 或 undefined 时，返回默认值。例如，下面的代码演示了如何使用 Nullish Coalescing Operator：
const value = null ?? 'default value'; console.log(value); // 输出：default value
在上面的代码中，变量 value 是 null，但是我们使用了 Nullish Coalescing Operator，返回了默认值 default value。
当 Optional Chaining Operator 和 Nullish Coalescing Operator 结合使用时，我们可以更加方便地处理对象属性不存在的情况。例如，下面的代码演示了如何结合使用这两个运算符：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- -
--------- ------
----- ------
------- -
----- --------
------- -----
-
-
--
----- -------- - ------------------------------ -- ---------
---------------------- -- ---------在上面的代码中，我们结合使用了 Optional Chaining Operator 和 Nullish Coalescing Operator。当 postcode 属性不存在时，运算符返回默认值 000000。
总结
Optional Chaining Operator 是 ES12 中新增的一种运算符，它可以帮助我们更加安全地访问对象属性，在属性不存在时，返回 undefined 而不是抛出异常。在实际开发中，我们可以结合使用 Optional Chaining Operator 和 Nullish Coalescing Operator，实现更加灵活的代码处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bcb1b1add4f0e0ff550bff