随着 JavaScript 语言的不断发展，新的 ECMAScript 版本也不断推出，为前端开发带来了更多的便利和功能。ECMAScript 2020 （ES11）是 JavaScript 语言的最新版本，其中引入了一些新的操作符，本文将详细介绍其中的 Optional Chaining 和 Nullish Coalescing 操作符的异同点，并提供示例代码。
Optional Chaining 操作符
Optional Chaining 操作符（?.）是 ECMAScript 2020 中新增的一个操作符，它提供了一种简单的方式来处理属性或者方法不存在的情况，避免了代码中出现繁琐的判断语句。
在使用 Optional Chaining 操作符时，我们可以使用问号（?）来判断一个对象的属性或者方法是否存在，如果存在则返回对应的值，否则返回 undefined。下面是一个示例代码：
// javascriptcn.com 代码示例
const person = {
name: 'John',
address: {
city: 'New York',
zipcode: '10001'
}
};
console.log(person?.name); // 'John'
console.log(person?.age); // undefined
console.log(person?.address?.city); // 'New York'
console.log(person?.address?.state); // undefined在上面的代码中，我们使用 Optional Chaining 操作符来判断对象 person 的属性和方法是否存在，如果存在则返回对应的值，否则返回 undefined。需要注意的是，Optional Chaining 操作符只能用于访问对象的属性和方法，不能用于访问变量和函数。
Nullish Coalescing 操作符
Nullish Coalescing 操作符（??）也是 ECMAScript 2020 中新增的一个操作符，它提供了一种简单的方式来判断一个值是否为 null 或者 undefined，避免了代码中出现繁琐的判断语句。
在使用 Nullish Coalescing 操作符时，我们可以使用两个问号（??）来判断一个值是否为 null 或者 undefined，如果是则返回默认值，否则返回该值本身。下面是一个示例代码：
const name = null; const age = 18; console.log(name ?? 'Unknown'); // 'Unknown' console.log(age ?? 0); // 18 console.log(height ?? 170); // 170
在上面的代码中，我们使用 Nullish Coalescing 操作符来判断变量 name 是否为 null 或者 undefined，如果是则返回默认值 'Unknown'，否则返回该值本身。需要注意的是，Nullish Coalescing 操作符只能用于判断一个值是否为 null 或者 undefined，不能用于判断其他 falsy 值（如空字符串、0、false 等）。
异同点
虽然 Optional Chaining 操作符和 Nullish Coalescing 操作符都是 ECMAScript 2020 中新增的操作符，但它们在使用场景和功能上还是有一些区别的。
使用场景
Optional Chaining 操作符主要用于访问对象的属性和方法，避免了代码中出现繁琐的判断语句。例如，当我们需要访问一个对象的嵌套属性或者方法时，使用 Optional Chaining 操作符可以避免繁琐的判断语句。
Nullish Coalescing 操作符主要用于判断一个值是否为 null 或者 undefined，避免了代码中出现繁琐的判断语句。例如，当我们需要设置一个变量的默认值时，使用 Nullish Coalescing 操作符可以避免繁琐的判断语句。
功能
Optional Chaining 操作符的主要功能是在访问对象的属性和方法时，避免了代码中出现繁琐的判断语句。例如，当我们需要访问一个对象的嵌套属性或者方法时，使用 Optional Chaining 操作符可以避免繁琐的判断语句。
Nullish Coalescing 操作符的主要功能是判断一个值是否为 null 或者 undefined，避免了代码中出现繁琐的判断语句。例如，当我们需要设置一个变量的默认值时，使用 Nullish Coalescing 操作符可以避免繁琐的判断语句。
总结
Optional Chaining 操作符和 Nullish Coalescing 操作符是 ECMAScript 2020 中新增的两个操作符，它们在使用场景和功能上还是有一些区别的。在实际开发中，我们可以根据具体的场景选择使用哪种操作符，以提高代码的可读性和简洁性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65605d43d2f5e1655da8cb2b