ECMAScript 2020 中的 optional chaining 理解与实例

在前端开发中，我们经常会遇到需要获取嵌套对象属性的情况。这种情况下，我们通常会使用判断语句来确保对象和属性的存在性，例如：

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

然而，这种方式不仅代码冗长，还容易出错。在 ECMAScript 2020 中，新添加了 Optional Chaining 运算符 ?.，可以用来解决这个问题。

Optional Chaining 运算符

Optional Chaining 运算符 ?. 的作用是在对象链式调用时判断前面的成员是否存在，如果不存在，则立即返回 undefined。它的使用方式如下：

obj?.prop1?.prop2

如果 obj 不存在，返回 undefined。如果 prop1 不存在，也返回 undefined。只有 prop2 存在时，才返回 prop2 的值。

示例

下面是一个获取嵌套对象属性的示例，我们可以看到 Optional Chaining 的使用之后代码更简洁了：

// 使用 Optional Chaining
const value = obj?.prop1?.prop2;

// 与传统方式比较
if (obj && obj.prop1 && obj.prop1.prop2) {
  const value = obj.prop1.prop2;
}

同样的，我们也可以在函数调用中使用 Optional Chaining，例如：

const result = obj?.func?.(param);

如果 obj 或 func 不存在，会直接返回 undefined。如果存在，则调用函数并返回结果。

注意事项

需要注意的是，在使用 Optional Chaining 的过程中，如果前面的成员返回了 null 或者 undefined，则会停止运算并返回 undefined，而不会继续运算后面的成员。例如：

const value = obj?.prop1?.prop2?.prop3;

如果 prop1 不存在，则返回 undefined，不会继续运算后面的 prop2 和 prop3。

此外，Optional Chaining 运算符不能用于赋值和逗号运算。如果需要进行赋值操作，可以使用 nullish coalescing 运算符 ?? 结合 Optional Chaining 使用，例如：

const value = obj?.prop1 ?? 'default';

总结

Optional Chaining 运算符是 ECMAScript 2020 中新增的语法，可以用来简化获取嵌套对象属性的代码。它的使用方式简单明了，需要注意运算中止和赋值等注意事项。在实际开发中，我们可以结合 Optional Chaining 运算符和 nullish coalescing 运算符使用，来编写更加简洁、优雅的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66458261d3423812e437d3cc