在 ES2019 中使用 Optional Chaining

在 ES2019 中使用 Optional Chaining

在前端开发中，经常会遇到深层次的对象属性或方法调用，而这些属性或方法有可能存在且有可能不存在。在过去，开发者需要通过一些繁琐的判断来避免这种情况。而在 ES2019 中，Optional Chaining 的出现为我们解决了这个问题。

Optional Chaining 是一种新的语法，它允许我们在调用对象属性或方法时，不需要显式地判断它是否存在。如果该属性或方法存在，则会返回它的值；如果不存在，则返回 undefined。

下面是一个示例代码：

// javascriptcn.com 代码示例
const obj = {
  a: {
    b: {
      c: 'hello'
    }
  }
};

console.log(obj?.a?.b?.c); // 输出 'hello'
console.log(obj?.a?.x?.c); // 输出 undefined

在上面的代码中，我们使用了 ?. 来代替了传统的 .，这样就可以避免在调用不存在的属性或方法时出现错误。

Optional Chaining 还可以与其他操作符结合使用，例如：

const arr = [1, 2, 3];

console.log(arr?.[0]); // 输出 1
console.log(arr?.[3]); // 输出 undefined

在上面的代码中，我们使用了 ?.[] 来代替了传统的 []，这样就可以避免在访问不存在的数组元素时出现错误。

除了使用 ?. 来调用属性或方法之外，Optional Chaining 还可以使用在函数调用中。例如：

const obj = {
  sayHello() {
    console.log('hello');
  }
};

obj?.sayHello?.(); // 输出 'hello'

在上面的代码中，我们使用了 ?.() 来代替了传统的 ()，这样就可以避免在调用不存在的方法时出现错误。

总结

Optional Chaining 是一种非常实用的语法，它能够帮助我们简化代码并避免出现一些繁琐的判断。它的出现不仅仅是为了方便我们的开发，更是为了提高我们代码的可读性和可维护性。

虽然 Optional Chaining 在 ES2019 中才出现，但它已经被广泛地应用到了前端开发中。因此，学习 Optional Chaining 对我们来说是非常重要的。

在使用 Optional Chaining 时，我们需要注意它的兼容性问题。目前，它的兼容性并不是很好，需要使用 babel 等工具进行转换才能在一些老的浏览器中使用。

参考代码

// javascriptcn.com 代码示例
const obj = {
  a: {
    b: {
      c: 'hello'
    }
  }
};

console.log(obj?.a?.b?.c); // 输出 'hello'
console.log(obj?.a?.x?.c); // 输出 undefined

const arr = [1, 2, 3];

console.log(arr?.[0]); // 输出 1
console.log(arr?.[3]); // 输出 undefined

const obj = {
  sayHello() {
    console.log('hello');
  }
};

obj?.sayHello?.(); // 输出 'hello'

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