解析 ECMAScript 2019 中的可选链操作符-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2019 中引入了可选链操作符（Optional Chaining Operator），它可以简化 JavaScript 中处理嵌套对象的代码。本文将介绍可选链操作符的语法和用法，并提供示例代码。

可选链操作符的语法

可选链操作符的语法是 ?.，它可以放在一个对象属性或数组元素的后面，表示如果该属性或元素存在，则取出它的值，否则返回 undefined。

例如，假设有以下对象：

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

要取出 baz 属性的值，可以使用以下代码：

const baz = obj.foo.bar.baz;

但是，如果 foo 或 bar 属性不存在，那么上面的代码会抛出错误。为了避免这种情况，可以使用可选链操作符：

const baz = obj?.foo?.bar?.baz;

这样，如果 foo 或 bar 属性不存在，baz 变量会被赋值为 undefined，而不会抛出错误。

可选链操作符的用法

可选链操作符可以用在对象属性和数组元素上。以下是一些常见的用法：

1. 检查对象属性是否存在

可以使用可选链操作符来检查对象属性是否存在，而不需要使用 if 语句或 try-catch 语句。例如，假设有以下对象：

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

要检查 baz 属性是否存在，可以使用以下代码：

if (obj?.foo?.bar?.baz) {
  console.log('baz exists');
} else {
  console.log('baz does not exist');
}

这样，如果 baz 属性存在且值不为 falsy，则输出 baz exists，否则输出 baz does not exist。

2. 访问嵌套对象属性

可以使用可选链操作符来访问嵌套对象属性，而不需要使用多个 if 语句或 try-catch 语句。例如，假设有以下对象：

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

要取出 baz 属性的值，可以使用以下代码：

const baz = obj?.foo?.bar?.baz;

这样，如果 foo 或 bar 属性不存在，baz 变量会被赋值为 undefined，而不会抛出错误。

3. 访问数组元素

可以使用可选链操作符来访问数组元素，而不需要使用 if 语句或 try-catch 语句。例如，假设有以下数组：

// javascriptcn.com 代码示例
const arr = [
  {
    foo: {
      bar: 'hello'
    }
  },
  {
    foo: {
      bar: 'world'
    }
  }
];

要取出第二个元素的 bar 属性的值，可以使用以下代码：

const bar = arr?.[1]?.foo?.bar;

这样，如果第二个元素不存在或者 foo 属性不存在，bar 变量会被赋值为 undefined，而不会抛出错误。

可选链操作符的示例代码

以下是一些使用可选链操作符的示例代码：

1. 检查对象属性是否存在

// javascriptcn.com 代码示例
const obj = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
};

if (obj?.foo?.bar?.baz) {
  console.log('baz exists');
} else {
  console.log('baz does not exist');
}

输出：baz exists

2. 访问嵌套对象属性

// javascriptcn.com 代码示例
const obj = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
};

const baz = obj?.foo?.bar?.baz;

console.log(baz); // 输出：hello

3. 访问数组元素

// javascriptcn.com 代码示例
const arr = [
  {
    foo: {
      bar: 'hello'
    }
  },
  {
    foo: {
      bar: 'world'
    }
  }
];

const bar = arr?.[1]?.foo?.bar;

console.log(bar); // 输出：world

总结

可选链操作符是 ECMAScript 2019 中引入的新特性，它可以简化 JavaScript 中处理嵌套对象的代码。可选链操作符的语法是 ?.，它可以用在对象属性和数组元素上。使用可选链操作符可以避免使用多个 if 语句或 try-catch 语句，使代码更加简洁和易读。

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