ES12 中的 Optional Chaining 语法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理嵌套的对象或数组。在 JavaScript 中，访问这些嵌套的属性或元素可能会出现空值或 undefined 的情况，这时候就需要进行判断。ES12 中引入了 Optional Chaining 语法，可以方便地处理这种情况，本文将详细介绍这一语法的用法和注意事项。

Optional Chaining 的介绍

Optional Chaining 是一种新的语法，用于访问嵌套对象或数组中的属性或元素，当访问的属性或元素不存在时，不会抛出异常，而是返回 undefined。它通过使用问号 ? 来标记可选的属性或元素，简化了代码的书写。

Optional Chaining 的用法

Optional Chaining 可以用于访问对象或数组的属性或元素，下面是几个示例：

访问对象的属性

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

// 传统写法
const city = user.address ? user.address.city : undefined;

// Optional Chaining
const city = user.address?.city;

访问数组的元素

const numbers = [1, 2, 3];

// 传统写法
const third = numbers.length > 2 ? numbers[2] : undefined;

// Optional Chaining
const third = numbers?.[2];

访问函数的返回值

// javascriptcn.com 代码示例
function getUser(id) {
  if (id === 1) {
    return {
      name: 'Alice',
      age: 20,
    };
  } else {
    return undefined;
  }
}

// 传统写法
const name = getUser(1) ? getUser(1).name : undefined;

// Optional Chaining
const name = getUser(1)?.name;

Optional Chaining 的注意事项

使用 Optional Chaining 语法时，需要注意以下几点：

1. 可选属性或元素必须在问号 `?` 的左侧

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

const city = user?.address.city; // 正确
const city = user.address?.city; // 错误，会抛出异常

2. Optional Chaining 只能用于访问属性或元素，不能用于调用函数

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

user.sayHello?.(); // 错误，会抛出异常

3. Optional Chaining 可以与 nullish 合并运算符 `??` 一起使用

nullish 合并运算符 ?? 用于判断一个值是否为 null 或 undefined，如果是，则返回默认值。与 Optional Chaining 一起使用可以进一步简化代码。

// javascriptcn.com 代码示例
const user = {
  name: 'Alice',
  age: null,
};

// 传统写法
const age = user.age !== null && user.age !== undefined ? user.age : 18;

// Optional Chaining + nullish 合并运算符
const age = user.age ?? 18;

总结

Optional Chaining 语法是 ES12 中的一项新特性，可以方便地访问嵌套对象或数组的属性或元素，避免了空值或 undefined 的判断。使用时需要注意可选属性或元素必须在问号 ? 的左侧，不能用于调用函数，可以与 nullish 合并运算符 ?? 一起使用。

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

ES12 中的 Optional Chaining 语法详解