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，而不管属性值是什么类型。