拥抱 ES11 (optional chaining) 从此告别 TypeError："Cannot read property '***' of null"
在前端开发中，我们经常会遇到 TypeError："Cannot read property '***' of null" 这样的错误。这种错误通常是因为我们在使用对象属性时没有进行空值判断所导致的。在 ES11 中，新增了 optional chaining 这个语法糖，可以很好地解决这个问题。
optional chaining 是一种简化代码的语法糖。它的作用是在调用对象属性或方法时，如果对象不存在该属性或方法，就不会报错，而是返回 undefined。这样我们就不需要手动判断对象是否存在该属性或方法，从而避免了因为空值而导致的 TypeError 错误。
下面是 optional chaining 的语法：
object?.property object?.method()
其中，object 表示对象，property 表示对象的属性，method() 表示对象的方法。
接下来，我们通过一个实例来看看 optional chaining 的具体用法。
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ----------
------- -----------
--
-------- ----------- ------------
--
-- ----
----- ---- - -------------- - ------------------- - ----------
------------------ -- ---------
-- -------- --------
----- ---- - ---------------------
------------------ -- ---------
----- ----- - --------------------
------------------- -- ---------
----- --- - ------------------
----------------- -- ---------在上面的代码中，我们定义了一个 person 对象，包含了 name、address、hobbies 这些属性。首先，我们使用传统的写法获取 person 对象中的 address 属性的 city 值，需要手动判断 person.address 是否存在，如果不存在则返回 undefined。然后，我们使用 optional chaining 的方式获取 city 值，如果 address 属性不存在，则返回 undefined。
除了获取对象属性的值，optional chaining 还可以调用对象的方法。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---------- -
------------------- -- ---- -- ----------------
--
--
-- ----
-- ------- -- ---------------- -
------------------
-
-- -------- --------
-------------------在上面的代码中，我们定义了一个 person 对象，并定义了一个 sayHello 方法。使用传统的写法调用 sayHello 方法需要手动判断 person 对象是否存在以及是否有 sayHello 方法。使用 optional chaining 的方式则可以直接调用 person?.sayHello() 方法。
总结：
optional chaining 是一种非常实用的语法糖，可以很好地避免因为空值而导致的 TypeError 错误。在实际开发中，我们应该尽量使用 optional chaining 来简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d47396add4f0e0ffc69e5b