JavaScript可选链式调用，让代码更优雅
2023-11-05 09:00:53
JavaScript可选链式调用：更简洁、更安全的代码
JavaScript 的世界正在飞速发展，新特性不断涌现，对我们的代码产生着深远的影响。从 ES2015 开始，解构、箭头函数、类和模块系统等新特性已经重塑了我们的编程方式。
2019 年 8 月，一个名为“可选链式调用”的新提案进入 JavaScript 语法的第三阶段，并即将成为正式标准。这一特性为我们提供了一种更简洁、更安全的方式来访问和操作对象。
什么是可选链式调用？
可选链式调用，也被称为安全导航操作符，允许我们安全地访问对象属性或调用对象方法，而不会抛出错误。它的语法与点运算符（.）相似，但是当属性或方法不存在时，它会返回 undefined，而不是抛出错误。
基本用法
可选链式调用的基本用法非常简单。只需在属性或方法名之前加上一个问号（?）即可。例如，以下代码使用可选链式调用安全地访问 person 对象的 name 属性：
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const name = person?.name;
如果 person 对象存在并且有 name 属性，name 变量的值将是 "John"。如果 person 对象不存在或没有 name 属性，name 变量的值将是 undefined。
更复杂的使用场景
我们可以将可选链式调用用于更复杂的情况，例如安全地访问嵌套对象的属性。以下代码使用可选链式调用安全地访问 person 对象的 address 对象的 street 属性：
const person = {
name: 'John',
address: {
street: '123 Main Street',
city: 'New York',
state: 'CA'
}
};
const street = person?.address?.street;
如果 person 对象和 address 对象都存在并且有 street 属性，street 变量的值将是 "123 Main Street"。如果 person 对象不存在、address 对象存在但没有 street 属性，或者 address 对象不存在，street 变量的值将是 undefined。
调用方法
我们还可以使用可选链式调用安全地调用对象方法。以下代码使用可选链式调用安全地调用 person 对象的 sayHello 方法：
const person = {
name: 'John',
sayHello() {
console.log('Hello, my name is ' + this.name);
}
};
person?.sayHello();
如果 person 对象存在并且有 sayHello 方法，sayHello 方法将被调用并输出 "Hello, my name is John"。如果 person 对象不存在或没有 sayHello 方法，sayHello 方法不会被调用，也不会输出任何内容。
好处
可选链式调用提供了许多好处：
- 简洁性： 它简化了我们访问和操作对象的方式，使我们的代码更简洁、更易于理解。
- 安全性： 它消除了在访问不存在的属性或调用不存在的方法时抛出错误的风险，从而提高了代码的健壮性。
- 可读性： 它提高了代码的可读性和可维护性，使其他开发者更容易理解我们的意图。
何时使用
可选链式调用在以下场景中非常有用：
- 当我们不确定一个属性或方法是否存在时。
- 当我们想避免在不存在的属性或方法上抛出错误时。
- 当我们希望我们的代码更简洁、更易于维护时。
常见问题解答
1. 可选链式调用是否与 nullish 合并运算符 (??) 相同？
不，可选链式调用和 nullish 合并运算符是不同的特性。可选链式调用只会在对象或属性不存在时返回 undefined，而 nullish 合并运算符会在对象或属性为 null 或 undefined 时返回备用值。
2. 可选链式调用是否与三元运算符 (condition ? value1 : value2) 相同？
也不同。可选链式调用更简洁、更安全，因为它不会抛出错误。而三元运算符要求我们在不存在时提供一个明确的备用值。
3. 可选链式调用是否兼容所有浏览器？
不，可选链式调用目前还没有在所有浏览器中得到支持。它在 Chrome、Firefox 和 Edge 中可用，但尚未在 Safari 中得到支持。
4. 可选链式调用是否会影响性能？
对可选链式调用的性能影响很小。它比三元运算符稍慢，但比 if 语句块快得多。
5. 可选链式调用是否是一种最佳实践？
是的，可选链式调用是一种最佳实践，因为它可以提高代码的简洁性、安全性、可读性和可维护性。
