在前端开发中，我们常常会遇到需要判断对象或数组是否存在某个属性或元素，然后再进行相应的操作的情况。而在 JavaScript 中，由于动态类型的特性，我们需要进行类型判断，避免出现错误。但是，这样的判断往往会使代码变得冗长和难以维护。ES2020 中新增的 Optional Chaining （可选链）就是为了解决这个问题。
Optional Chaining 是什么？
Optional Chaining 是一种新的语法，可以让我们在访问对象或数组属性时，避免出现 undefined 的情况。如果属性不存在，Optional Chaining 会直接返回 undefined，而不会抛出错误。这样，我们就可以省略繁琐的类型判断语句，使代码更加简洁和易于维护。
如何使用 Optional Chaining？
Optional Chaining 的语法是使用问号（?）来表示需要访问的属性或元素是否存在。下面是一个示例：
// javascriptcn.com 代码示例
const user = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Dongcheng',
},
};
console.log(user.address?.city); // 'Beijing'
console.log(user.address?.country); // undefined在上面的示例中，我们使用了 Optional Chaining 来访问 user 对象的 address 属性中的 city 和 country 属性。如果 address 属性不存在，Optional Chaining 会直接返回 undefined，而不会抛出错误。
此外，Optional Chaining 还支持多层访问，例如：
// javascriptcn.com 代码示例
const user = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Dongcheng',
},
};
console.log(user?.address?.city); // 'Beijing'
console.log(user?.address?.country?.name); // undefined在上面的示例中，我们使用了 Optional Chaining 来访问 user 对象的 address 属性中的 city 属性和 country 属性的 name 属性。如果任意一个属性不存在，Optional Chaining 都会直接返回 undefined。
Optional Chaining 的注意事项
虽然 Optional Chaining 可以帮助我们避免类型判断错误，但是在使用时也需要注意一些细节。
不要滥用 Optional Chaining
Optional Chaining 可以让我们省略类型判断，使代码更加简洁。但是，如果滥用 Optional Chaining，会使代码变得难以理解和维护。因此，在使用 Optional Chaining 时，需要根据实际情况进行判断，避免过度使用。
Optional Chaining 不适用于函数调用
Optional Chaining 只适用于访问属性或元素，而不适用于函数调用。如果需要调用函数，仍然需要进行类型判断。例如：
const user = {
name: 'Tom',
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
},
};
user?.sayHello && user.sayHello(); // 'Hello, my name is Tom.'在上面的示例中，我们使用了 Optional Chaining 来判断 user 对象是否存在 sayHello 方法。如果存在，我们使用 && 运算符来调用该方法。这样可以避免 user 对象不存在或 sayHello 方法不存在时出现错误。
Optional Chaining 不适用于赋值操作
Optional Chaining 只适用于访问属性或元素，而不适用于赋值操作。如果需要进行赋值操作，仍然需要进行类型判断。例如：
// javascriptcn.com 代码示例
const user = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Dongcheng',
},
};
const country = user?.address?.country; // undefined在上面的示例中，我们使用了 Optional Chaining 来访问 user 对象的 address 属性中的 country 属性，并将其赋值给 country 变量。如果 address 属性不存在或 country 属性不存在，country 变量将被赋值为 undefined。
总结
Optional Chaining 是 ES2020 中新增的语法，可以避免在访问对象或数组属性时出现 undefined 的情况。使用 Optional Chaining 可以让代码更加简洁和易于维护，但是需要注意不要滥用，不适用于函数调用和赋值操作。在实际开发中，我们可以根据需要灵活使用 Optional Chaining，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6505d4d495b1f8cacd218a42