在前端开发中，我们经常需要通过访问对象的属性或方法来获取数据。然而，在访问这些属性或方法的过程中，可能会出现一些错误，例如属性不存在或者对象为空等。这些错误可能会导致程序崩溃，影响用户体验。为了解决这些问题，ECMAScript 2020 引入了 Optional chaining 操作符，使得访问对象属性或方法时更加安全和方便。
Optional chaining 的作用
Optional chaining 操作符（?.）可以用来简化访问对象属性或方法的过程，它可以帮助我们避免访问非空对象的属性或方法时出现的错误。如果某个属性不存在，那么访问这个属性会返回 undefined 而不会引发错误，从而避免程序崩溃。
在原来的访问属性的方式中，我们需要通过多个 if 语句和条件判断来避免访问不存在的属性或方法，代码量很大，而且效率并不高。例如：
if (object && object.property && object.property.method) {
object.property.method();
}如果使用 Optional chaining 操作符，则可以将上面的代码简化为：
object?.property?.method?.();
这种写法可以更加直观地表达程序员的意图，更加简洁和易于维护。
Optional chaining 的具体使用方法
Optional chaining 操作符在访问对象属性或方法时使用，如果对象属性或方法不存在，该操作符会立即返回 undefined。操作符的语法如下：
object?.property object?.method()
其中，? 表示可选链的开始，表示前面的表达式是否存在。如果存在，则可以继续访问该对象的属性或调用该对象的方法；如果不存在，则返回 undefined。
下面是一些使用 Optional chaining 操作符的示例代码，用于更好地理解它的用途和用法：
1. 访问对象属性
-- -------------------- ---- -------
--- ------ - -
--------- -
------- -------- -- -
------------------ --------
-
-
--
-------------------------------------- -- --------
------------------------------------ -- ---------2. 访问对象属性中的数组元素
let object = {
property: {
array: ['Hello', 'World']
}
};
console.log(object?.property?.array[0]); // 'Hello'
console.log(object?.property?.array[2]); // undefined3. 访问对象属性中的对象
-- -------------------- ---- -------
--- ------ - -
--------- -
------ -
------- -------- -- -
------------------ --------
-
-
-
--
--------------------------------------------- -- --------
------------------------------------------- -- ---------4. 访问对象属性中的对象数组元素
-- -------------------- ---- -------
--- ------ - -
--------- -
--------- -
- ----- ------ ---- -- --
- ----- -------- ---- -- -
-
-
--
------------------------------------------------- -- -----
------------------------------------------------- -- ---------需要注意的点
使用 Optional chaining 操作符也需要注意一些问题，下面是一些需要注意的点：
1. 只能用于访问对象的属性或调用对象的方法
Optional chaining 操作符只能用于访问对象的属性或调用对象的方法，不能用于访问变量或函数等。
let name = 'Tom'; console.log(name?toUpperCase()); // 报错：name?toUpperCase is not a function
2. 不能用于赋值或删除操作
Optional chaining 操作符只能进行对象属性或方法的访问，不能进行赋值或删除操作。
let object = {
property: {
name: 'Tom'
}
};
object?.property?.name = 'Jerry'; // 报错：invalid assignment left-hand side
delete object?.property?.name; // 报错：Invalid left-hand side in assignment3. 对于数组，不能使用 Optional chaining 操作符调用数组方法
对于数组，不能使用 Optional chaining 操作符调用数组方法，并且在访问数组元素时，数组元素不会在存在时自动变成数组。
let array = ['Hello', 'World'];
console.log(array?.push('Tom')); // 报错：Cannot read property 'push' of undefined
console.log(array?.[2]); // undefined总结
Optional chaining 操作符是 ECMAScript 2020 引入的一项优秀的新特性，它可以帮助我们简化访问对象属性或方法的过程，避免访问不存在的属性或方法时出现的错误。在实际开发中，使用 Optional chaining 操作符可以使代码更加清晰和简洁，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eaa274f6b2d6eab357ad41