在 ES9 中使用 optional chaining 降低代码中的空值判断
在编写前端代码时，我们经常需要对变量或对象属性进行判断，以确保它们不为空或未定义。这种空值判断虽然必要，但也会使代码变得冗长且难以维护。在 ES9 中，我们可以使用 optional chaining 语法来简化这种判断，让代码更加简洁和易读。
optional chaining 是一种新的语法，它允许我们在访问一个对象属性或方法之前，先判断该对象是否为 null 或 undefined。如果该对象不存在，则 optional chaining 会直接返回 undefined，而不会抛出错误。这样，我们就可以避免在代码中写冗长的空值判断，从而提高代码的可读性和可维护性。
下面是一个使用 optional chaining 的示例代码：
const user = {
name: 'Alice',
address: {
city: 'Shanghai',
street: 'Nanjing Road',
zipcode: '200000'
}
};
const zipcode = user.address?.zipcode;
console.log(zipcode); // "200000"
const phone = user.phone?.number;
console.log(phone); // undefined在这个示例中，我们定义了一个 user 对象，它包含一个 name 属性和一个 address 对象，address 对象又包含 city、street 和 zipcode 属性。我们通过 optional chaining 语法来获取 user 对象中的 address 和 phone 属性。如果这些属性不存在，optional chaining 将直接返回 undefined，而不会抛出异常。
除了访问对象属性外，optional chaining 还可以用于调用对象方法。下面是一个使用 optional chaining 调用方法的示例代码：
const obj = {
foo() {
console.log('foo');
}
};
obj.foo?.(); // "foo"
obj.bar?.(); // undefined在这个示例中，我们定义了一个 obj 对象，它包含一个 foo 方法。我们使用 optional chaining 语法来调用 foo 方法。如果 foo 方法不存在，optional chaining 将直接返回 undefined，而不会抛出异常。
在实际的开发中，我们可以将 optional chaining 与 nullish coalescing 运算符（??）结合使用，以提供更好的默认值处理。下面是一个使用 optional chaining 和 nullish coalescing 运算符的示例代码：
const user = {
name: 'Alice',
address: null
};
const city = user.address?.city ?? 'unknown';
console.log(city); // "unknown"在这个示例中，我们定义了一个 user 对象，它包含一个 name 属性和一个 null 的 address 属性。我们使用 optional chaining 语法来获取 user 对象中的 address 对象中的 city 属性。由于 address 属性为 null，optional chaining 将直接返回 undefined，然后我们使用 nullish coalescing 运算符来提供一个默认值。最终，city 变量的值为 "unknown"。
总结
使用 optional chaining 语法可以帮助我们简化代码中的空值判断，提高代码的可读性和可维护性。在实际的开发中，我们可以将 optional chaining 与 nullish coalescing 运算符结合使用，以提供更好的默认值处理。在使用 optional chaining 时，需要注意它只能用于访问对象属性和调用对象方法，不能用于访问数组元素或函数参数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c227c1add4f0e0ffc19162