Nullish合并运算符如何在JavaScript中工作

2020年12月30日10:52:47 发表评论 36 次浏览

本文概述

ES11添加了一个无效的合并运算符, 该运算符由双问号表示, 如下所示:??.

在本文中, 我们将探讨为什么它如此有用以及如何使用它。

让我们开始吧。

背景资料

在JavaScript中, 存在短路逻辑OR运算符||.

||运算符返回第一个真实值。

以下是只有六个被认为是的值虚假的JavaScript中的值。

  • false
  • 未定义
  • null
  • ""(空字符串)
  • NaN
  • 0

因此, 如果上述列表中未包含任何内容, 则将其视为真实的值。

真相

虚假

值是强制转换为非布尔值

true

or

false

在执行某些操作时。

const value1 = 1;
const value2 = 23;

const result = value1 || value2; 

console.log(result); // 1

作为||运算符返回第一个真实的值, 在上面的代码中, 结果将是存储在中的值值1这是1.

If值1isnull, 未定义, 空的或任何其他虚假的值, 然后||之后的下一个操作数运算符将被求值, 这将是总表达式的结果。

const value1 = 0;
const value2 = 23;
const value3 = "Hello";

const result = value1 || value2 || value3; 

console.log(result); // 23

在这里, 因为值1是0, 值2将被检查。由于这是一个真实值, 因此整个表达式的结果将是值2.

||的问题运算符是它不能区分false, 0, 空字符串"", NaN, null和undefined。它们都被认为是虚假的价值观。

如果这些是||的第一个操作数, 那么我们将得到第二个操作数作为结果。

为什么JavaScript需要空位合并运算符

||运算符的效果很好, 但有时我们只希望在第一个操作数仅是下一个时对下一个表达式求值nullor未定义.

因此, ES11添加了无效的合并运算符。

在表达中X ?? ÿ,

  • 如果x是nullor未定义 然后只有结果将是ÿ.
  • 如果x是不 nullor未定义那么结果将是X.

这将使条件检查和调试代码变得容易。

自己尝试

let result = undefined ?? "Hello";
console.log(result); // Hello

result = null ?? true; 
console.log(result); // true

result = false ?? true;
console.log(result); // false

result = 45 ?? true; 
console.log(result); // 45

result = "" ?? true; 
console.log(result); // ""

result = NaN ?? true; 
console.log(result); // NaN

result = 4 > 5 ?? true; 
console.log(result); // false because 4 > 5 evaluates to false

result = 4 < 5 ?? true;
console.log(result); // true because 4 < 5 evaluates to true

result = [1, 2, 3] ?? true;
console.log(result); // [1, 2, 3]

因此, 从以上所有示例中可以明显看出, 运算结果X ?? ÿisÿ只有当X或者是未定义ornull.

在所有其他情况下, 运算结果始终为X.

总结

如你所见, 当你只在乎时, 空值合并运算符非常有用nullor未定义任何变量的值。

从ES6开始, JavaScript有许多有用的补充, 例如

  • ES6解构
  • 导入和导出语法
  • 箭头功能
  • 承诺
  • 异步/等待
  • 可选的链接运算符

还有更多。

你可以在以下网址中详细了解有关所有ES6 +功能的所有信息:掌握现代JavaScript书。

你可以以40%的折扣获得Mastering Modern JavaScript书.

订阅我的每周通讯加入1000多个其他订阅者, 直接在你的收件箱中获得惊人的提示, 技巧, 文章和折扣优惠。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: