巧用JavaScript三大操作符，让你的代码更优雅！

JavaScript中有三种不同的操作符，分别是?? , ?. 和||。这些操作符都用于在处理数据时进行不同的判断和计算，因此本文将分别介绍它们的用途、作用和区别。

??是空值合并运算符运算符，它用于判断某个值是否为 null 或 undefined。如果值为 null 或 undefined，则返回另一个给定的值，否则返回该值本身。

以下是一个例子：

let x = null;    
let y = 3;    
let z = x ?? y;    
console.log(z); // 输出 3，因为 x 为 null，所以返回 y 的值

在这个例子中，我们使用了 Nullish Coalescing 运算符来确定 x 的值是否为 null 或 undefined，因为它是 null，所以返回 y 的值。

需要注意的是，当 x 的值为 0 或空字符串时，Nullish Coalescing 运算符仍会将其视为一个有效值，而不会返回另一个值。这与 "||" 运算符的行为不同。

?.是可选链运算符，它用于安全地访问对象的属性，而不必担心该属性是否存在。如果该属性存在，则返回该属性的值，否则返回 undefined。

以下是一个例子：

let person = {    
name: "John",    
age: 30    
};    
let address = person?.address?.city;    
console.log(address); // undefined

在这个例子中，我们尝试访问一个名为 address 的属性，但是 person 对象中并没有这个属性。使用可选链操作符，我们可以安全地尝试访问这个属性，而不会导致错误，并且返回值为undefined。

需要注意的是，"?." 运算符仅在属性名是一个标识符或数字字面量时有效。如果属性名是一个表达式，则无法使用 "?." 运算符。

||是逻辑或运算符，它用于将两个表达式进行比较，如果第一个表达式是假值（false、null、undefined、0、空字符串等），则返回第二个表达式的值，否则返回第一个表达式的值。

以下是一个例子：

let x = 0;    
let y = 3;    
let z = x || y;    
console.log(z); // 输出 3，因为 x 为假值，所以返回 y 的值

在这个例子中，我们使用了逻辑或运算符来确定 x 的值是否为假值，因为它是 0，所以返回 y 的值。

需要注意的是，当 x 的值为 null 或 undefined 时，逻辑或运算符仍会将其视为假值，而不会返回另一个值。这与 Nullish Coalescing 运算符的行为不同。

下表列出了 JavaScript 中 "??", "?." 和 "||" 三种操作符的区别：

操作符	名称	用途	处理空值
??	Nullish Coalescing 运算符	用于判断某个值是否为 null 或 undefined。如果值为 null 或 undefined，则返回另一个给定的值，否则返回该值本身。	仅在值为 null 或 undefined 时返回另一个值，否则返回该值本身
?.	可选链操作符	用于安全地访问对象的属性，而不必担心该属性是否存在。如果该属性存在，则返回该属性的值，否则返回 undefined。	如果属性不存在，返回 undefined
\|\|	逻辑或运算符	用于将两个表达式进行比较，如果第一个表达式是假值（false、null、undefined、0、空字符串等），则返回第二个表达式的值，否则返回第一个表达式的值。	在值为 null 或 undefined 时返回第二个表达式的值，在其他假值情况下返回第二个表达式的值

需要注意的是，Nullish Coalescing 运算符 "??" 仅在值为 null 或 undefined 时返回另一个值，而逻辑或运算符 "||" 在值为 null 或 undefined 时也会返回第二个表达式的值。可选链操作符 "?." 只有在属性不存在时返回 undefined，而不管属性值是什么类型。