ES12 之后的变化：可选链操作符（?.）简化你的 JavaScript 代码-JavaScript中文网-JavaScript教程资源分享门户

ES12 之后的变化：可选链操作符（?.）简化你的 JavaScript 代码

在 JavaScript 开发中，常常会遇到对象属性的值为 null 或 undefined 的情况，如果我们想要访问这些属性，就需要对其进行判断，处理异常情况，增加代码的复杂度。但是现在，ES12 标准中引入了可选链操作符（?.）可以帮助我们简化代码，避免冗余的判断语句。

可选链操作符（?.）指的是在访问对象属性时，如果属性不存在或其值为 null 或 undefined，不会导致程序出现错误并停止执行，而是直接返回 undefined。其语法为 object?.property。

下面我们举例说明：

//传统判断方式
if (obj && obj.user && obj.user.name) {
  console.log(obj.user.name)
}

//可选链操作符
console.log(obj?.user?.name)

相信大家都能看出来，可选链操作符可以优雅地简化代码，减少代码的冗余和复杂度。

可选链操作符可以与其他语言特性结合使用，比如 nullish 合并操作符（??）和解构赋值，代码会更加简洁和易于维护，如下所示：

const newUser = { ...obj?.user }

const { name, age } = obj?.user ?? {}

可选链操作符的应用不仅仅在对象访问时有用，还可以应用于函数调用，简化代码，如下所示：

//传统方式
if (func && typeof func === 'function') {
  func()
}

//可选链操作符
func?.()

总结

在开发中，由于 JavaScript 语言天生的动态性和灵活性，可能会存在无数种使用对象的情况。因此，可选链操作符是一种非常实用的 JS 扩展，它可以简化代码，避免繁琐的判断和代码冗余，提高开发效率和代码可读性。如果你正在使用ES12 或者更高版本的标准，那么可选链操作符一定是你不可错过的新特性。

参考文献

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

ES12 之后的变化：可选链操作符（?.）简化你的 JavaScript 代码