我应该什么时候使用？？（无效合并）vs || （逻辑或）？

Question

与JavaScript 中是否存在“空值合并”运算符相关？- JavaScript 现在有一个??运算符，我看到它使用得更频繁。以前大多数 JavaScript 代码使用||.

let userAge = null

// These values will be the same. 

let age1 = userAge || 21

let age2 = userAge ?? 21

在什么情况下会有不同??的||表现？

Answer 1

||如果 left 是falsy，OR 运算符使用正确的值，而如果 left 是or ，则空值合并运算符??使用正确的值。nullundefined如果缺少第一个运算符，这些运算符通常用于提供默认值。但是，||如果您的左值可能包含""or0或false（因为这些是假值） ，则 OR 运算符可能会出现问题：console.log(12 || "not found") // 12console.log(0  || "not found") // "not found"console.log("jane" || "not found") // "jane"console.log(""     || "not found") // "not found"console.log(true  || "not found") // trueconsole.log(false || "not found") // "not found"console.log(undefined || "not found") // "not found"console.log(null      || "not found") // "not found"在许多情况下，如果 left 是null或，您可能只需要正确的值undefined。这就是 nullish 合并运算符??的用途：console.log(12 ?? "not found") // 12console.log(0  ?? "not found") // 0console.log("jane" ?? "not found") // "jane"console.log(""     ?? "not found") // ""console.log(true  ?? "not found") // trueconsole.log(false ?? "not found") // falseconsole.log(undefined ?? "not found") // "not found"console.log(null      ?? "not found") // "not found"虽然该??运算符在当前 LTS 版本的 Node（v10 和 v12）中不可用，但您可以将它与某些版本的 TypeScript 或 Node 一起使用：该??运算符于 2019 年 11 月被添加到TypeScript 3.7。最近，该??运算符被包含在 ES2020中，由 Node 14（2020 年 4 月发布）支持。当??支持无效合并运算符时，我通常使用它而不是 OR 运算符||（除非有充分的理由不这样做）。

Answer 2

简而言之：空值合并运算符区分空值( null, undefined) 和虚假但已定义的值 ( false,0等'')。有关更多信息，请参见下图。对于||（逻辑或）无效值和错误值是相同的。let x, yx = 0y = x || 'default'   // y = 'default'y = x ?? 'default'   // y = 0如上所示，运算符??和运算符之间的区别在于||，一个是检查空值，一个是检查假值。但是，在许多情况下它们的行为相同。这是因为在 JavaScript 中，每个nullish值也是falsey（但不是每个falsey值都是nullish）。我创建了一个简单的图形来说明 JavaScript 中nullish和false值的关系：使用我们上面学到的知识，我们可以为不同的行为创建一些示例：let yy = false || 'default'       // y = 'default'y = false ?? 'default'       // y = falsey = 0n || 'default'          // y = 'default'y = 0n ?? 'default'          // y = 0ny = NaN || 'default'         // y = 'default'y = NaN ?? 'default'         // y = NaNy = '' || 'default'          // y = 'default'y = '' ?? 'default'          // y = ''由于新的Nullish Coalescing Operator可以区分无值和虚假值，因此如果您需要检查是否没有字符串或空字符串，它会很有用。通常，您可能希望使用??而不是||大部分时间。最后也是最不重要的是它们行为相同的两个实例：let yy = null || 'default'        // y = 'default'y = null ?? 'default'        // y = 'default'y = undefined || 'default'   // y = 'default'y = undefined ?? 'default'   // y = 'default'

Answer 3

作为一个非常简短的规则，您可以以相反的方式看待它：||（或）returns the first "truthy" value（如果不存在“真实”值，则为最后一个值）??（无效合并）returns the first "defined" value（如果不存在“定义”值，则为最后一个值）例子x = false || true; // -->  true   (the first 'truthy' value - parameter 2) x = false ?? true; // -->  false  (the first 'defined' value - parameter 1)

Answer 4

如MDN中所述：与逻辑 OR ( ) 运算符相反，如果左操作数是非or||的假值，则返回左操作数。换句话说，如果您使用为另一个变量提供一些默认值，如果您认为某些虚假值是可用的（例如，或），您可能会遇到意外行为。有关更多示例，请参见下文。nullundefined||foo''0并且在您链接的问题的答案中：无论第一个操作数的类型如何，如果将其转换为布尔值导致 false，则赋值将使用第二个操作数。请注意以下所有情况：alert(Boolean(null)); // falsealert(Boolean(undefined)); // falsealert(Boolean(0)); // falsealert(Boolean("")); // falsealert(Boolean("false")); // true -- gotcha! :)