随着前端技术的不断升级，许多新的特性被加入到了 JavaScript 的语言中。ES6 中的可选链操作符是其中之一。可选链操作符 ?. 可以在对象的属性调用中进行安全的导航，当属性不存在时不会抛出异常。
基本使用方法
ES6 中的可选链操作符 ?. 可以在对象的属性调用中进行安全导航。使用可选链操作符 ?. 时，如果属性不存在，代码不会抛出异常。下面是一些使用可选链操作符的示例代码。
普通属性调用
// javascriptcn.com 代码示例
let person = {
name: "John",
address: {
city: "New York",
state: "NY"
}
};
console.log(person.address.city); // "New York"
console.log(person.address.zipcode); // undefined
console.log(person.address.zipcode.length); // TypeError: Cannot read property 'length' of undefined在上面的代码中，当尝试访问 person.address.zipcode 时，代码会抛出一个 TypeError 异常，因为 person.address 是 undefined，它没有 zipcode 属性。为了避免这种情况，我们可以使用可选链操作符 ?.。
console.log(person.address?.zipcode); // undefined console.log(person.address?.zipcode?.length); // undefined
在上面的代码中，使用可选链操作符 ?. 时，如果属性不存在，代码只会返回 undefined，不会抛出异常。这对于避免代码中出现大量的 if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) 很有帮助。
函数调用
我们也可以在函数调用中使用可选链操作符 ?.。下面是一个示例代码：
// javascriptcn.com 代码示例
let person = {
name: "John",
sayHello: function() {
return "Hello from " + this.name;
}
};
console.log(person.sayHello()); // "Hello from John"
console.log(person.sayHi?.()); // undefined在上面的代码中，如果尝试调用 person.sayHi()，代码只会返回 undefined，不会抛出异常。
高级用法
除了基本使用方法之外，ES6 中的可选链操作符还有一些高级用法，可以帮助我们更好地控制代码流程。
空值合并运算符
空值合并运算符 ?? 可以在可选链操作符的基础上进行更进一步的操作。空值合并运算符可以在操作符左侧的表达式为 null 或 undefined 时返回它的右侧值，否则返回左侧值。下面是一个示例代码：
let person = {
name: "John",
address: null
};
console.log(person.address?.city ?? "unknown"); // "unknown"
console.log(person.address?.city || "unknown"); // TypeError: Cannot read property 'city' of null在上面的代码中，使用空值合并运算符 ?? 可以避免出现 undefined 或 null 的情况。另外需要注意的是，如果使用逻辑或操作符 ||，当 person.address 是 null 时，代码会抛出一个 TypeError 异常，因为 null 没有 city 属性。
数组调用
在数组调用中，同样可以使用可选链操作符 ?.。下面是一个使用可选链操作符 ?. 的示例代码：
// javascriptcn.com 代码示例
let people = [
{ name: "John", age: 20 },
{ name: "Jane", age: 30 },
null,
{ name: "Mike", age: 40 }
];
console.log(people[0]?.name); // "John"
console.log(people[2]?.name); // undefined
console.log(people[2]?.name ?? "unknown"); // "unknown"在上面的代码中，使用可选链操作符 ?. 时，如果数组元素不存在，则代码只会返回 undefined，不会抛出异常。使用空值合并运算符 ??，可以避免出现 undefined 或 null 的情况。
总结
ES6 中的可选链操作符可以在对象的属性调用、函数调用和数组调用中进行安全导航，当属性不存在时不会抛出异常。除了基本使用方法之外，还可以使用空值合并运算符进行更进一步的操作。可选链操作符的使用方法可以帮助我们更好地控制代码流程，避免代码中出现大量的判断语句。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653eaf7a7d4982a6eb819b4f