如何在 ES11 中使用可选链操作符避免 undefined 错误-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们经常会遇到 undefined 错误，这是因为我们访问了一个不存在的属性或方法。这种错误不仅会影响程序的正常运行，而且还会给调试带来不便。ES11 引入了可选链操作符，可以很好地解决这个问题。

什么是可选链操作符

可选链操作符（Optional Chaining Operator）是 ES11 引入的一个新的语法特性。它可以让我们在访问对象的属性或方法时，避免出现 undefined 错误。

在旧的写法中，我们需要使用 if 判断或三元表达式来避免 undefined 错误：

if (obj && obj.prop && obj.prop.method) {
  obj.prop.method();
}

使用可选链操作符，可以简化代码：

obj?.prop?.method?.();

如果 obj、prop 或 method 不存在，那么代码不会报错，直接返回 undefined，不会执行后面的方法。

如何使用可选链操作符

访问对象属性

假设我们有一个对象 person，它包含了 name 和 age 两个属性，我们可以使用可选链操作符来访问这些属性：

const person = {
  name: '张三',
  age: 18
};

const name = person?.name;
const age = person?.age;
const gender = person?.gender;

在这个例子中，我们使用了可选链操作符来访问 person 对象的 name 和 age 属性。如果 person 对象不存在，那么 name 和 age 变量将会是 undefined。

调用对象方法

除了访问对象属性，我们还可以使用可选链操作符来调用对象方法。假设我们有一个对象 person，它包含了一个 sayHello 方法，我们可以使用可选链操作符来调用这个方法：

const person = {
  name: '张三',
  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
};

person?.sayHello?.();

在这个例子中，我们使用了可选链操作符来调用 person 对象的 sayHello 方法。如果 person 对象不存在，或者 sayHello 方法不存在，那么代码不会报错，直接返回 undefined，不会执行后面的方法。

访问数组元素

除了访问对象属性和调用对象方法，我们还可以使用可选链操作符来访问数组元素。假设我们有一个数组 arr，我们可以使用可选链操作符来访问这个数组的元素：

const arr = [1, 2, 3];

const first = arr?.[0];
const second = arr?.[1];
const third = arr?.[2];
const fourth = arr?.[3];

在这个例子中，我们使用了可选链操作符来访问数组 arr 的元素。如果 arr 数组不存在，或者访问的元素不存在，那么代码不会报错，直接返回 undefined。

总结

可选链操作符是 ES11 引入的一个新的语法特性，它可以让我们在访问对象的属性或方法时，避免出现 undefined 错误。使用可选链操作符可以简化代码，提高开发效率。在使用可选链操作符时，需要注意它的语法和使用场景，避免出现错误。

// javascriptcn.com 代码示例
const person = {
  name: '张三',
  age: 18,
  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
};

const name = person?.name;
const age = person?.age;
const gender = person?.gender;

person?.sayHello?.();

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