JavaScript 中关于 ?? 和 || 的区别和相似性

r囧r小猫 2023-10-16 14:52 19阅读 0赞

## JavaScript 中关于 ?? 和 || 的区别和相似性 ##

#### 文章目录 ####

*  JavaScript 中关于 ?? 和 || 的区别和相似性
 *   *  前言
     *  相似性
     *  区别
     *   *  优先级
         *  处理假值
         *  返回值
     *  示例

### 前言 ###

当处理默认值时，`??`（空值合并运算符）和`||`（逻辑或运算符）是 JavaScript 中的两个重要工具。尽管它们的目标相似，但它们在实现和使用上存在一些关键区别。本文将详细探讨它们的区别和相似之处。

### 相似性 ###

1.  **用途**:
    
     *  `??` 和 `||` 都用于在值可能是假值或缺失时提供默认值。
2.  **返回值**:
    
     *  两者都返回一个值，而不是布尔值。这使它们不同于通常的逻辑或布尔运算。

### 区别 ###

#### 优先级 ####

*  `??` 的优先级比 `||` 高。这意味着在表达式中同时使用它们时，`??` 将首先计算。这可能会导致不同的行为，特别是当你想要设置默认值时。

#### 处理假值 ####

*  `??` 只处理严格等于 `null` 或 `undefined` 的情况。它不会处理其他假值，如 `0`、`false`、空字符串 `''` 等。只有在左侧操作数是 `null` 或 `undefined` 时，`??` 才会返回右侧操作数。
 *  `||` 处理更广泛的假值情况，包括 `null`、`undefined`、`false`、`0`、`NaN`、空字符串 `''` 等。如果左侧操作数是假值，`||` 会返回右侧操作数。

#### 返回值 ####

*  `??` 在左侧操作数是 `null` 或 `undefined` 时返回右侧操作数，否则返回左侧操作数。这意味着 `??` 可以用于提供非假值的默认值。
 *  `||` 返回第一个真值，或者如果没有真值，返回最后一个操作数的值。这使得它在需要选择第一个非假值的情况下更有用。

### 示例 ###

const a = null;
    const b = 0;
    
    const result1 = a ?? 'Default';  // result1为 'Default'，因为a是null
    const result2 = b ?? 'Default';  // result2为 0，因为b不是null
    
    const result3 = a || 'Default';  // result3为 'Default'，因为a是null
    const result4 = b || 'Default';  // result4为 'Default'，因为b是假值

总之，`??` 和 `||` 都可用于提供默认值，但它们在处理假值和优先级方面存在区别。根据你的需求和是否需要严格处理 `null` 和 `undefined`，你可以选择其中之一。这两种运算符是 JavaScript 开发中的有用工具，根据具体情况来选择使用它们。