Welcome back to “The JS Bifrost”, your pathway to rock solid foundation for a God-level JavaScript. This is the second article in the series. Our focal point for this one is — the new nullish coalescing operator.
欢迎回到“ JS Bifrost”,这是您为神级JavaScript奠定坚实基础的途径。 这是该系列的第二篇文章。 我们对此的重点是- 新的空值合并运算符。
什么? (WHAT?)
It is a new Logical operator meant for short-circuiting to handle default values.
这是一个新的逻辑运算符,用于短路处理默认值。
It returns it’s right-hand side operand when its left-hand side operand is null
or undefined
, otherwise returns its left-hand side operand.
当其左侧操作数为null
或undefined
,它返回其右侧操作数,否则返回其左侧操作数。
为什么? (WHY?)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/522f8efc1ebbee09863393be20e6e739.png)
To assign some default values to the variable if it is null or undefined we use nullish coalescing.
要为变量赋一些默认值(如果变量为null或未定义),我们使用无效合并。
On the other hand, if we use logical OR(||) operator it will return left-hand side operand only if it is a falsy value, which is not null
or undefined
.
另一方面,如果我们使用逻辑OR(||)运算符 ,则仅当它是伪造的值(不为null
或undefined
)时,它才会返回左侧操作数。
Left-Hand-side ?? Right-Hand-side
左手边 ?? 右侧
or
要么
result = x ?? y
结果= x ?? ÿ
It’s equivalent is:
等效为:
result = (x !== null && x!== undefined) ? x: y;
怎么样? (HOW?)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/741c7b7a61b98cc9482780e5732466a7.png)
Let’s deep dive and see how nullish coalescing works on primitive data types in javascript with few examples.
让我们深入研究,并通过几个示例了解在JavaScript中对原始数据类型进行空值合并的方式。
String:
字串 :
![Image for post](https://miro.medium.com/max/9999/1*JmpMfa5Vsz-2lstWDI_e6g.png)
In above example, we are comparing null value and empty string with string. Result will be Bob and empty string respectively. Because (??) will only short-circuit the null value not an empty string.
在上面的示例中,我们将空值和空字符串与字符串进行比较。 结果将分别为Bob和空 字符串 。 因为( ?? )只会短路null值而不是空字符串。
Integer:
整数:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/7c1ffac7abf4e4ec50fb780bbf636baf.png)
In above example, we are comparing 0 and 20, output is 0 because left-hand side operand is not null
or undefined
.
在上面的示例中,我们比较0和20,输出为0,因为左侧操作数不是null
或undefined
。
Boolean:
布尔值:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/3a4f78c7a513b0c5dd769077a807da99.png)
In above example, we are comparing Boolean value with null
and undefined
and the result we are getting is boolean because they are not null
or undefined
.
在上面的示例中,我们将布尔值与null
和undefined
进行比较,并且我们得到的结果是布尔值,因为它们不是null
或undefined
。
什么是 Nullish合并运算符链接? (WHAT IS Nullish Coalescing Operator Chaining?)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/a31308e8ac0cc2cc56d31d3fc9913f7f.png)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/b2eeea4855050882e1439d8661c4b691.png)
In the above example, we are using multiple(chain of) nullish coalescing(??) operator and checking the values of each operand from left to right till the time it will not find a value which is not null
or undefined
in our case, it is 5 as output.
在上面的示例中,我们使用了null的coalcecing(??)运算符(链),并从左到右检查每个操作数的值,直到找不到一个非null
或undefined
在我们的例子中,输出为5。
用OR和AND运算符链接 (Chaining with OR and AND operator)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/78d710d6722ca8c943fdbc68d8861e20.png)
In above example, we are combining multiple logical ( && and || ) operator with nullish coalescing. we are getting the syntax error. so to resolve the above error we need to separate the operands with parenthesis(refer below example) to explicitly indicates the precedence.
在上面的示例中,我们将多个逻辑运算符(&&和||)与无效合并结合在一起。 我们收到语法错误。 因此,要解决上述错误,我们需要用括号将操作数分开(请参见下面的示例)以显式地指示priority 。
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/a4e92d0fc19d6491556660ec43ca8f38.png)
浏览器兼容性 (Browser Compatibility)
Most of the modern browsers support nullish coalescing operator(??), but with few exceptions from a compatibility perspective. Below is a quick summary.
大多数现代浏览器都支持无效的合并运算符(??),但从兼容性角度来看,几乎没有例外。 以下是快速摘要。
![Image for post](https://miro.medium.com/max/9999/1*KcJDxZDYyxE47QWpQ7CddA.png)
结论 (Conclusion)
There are a whole lot of bugs that we can face while doing programming we can simply avoid those by using nullish coalescing operator.
在进行编程时,我们会遇到很多错误,我们可以通过使用空值合并运算符来避免这些错误。
There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies.
构建软件设计的方法有两种:一种方法是使它变得如此简单,以至于显然没有缺陷,另一种方法是使它变得如此复杂以至于没有明显的缺陷。
— C.A.R. Hoare, 1980 ACM Turing Award Lecture
— CAR Hoare,1980年ACM图灵奖演讲
翻译自: https://medium.com/globant/the-js-bifrost-nullish-coalescing-operator-6ac55e59f61f