小心使用可选链式调用可以避免 ES11 的 TypeError-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到对象的属性或方法不存在而导致的 TypeError 错误。在 ES11 中，新增了可选链式调用（Optional Chaining）的语法，可以很好地解决这个问题。本文将详细介绍可选链式调用的用法，并提供示例代码和指导意义。

什么是可选链式调用

可选链式调用是一种新的语法，可以让我们在对象的属性或方法不存在时，不会抛出 TypeError 错误，而是返回 undefined。这种语法使用问号 ? 表示可选属性或方法，可以在对象的属性或方法不存在时安全地访问。

下面是一个使用可选链式调用的示例：

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

const city = person.address?.city;
console.log(city); // 'Shanghai'

const country = person.address?.country;
console.log(country); // undefined

在上面的示例中，我们使用可选链式调用访问了 person.address 对象的 city 属性。如果 person.address 对象不存在，那么 city 变量会被赋值为 undefined。同样，我们使用可选链式调用访问了 person.address 对象的 country 属性，由于 person.address 对象不存在 country 属性，所以 country 变量的值也是 undefined。

可选链式调用的用法

使用可选链式调用的语法非常简单，只需要在要访问的属性或方法的前面加上问号 ? 就可以了。下面是一些常见的用法：

访问对象属性

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

const city = person.address?.city;
console.log(city); // 'Shanghai'

const country = person.address?.country;
console.log(country); // undefined

调用对象方法

const person = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.sayHello?.(); // 'Hello, my name is Alice.'

访问数组元素

const numbers = [1, 2, 3];

const first = numbers?.[0];
console.log(first); // 1

const fourth = numbers?.[3];
console.log(fourth); // undefined

调用数组方法

const numbers = [1, 2, 3];

numbers?.push(4);
console.log(numbers); // [1, 2, 3, 4]

可选链式调用的指导意义

使用可选链式调用可以避免因为对象的属性或方法不存在而导致的 TypeError 错误，从而让我们的代码更加健壮和安全。但是，我们也要注意可选链式调用的一些限制和注意事项：

可选链式调用只能在对象或数组的最后一层使用，不能在中间层使用。
可选链式调用不能用于函数调用的参数上。
可选链式调用不能用于赋值语句的左边。

下面是一个不正确的示例：

const person = {
  name: 'Alice',
  address: null
};

const city = person?.address?.city; // TypeError: Cannot read property 'city' of null

在上面的示例中，我们使用了可选链式调用访问了 person.address 对象的 city 属性。但是，由于 person.address 的值为 null，所以访问 city 属性时会抛出 TypeError 错误。

总结

可选链式调用是一种非常实用的语法，可以避免因为对象的属性或方法不存在而导致的 TypeError 错误。在实际开发中，我们应该注意可选链式调用的一些限制和注意事项，合理地使用这种语法，让我们的代码更加健壮和安全。

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