随着前端技术的不断发展，JavaScript 作为前端开发的核心语言也在不断更新和完善。其中 ES11 中引入的 Optional Chaining 运算符，可以让我们更加方便地实现链式编程，提高代码的可读性和可维护性。
什么是 Optional Chaining 运算符？
Optional Chaining 运算符是 ES11 中引入的新特性，它可以让我们更加方便地访问对象中的嵌套属性，而无需进行繁琐的判断和处理。
在 JavaScript 中，如果我们要访问一个对象中的嵌套属性，通常需要进行多层判断，例如：
if (obj && obj.a && obj.a.b && obj.a.b.c) {
// ...
}这种写法非常繁琐，而且可读性也不高。而使用 Optional Chaining 运算符，我们可以将上述代码简化为：
if (obj?.a?.b?.c) {
// ...
}其中，?. 就是 Optional Chaining 运算符，它表示如果前面的属性存在，则继续访问后面的属性，否则直接返回 undefined。
Optional Chaining 运算符的用法
访问嵌套属性
我们可以使用 Optional Chaining 运算符来访问对象中的嵌套属性，例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: 'hello'
}
}
};
console.log(obj?.a?.b?.c); // 输出 'hello'
console.log(obj?.a?.b?.d); // 输出 undefined调用函数
我们也可以使用 Optional Chaining 运算符来调用对象中的嵌套函数，例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: () => 'hello'
}
}
};
console.log(obj?.a?.b?.c?.()); // 输出 'hello'
console.log(obj?.a?.b?.d?.()); // 输出 undefined数组访问
对于数组，我们也可以使用 Optional Chaining 运算符来访问数组中的元素，例如：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出 1 console.log(arr?.[3]); // 输出 undefined
Optional Chaining 运算符的注意事项
在使用 Optional Chaining 运算符时，需要注意以下几点：
- Optional Chaining 运算符只能用于访问对象或数组中的属性或元素，不能用于访问普通变量或函数。
- 如果访问的属性或元素不存在，则返回
undefined，而不是抛出错误。 - Optional Chaining 运算符只能在支持 ES11 的浏览器或环境中使用，如果需要在旧版浏览器中使用，需要使用 Babel 等工具进行转换。
Optional Chaining 运算符的示例代码
下面是一个使用 Optional Chaining 运算符的示例代码：
// javascriptcn.com 代码示例
const data = {
user: {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区'
}
}
};
const userName = data?.user?.name;
const userCity = data?.user?.address?.city;
const userGender = data?.user?.gender;
console.log(userName); // 输出 '张三'
console.log(userCity); // 输出 '北京'
console.log(userGender); // 输出 undefined通过上述代码，我们可以看到使用 Optional Chaining 运算符可以大大简化代码，提高代码的可读性和可维护性。
总结
Optional Chaining 运算符是 ES11 中引入的新特性，它可以让我们更加方便地访问对象中的嵌套属性，而无需进行繁琐的判断和处理。在实际开发中，我们可以结合 Optional Chaining 运算符和其他语言特性，实现更加简洁、优雅的代码，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556dc65d2f5e1655d13c19d