在 ES9 中如何使用可选链 (optional chaining) 运算符
随着前端技术的不断发展，JavaScript 语言的更新也越来越频繁。在 ES9 中，新增了可选链 (optional chaining) 运算符，它可以在访问对象的属性时，避免因为对象不存在而导致的错误。在本文中，我们将详细介绍可选链运算符的使用方法，并为大家提供一些实用的示例代码。
一、可选链运算符的介绍
在 JavaScript 中，当我们访问一个对象的属性时，如果该对象不存在，那么就会抛出一个错误。例如：
let obj = {};
console.log(obj.name); // TypeError: Cannot read property 'name' of undefined为了避免这种错误，我们通常需要进行对象的判断和处理。在 ES9 中，新增了可选链运算符，可以简化这个过程。可选链运算符使用问号（?）来表示，它的作用是在访问对象属性时，如果对象不存在，则返回 undefined，而不会抛出错误。
例如，我们可以使用可选链运算符来访问一个可能不存在的对象属性：
let obj = {};
console.log(obj?.name); // undefined如果对象存在，那么可选链运算符就会正常访问属性：
let obj = {name: 'Tom'};
console.log(obj?.name); // Tom二、可选链运算符的使用方法
在使用可选链运算符时，需要注意以下几点：
- 可选链运算符只能用于访问对象属性和方法，不能用于访问数组元素。
- 可选链运算符可以与其他运算符一起使用，例如：逻辑运算符、函数调用运算符、赋值运算符等。
- 可选链运算符可以进行链式调用，例如：访问对象的嵌套属性。
下面我们通过一些示例来演示可选链运算符的使用方法。
- 访问对象属性
使用可选链运算符访问对象属性时，如果对象不存在，则返回 undefined。
let obj = {};
console.log(obj?.name); // undefined- 访问对象方法
使用可选链运算符调用对象方法时，如果对象不存在，则返回 undefined。
let obj = {};
console.log(obj?.sayHello?.()); // undefined- 与逻辑运算符一起使用
可选链运算符可以与逻辑运算符一起使用，例如：&& 和 ||。
let obj = null; console.log(obj?.name && obj.name.length); // null
- 与函数调用运算符一起使用
可选链运算符可以与函数调用运算符一起使用，例如：()。
let obj = null; console.log(obj?.getName?.() || 'Tom'); // Tom
- 与赋值运算符一起使用
可选链运算符可以与赋值运算符一起使用，例如：=。
let obj = null; obj?.name = 'Tom'; console.log(obj?.name); // undefined
- 链式调用
可选链运算符可以进行链式调用，例如：访问对象的嵌套属性。
let obj = {user: {name: 'Tom'}};
console.log(obj?.user?.name); // Tom三、总结
在 ES9 中，可选链运算符可以帮助我们避免因为对象不存在而导致的错误，简化代码的处理流程。在实际开发中，我们可以根据具体的场景，灵活运用可选链运算符，提高代码的可读性和健壮性。
示例代码：
// javascriptcn.com 代码示例
let obj = {user: {name: 'Tom'}};
// 访问对象属性
console.log(obj?.user?.name); // Tom
console.log(obj?.age); // undefined
// 访问对象方法
console.log(obj?.user?.sayHello?.()); // undefined
// 与逻辑运算符一起使用
console.log(obj?.name && obj.name.length); // undefined
// 与函数调用运算符一起使用
console.log(obj?.user?.getName?.() || 'Tom'); // Tom
// 与赋值运算符一起使用
obj?.user?.name = 'Jerry';
console.log(obj?.user?.name); // Jerry来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c6a887d4982a6eb68db52