在前端开发中，我们经常需要访问一个对象的属性或方法，但有时候我们无法确定这个对象是否存在或某个属性是否被定义。这时候就需要使用 optional chaining 运算符，它可以让我们避免出现 undefined 或者 null 的错误。
ES10 中引入了 optional chaining 运算符，它的语法是 ?.。这个运算符可以让我们在访问一个对象的属性或者调用一个方法时，如果对象不存在或者属性或方法不存在，不会报错而是直接返回 undefined。
浅谈 optional chaining 的语法
optional chaining 运算符是一个点加上问号，即 ?.。它的作用是判断前面的表达式是否为 null 或者 undefined，如果是的话，直接返回 undefined。
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
address: {
city: 'Shanghai'
}
};
console.log(person.address?.city); // 'Shanghai'
console.log(person.address?.country); // undefined
console.log(person.friends?.[0]?.name); // undefined在上面的示例中，person 对象有一个 address 属性，它本身是一个对象。通过 optional chaining 运算符，我们可以在 person.address?.city 中使用 ?. 来判断 address 是否存在，如果存在则返回 address 对象的 city 属性，否则返回 undefined。
当我们访问一个数组的某个元素时，有时候这个数组可能还不存在，或者某个元素不存在。这时候可以使用 optional chaining 运算符来避免报错。
const people = [
{ name: 'Alice' },
{ name: 'Bob', married: true }
];
console.log(people[1]?.married); // true
console.log(people[2]?.married); // undefined
console.log(people[0]?.friends?.[0]?.name); // undefined我们可以在数组下标后面使用 ?. 来判断这个数组或者下标是否存在。如果是一个嵌套的数组或者对象，我们也可以使用 ?. 来避免报错。
如何使用 optional chaining 运算符
在实际的开发中，我们经常需要访问一个对象的某个属性或者调用某个方法。但是有时候这个属性或者方法不存在，或者对象本身不存在。这时候可以使用 optional chaining 运算符来避免报错。
const person = {
name: 'Alice',
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
person?.sayHello?.(); // 'Hello, my name is Alice'在上面的示例中，我们调用了 person 对象的 sayHello 方法。但是为了避免 person 对象不存在或者 sayHello 方法不存在的情况下出现错误，我们使用了 optional chaining 运算符来判断它们是否存在。
渐进增强与提高代码可读性
使用 optional chaining 运算符可以让我们的代码更加健壮，更能够应对不确定的情况。它可以帮助我们避免一些不必要的错误，并提高代码的可读性。
但是，应该注意到 optional chaining 运算符只是一种渐进增强的做法，它并不能完全替代传统的代码编写方式。在实际的开发中，我们应该根据具体情况来决定是否使用 optional chaining 运算符。
代码示例
使用 optional chaining 运算符的代码：
// javascriptcn.com 代码示例
const person = {
name: 'Alice',
address: {
city: 'Shanghai'
}
};
console.log(person.address?.city); // 'Shanghai'
console.log(person.address?.country); // undefined
console.log(person.friends?.[0]?.name); // undefined
const people = [
{ name: 'Alice' },
{ name: 'Bob', married: true }
];
console.log(people[1]?.married); // true
console.log(people[2]?.married); // undefined
console.log(people[0]?.friends?.[0]?.name); // undefined
const person2 = {
name: 'Alice',
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
person2?.sayHello?.(); // 'Hello, my name is Alice'总结
optional chaining 运算符是 ES10 新增的一个语法特性，可以避免访问不存在的属性或方法时代码出现错误。使用 optional chaining 运算符可以让我们的代码更加健壮，但是我们也应该根据具体情况来决定是否使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653358937d4982a6eb6ddb99