ECMAScript 2020 是 JavaScript 语言的最新版本，引入了许多新特性和语法，其中包括可选链与 Nullish coalescing 运算符。这两个运算符可以有效地提高前端开发的编码效率和程序健壮性。
可选链运算符
可选链运算符是一种简化 JavaScript 代码中访问对象属性的语法，它可以判断访问的对象属性是否存在，避免在不存在属性时产生 TypeError 错误。
常规访问对象属性
在 JavaScript 中，访问对象属性通常使用点（.）运算符或者中括号（[]）运算符。例如：
const person = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(person.address.city); // 'New York'
// 或者
console.log(person['address']['city']); // 'New York'但是，如果对象属性不存在，就会抛出 TypeError 错误：
console.log(person.age); // undefined console.log(person.age.city); // TypeError
使用可选链运算符
可选链运算符（?.）提供了更加安全和优雅的访问对象属性的方法。它可以检查对象属性是否存在，如果存在就返回属性值，如果不存在就返回 undefined。
console.log(person.age?.city); // undefined
在访问多级属性时，可选链运算符可以连续使用。例如：
console.log(person?.address?.city); // 'New York'
当对象存在但属性不存在时，可选链运算符也可以避免 TypeError 错误的发生。例如：
const person = {
name: 'John',
address: null
};
console.log(person?.address?.city); // undefined使用可选链运算符的注意事项
可选链运算符并不是 JavaScript 的所有版本都支持的，只有 ECMAScript 2020 才引入了这个新特性。在使用可选链运算符时，需要注意以下几个问题：
- 在使用可选链运算符时，必须使用最新的 JavaScript 引擎，否则代码无法运行。
- 可选链运算符只会在访问的对象属性为 null 或 undefined 时才会返回 undefined，如果访问的对象属性为 false、0、''、NaN 或者空数组，仍然会返回这些值本身。
- 在使用可选链运算符时，要注意它只是给访问对象属性的语法提供了一个新的方式，而没有改变对象本身的结构。
Nullish coalescing 运算符
Nullish coalescing 运算符是一种简化 JavaScript 代码中判断空值的语法，它可以判断一个变量是否为 null 或 undefined，如果是，就返回指定的默认值。
常规判断 null 或 undefined
在 JavaScript 中，通常使用 if 语句或者三元运算符来判断一个变量是否为 null 或 undefined。例如：
let x = null;
if (x === null || x === undefined) {
x = 'default';
}
// 或者
x = x || 'default';
console.log(x); // 'default'但是，这种方法会存在一些问题。如果变量的值为 false、0、''、NaN 或者空数组，就会返回默认值，这并不是我们期望的结果。
使用 Nullish coalescing 运算符
Nullish coalescing 运算符（??）提供了更加准确的判断空值的方法。它只会在变量的值为 null 或 undefined 时返回默认值，如果变量的值为 false、0、''、NaN 或者空数组，就返回变量本身。
let x = null; x = x ?? 'default'; console.log(x); // 'default'
使用 Nullish coalescing 运算符的注意事项
Nullish coalescing 运算符也只是 ECMAScript 2020 中引入的新特性，在使用时也需要注意以下几个问题：
- 在使用 Nullish coalescing 运算符时，必须使用最新的 JavaScript 引擎，否则代码无法运行。
- Nullish coalescing 运算符只会在值为 null 或 undefined 时返回默认值，如果变量的赋值本身就是一个函数调用或表达式计算，无论返回的是什么，也都不会判断为 null 或 undefined。
- 在使用 Nullish coalescing 运算符时，要注意它只是简化了判断空值的语法，而没有改变变量自身的值。
可选链运算符和 Nullish coalescing 运算符的组合使用
可选链运算符和 Nullish coalescing 运算符可以同时使用，提供更加健壮的 JavaScript 编程体验。
const person = {
name: 'John',
address: null
};
console.log(person?.address?.city ?? 'unknown'); // 'unknown'这段代码先使用可选链运算符访问 person 中的 address 属性的 city 属性，如果 city 不存在，就返回 undefined。然后使用 Nullish coalescing 运算符判断 city 变量是否为空值，如果是，就返回 'unknown'，否则返回 city 变量本身。
总结
可选链运算符和 Nullish coalescing 运算符是 ECMAScript 2020 中引入的两个新特性，它们可以在 JavaScript 中提供更加安全和优雅的访问对象属性的方法以及更加准确的判断空值的方法。程序员可以根据具体需求，选择使用这两个运算符中的一个或者组合使用，提高前端开发的编码效率和程序健壮性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ae19b9add4f0e0ff7a6db6