在前端开发中，经常会遇到变量值为 null 或 undefined 的情况。这些情况可能会导致代码中出现难以调试的问题，例如 TypeError 或 ReferenceError。ES2020 中新增的可空类型操作符（Optional Chaining Operator）可以帮助我们避免这些问题。
可空类型操作符的用法
可空类型操作符的语法为 ?.，它可以用于访问对象属性或方法，而不必担心对象是否为 null 或 undefined。例如：
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
age: 20,
address: {
city: 'Beijing',
street: 'Chang\'an Avenue',
},
};
console.log(person.address?.city); // 'Beijing'
console.log(person.address?.zipCode); // undefined
console.log(person.address.zipCode); // TypeError: Cannot read property 'zipCode' of undefined在上面的例子中，我们使用可空类型操作符访问了 person.address 对象的 city 属性和 zipCode 属性。当 person.address 为 null 或 undefined 时，访问 person.address.city 会返回 undefined，而不会抛出 TypeError 异常。另外，当 person.address 为 null 或 undefined 时，访问 person.address.zipCode 会返回 undefined，而不会抛出 TypeError 异常。
可空类型操作符还可以用于调用对象方法。例如：
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
age: 20,
greet() {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet?.(); // 'Hello, my name is Alice.'
person.sayHello?.(); // undefined在上面的例子中，我们使用可空类型操作符调用了 person.greet 方法和 person.sayHello 方法。当 person.greet 存在时，调用 person.greet() 会输出一条问候语。当 person.sayHello 不存在时，调用 person.sayHello() 会返回 undefined。
可空类型操作符的指导意义
可空类型操作符的引入，可以帮助我们更加轻松地处理变量值为 null 或 undefined 的情况。它可以简化代码，提高代码的可读性和可维护性。同时，它也可以避免难以调试的问题，例如 TypeError 或 ReferenceError。
在实际开发中，我们可以在访问对象属性或方法时使用可空类型操作符，以避免出现因为对象为 null 或 undefined 而导致的异常。例如：
const user = getUser();
if (user?.address?.city === 'Beijing') {
console.log('The user lives in Beijing.');
} else {
console.log('The user does not live in Beijing.');
}在上面的例子中，我们使用可空类型操作符判断用户的地址是否为北京。当 user、user.address 或 user.address.city 为 null 或 undefined 时，不会出现异常，代码也不会崩溃。这样可以避免因为用户信息不完整而导致的异常，从而提高代码的健壮性。
总结
可空类型操作符是 ES2020 中新增的一个重要特性，它可以帮助我们更加轻松地处理变量值为 null 或 undefined 的情况。在实际开发中，我们可以在访问对象属性或方法时使用可空类型操作符，以避免出现因为对象为 null 或 undefined 而导致的异常，从而提高代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6562f66ad2f5e1655dcb24f1