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

前言

当处理默认值时，??（空值合并运算符）和||（逻辑或运算符）是 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不是nullconst result3 = a || 'Default';  // result3为 'Default'，因为a是null
const result4 = b || 'Default';  // result4为 'Default'，因为b是假值

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