ES9 中新增的功能可选链运算符实现对象属性查询-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是现代 Web 开发中必不可少的一种主流语言，虽然 JavaScript 很强大，但是在处理对象属性时总会有一些不可预知的错误，例如当我们尝试访问一个可能为空或未定义的属性时。ES9 的可选链运算符正是为了解决这个问题而生的。

可选链运算符的作用

在 JavaScript 中，当尝试访问一个可能为空或未定义的属性时，通常会使用短路运算符来避免错误。例如，我们可以通过检查对象属性是否存在来验证对象是否为空。

if (obj && obj.prop) {
  // ... do something with obj.prop
}

这种写法是可以避免空对象异常的，但是却缺乏简洁性。ES9 中的可选链运算符解决了这个问题，让我们可以直接通过一个符号来进行安全的属性访问：

if (obj?.prop) {
  // ... do something with obj.prop (if it exists)
}

使用可选链运算符

ES9 的可选链运算符是一个问号（?）后跟一个点（.），即 ?.。在使用可选链运算符时，我们可以避免模板字面量中使用 && 或 || 的复杂写法，而通过一种更简单、安全、可读性更强的方式。

const foo = { bar: { baz: 'Hello World' } };
const bar = { baz: 'Hello World' };
console.log(foo?.bar?.baz); // 'Hello World'
console.log(bar?.bar?.baz); // undefined

在上面的示例中，我们通过可选链运算符直接访问了对象属性中的值，并且不会触发异常。当使用可选链时，如果对象属性存在，则将返回其实际值，如果对象属性不存在，则返回 undefined。

可选链运算符与其他运算符的结合使用

可选链运算符可以与其他运算符进行灵活组合，从而形成更多的组合写法。例如，我们在结合 () 时可以避免一些难以预知的错误：

const foo = { bar: { baz() { return 'Hello World' } } };
console.log(foo?.bar?.baz?.()); // 'Hello World'

在上面的示例中，我们直接调用了一个对象的方法，并没有进行多余的判断和处理。如果结果存在，则将结果作为一个函数来调用，否则返回 undefined。

另一种组合写法是与 [] 运算符相结合，例如：

const foo = { bar: ['Hello', 'World'] };
console.log(foo?.bar?.[0]); // 'Hello'
console.log(foo?.bar?.[1]); // 'World'
console.log(foo?.bar?.[2]); // undefined

在上面的示例中，我们可以直接使用可选链运算符来访问数组的索引值，而无需再使用 && 或 || 进行逐个项的检查。

总结

在 JavaScript 中，使用可选链运算符可以避免一些不可预知的错误，并且可以减少代码量和提高代码可读性。在实际项目或开发中，我们应该积极使用可选链运算符，以达到更好的效果。

if (obj?.prop) {
  // ... do something with obj.prop (if it exists)
}

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