ES12 中如何使用 optional chaining 运算符让代码更健壮

在前端开发中，我们经常会遇到需要访问对象或数组中的嵌套属性或方法的情况。但是如果在访问的过程中遇到了 null 或 undefined，就会导致程序崩溃。为了解决这个问题，ES12 中引入了 optional chaining 运算符，可以让代码更健壮。

optional chaining 运算符

optional chaining 运算符是一个问号加上一个点号，即 ?.，它可以安全地访问对象或数组中的嵌套属性或方法。如果在访问的过程中遇到了 null 或 undefined，它会自动返回 undefined，而不会导致程序崩溃。

下面是一个示例：

const obj = {
  foo: {
    bar: {
      baz: 'Hello World!'
    }
  }
};

console.log(obj?.foo?.bar?.baz); // 输出：Hello World!
console.log(obj?.foo?.bar?.qux); // 输出：undefined

在上面的示例中，我们使用 optional chaining 运算符访问了对象 obj 中的嵌套属性 foo.bar.baz 和 foo.bar.qux。由于 foo.bar.baz 存在，所以输出了它的值；而 foo.bar.qux 不存在，所以输出了 undefined。

optional chaining 运算符的使用场景

optional chaining 运算符在访问对象或数组中的嵌套属性或方法时非常有用，尤其是在访问第三方 API 或后端数据时更是如此。如果我们不使用 optional chaining 运算符，就需要使用一些繁琐的判断语句来保证程序的健壮性。

下面是一个使用 optional chaining 运算符的示例，用于访问第三方 API 中的数据：

const response = await fetch('https://api.example.com/data');
const data = await response.json();

console.log(data?.result?.[0]?.name); // 输出第一个结果的名称

在上面的示例中，我们使用 optional chaining 运算符访问了第三方 API 返回的数据中的嵌套属性 result[0].name。如果我们不使用 optional chaining 运算符，就需要使用一些繁琐的判断语句来保证程序的健壮性，如下所示：

const response = await fetch('https://api.example.com/data');
const data = await response.json();

let name;

if (data && data.result && data.result.length > 0 && data.result[0].name) {
  name = data.result[0].name;
}

console.log(name); // 输出第一个结果的名称

可以看到，使用 optional chaining 运算符可以让代码更简洁、更易读、更健壮。

总结

optional chaining 运算符是 ES12 中新增的一个特性，可以让代码更健壮。它在访问对象或数组中的嵌套属性或方法时非常有用，尤其是在访问第三方 API 或后端数据时更是如此。使用 optional chaining 运算符可以让代码更简洁、更易读、更健壮。

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