ES11: 可选链操作符 Optional Chaining Operator-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，很多时候我们需要访问对象或者数组的某个属性或者方法。但是有时候我们不知道对象或者数组是否存在某个属性或者方法，这时候就需要加上一些判断。在过去，我们通常使用 if 语句或者三目运算符来进行判断，但是这些方法并不是很优雅。

ES11 中引入了一个新的操作符 Optional Chaining Operator，简称 ?.，它可以在对象或者数组的某个属性或者方法不存在的情况下，不会抛出错误，而是会返回 undefined。这个操作符可以让我们写出更为简洁、优雅的代码。

基本语法

?. 操作符的基本语法如下：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

在这里，obj 表示对象，prop 表示对象的属性，expr 表示属性名，arr 表示数组，index 表示数组的下标，func 表示函数，args 表示函数的参数列表。

在使用 ?. 操作符时，我们可以省略原本需要判断的部分。如果该部分不存在，操作符会自动返回 undefined。

举个例子，假设我们有一个对象 person，其中包含一个属性 name，我们想访问这个属性：

const person = {
  name: 'John'
};

console.log(person.name); // 输出 "John"

但是如果 person 对象不存在，我们需要添加 if 语句来避免错误：

let person = null;

if (person && person.name) {
  console.log(person.name);
}

使用 ?. 操作符，我们可以省略 if 语句：

let person = null;

console.log(person?.name); // 输出 undefined

如果 person 对象存在，那么 console.log(person?.name) 就会输出 John。如果 person 对象不存在，那么 console.log(person?.name) 就会输出 undefined。

与其他运算符的结合使用

?. 操作符可以与其他运算符结合使用，比如 || 运算符。如果我们想在属性不存在时使用默认值，我们可以这样写：

const person = null;
const name = person?.name || 'John';

console.log(name); // 输出 "John"

在这个例子中，如果 person 对象不存在或者 name 属性不存在，name 变量就会赋值为 'John'。

我们也可以使用 && 运算符来进行更为复杂的判断：

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

const city = person?.address?.city;

console.log(city); // 输出 "New York"

在这个例子中，如果 person 对象不存在或者 address 属性不存在，city 变量就会赋值为 undefined。

指导意义

?. 操作符的出现使得我们的代码更加简洁、优雅，减少了许多不必要的判断语句。但是过度使用也会带来一些问题。

首先，虽然 ?. 操作符可以让我们在访问不存在的属性时不会抛出错误，但是它并不能帮我们避免所有的错误。如果我们在访问属性时使用了错误的表达式，仍然会抛出错误。

其次，过度使用 ?. 操作符会让代码变得难以阅读和理解。我们应该在使用时遵循简洁明了的原则，并谨慎使用。

最后，?. 操作符不是所有 JavaScript 运行环境都支持。如果要使用它，请确保你的运行环境已经升级到 ES11。

总结

ES11 中引入了一个新的操作符 Optional Chaining Operator，可以让我们更加优雅地访问对象和数组的属性和方法。在使用时需要遵循简洁明了的原则，并谨慎使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e5eb47d4982a6ebf67257