ES11 中可选链操作符的优化效果和实际应用案例

前言

在前端开发中，我们经常需要处理对象属性的值，但当对象属性为 null 或 undefined 时，访问属性的代码就会出现 TypeError 错误。

在 ES11 中，引入了可选链操作符 ?.，它可以在访问属性时自动判断属性值是否为空，避免了 TypeError 错误的出现。

本文将详细介绍可选链操作符的语法、优化效果和实际应用案例，希望能对大家学习和使用可选链操作符有一定的指导意义。

可选链操作符的语法

可选链操作符的语法很简单，在访问属性的时候使用 ?. 即可，例如：

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj?.a?.b?.c); // 1

当 a、b、c 中有任意一个属性值为 null 或 undefined 时，上述代码都不会出现 TypeError 错误，输出结果为 undefined。

若我们在访问属性时使用 .，则会出现 TypeError 错误，例如：

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj.a.b.c); // 1
console.log(obj.a.b.d.e); // TypeError: Cannot read property 'e' of undefined

由于 d 或 e 不存在在 obj 中，访问这两个属性时就会出现 TypeError 错误。

可选链操作符的优化效果

由于可选链操作符能够避免访问空属性值时出现 TypeError 错误，因此可以有效提高程序的健壮性和稳定性。

我们可以使用一个简单的例子体验一下可选链操作符的优化效果：

// 使用可选链操作符
const data = {
  user: {
    name: 'Tom',
    age: 18,
    address: {
      city: 'Beijing'
    }
  }
};

const city = data?.user?.address?.city ?? 'unknown';
console.log(city); // 'Beijing'

// 未使用可选链操作符
const data = null;
let city;
if (data && data.user && data.user.address && data.user.address.city) {
  city = data.user.address.city;
} else {
  city = 'unknown';
}
console.log(city); // 'unknown'

在使用可选链操作符的情况下，可以用一行代码访问到 city 属性的值，而未使用可选链操作符的情况下，需要使用多行代码，使得代码复杂、冗长。

可选链操作符的实际应用案例

在实际开发中，可选链操作符优化了许多代码的编写方式，让我们能够更轻松地访问嵌套对象的属性。

下面是一些可选链操作符的实际应用案例：

TypeScript 类型保护

在 TypeScript 中，我们经常使用类型保护来确保变量类型的正确性，使用可选链操作符可以更加方便和简洁地实现类型保护。

例如，我们有一个 Greeting 类型：

type Greeting = {
  name: string;
  sayHello: () => void;
};

现在要获取一个可能为空的 greeting 对象的 name 属性和 sayHello 方法：

const greeting: Greeting | null = null;

if (greeting) {
  console.log(greeting.name);
  greeting.sayHello();
}

由于 greeting 可能为空，我们必须在访问属性和方法之前使用 if 判断语句，这样代码显得冗长、不简洁。

使用可选链操作符可以更加简洁地实现：

const greeting: Greeting | null = null;

greeting?.name && console.log(greeting.name);
greeting?.sayHello?.();

在访问属性和方法之前使用可选链操作符 ?.，就可以避免 TypeError 错误的出现。

React 组件属性验证

在 React 中，我们经常需要进行基于 PropTypes 的属性验证，可以使用可选链操作符更方便地实现属性验证。

例如，我们编写了一个 HelloWorld 组件，有 name 和 age 两个属性：

import PropTypes from 'prop-types';

function HelloWorld(props) {
  const { name, age } = props;

  return (
    <div>
      <p>Hello, {name}!</p>
      {age && <p>Your age is {age}.</p>}
    </div>
  );
}

HelloWorld.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
};

在未使用可选链操作符的情况下，我们需要手动判断 props 中是否含有属性 age，才能进行属性验证，这样的代码显得冗长、不简洁。

使用可选链操作符可以更加简洁地实现：

import PropTypes from 'prop-types';

function HelloWorld(props) {
  const { name, age } = props;

  return (
    <div>
      <p>Hello, {name}!</p>
      {age && <p>Your age is {age}.</p>}
    </div>
  );
}

HelloWorld.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number?.isRequired,
};

在属性类型之后使用可选链操作符 ?.，就可以省略手动判断属性是否存在。

总结

在本文中，我们详细介绍了可选链操作符 ?. 的语法、优化效果和实际应用案例，可选链操作符可以使代码更加简洁、健壮和稳定。

在实际开发中，我们应该根据项目需求来选择是否使用可选链操作符，充分利用可选链操作符的优化效果，以提高程序的可读性和可维护性。

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