ECMAScript 2019 中的可选链操作符编写方案简介

在 JavaScript 中，访问对象的属性或方法时，如果该对象不存在，通常会抛出一个 TypeError 错误。而 ECMAScript 2019 中引入了可选链操作符，可以更方便地处理这种情况。本文将为大家介绍可选链操作符的使用方法和其在实际开发中的应用。

可选链操作符

可选链操作符是一个问号 ? 后跟着一个点 .，表示如果前面的表达式的值是 null 或 undefined，则不会报错，而是返回 undefined。例如：

const obj = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
};

// 传统写法
if (obj && obj.foo && obj.foo.bar && obj.foo.bar.baz) {
  console.log(obj.foo.bar.baz); // 'hello'
}

// 使用可选链操作符
console.log(obj?.foo?.bar?.baz); // 'hello'

在上面的代码中，obj?.foo?.bar?.baz 表示如果 obj、obj.foo、obj.foo.bar 或 obj.foo.bar.baz 中有任意一个值为 null 或 undefined，则返回 undefined，不会抛出错误。这种写法可以简化代码，减少错误处理的代码量。

可选链操作符的应用

条件渲染

可选链操作符可以用于条件渲染，例如：

const data = {
  user: {
    name: 'Alice',
    age: 18
  }
};

function renderUserInfo(userInfo) {
  return (
    <div>
      <p>Name: {userInfo?.name}</p>
      <p>Age: {userInfo?.age}</p>
    </div>
  );
}

renderUserInfo(data.user); // 显示用户信息
renderUserInfo(null); // 不显示任何内容

在上面的代码中，userInfo?.name 和 userInfo?.age 表示如果 userInfo 为 null 或 undefined，则不会显示任何内容。

链式调用

可选链操作符也可以用于链式调用，例如：

const data = {
  user: {
    name: 'Alice',
    age: 18,
    address: {
      city: 'Shanghai',
      street: 'Nanjing Road'
    }
  }
};

console.log(data?.user?.address?.city); // 'Shanghai'
console.log(data?.user?.address?.zipCode); // undefined

在上面的代码中，data?.user?.address?.city 和 data?.user?.address?.zipCode 表示如果任意一个属性为 null 或 undefined，则返回 undefined。

总结

可选链操作符是 ECMAScript 2019 中引入的一个新特性，可以简化代码，减少错误处理的代码量。可选链操作符可以用于条件渲染和链式调用。在实际开发中，我们可以根据具体的场景选择是否使用可选链操作符，以提高代码的可读性和可维护性。

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