js bifrost无效合并运算符

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.

当其左侧操作数为nullundefined ,它返回其右侧操作数,否则返回其左侧操作数。

为什么? (WHY?)

Image for post
Photo by Mathew Schwartz on Unsplash
Mathew SchwartzUnsplash上的 照片

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(||)运算符 ,则仅当它是伪造的值(不为nullundefined )时,它才会返回左侧操作数。

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
Photo by Jon Tyson on Unsplash
乔恩·泰森 ( Jon Tyson)Unsplash

Let’s deep dive and see how nullish coalescing works on primitive data types in javascript with few examples.

让我们深入研究,并通过几个示例了解在JavaScript中对原始数据类型进行空值合并的方式。

String:

字串

Image for post
Nullish coalescing in String
空字符串合并

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

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,因为左侧操作数不是nullundefined

Boolean:

布尔值:

Image for post
Nullish coalescing in Booleans
布尔值中的空位合并

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.

在上面的示例中,我们将布尔值与nullundefined进行比较,并且我们得到的结果是布尔值,因为它们不是nullundefined

什么是 Nullish合并运算符链接 (WHAT IS Nullish Coalescing Operator Chaining?)

Image for post
Photo by Markus Spiske on Unsplash
Markus SpiskeUnsplash拍摄的照片
Image for post
Nullish coalescing chaning
空置的合并提示

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(??)运算符(链),并从左到右检查每个操作数的值,直到找不到一个非nullundefined 在我们的例子中,输出为5。

用OR和AND运算符链接 (Chaining with OR and AND operator)

Image for post
Nullish coalescing in logical operators
逻辑运算符中的空位合并

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
Nullish coalescing in logical operators
逻辑运算符中的空位合并

浏览器兼容性 (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

结论 (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图灵奖演讲

I hope this article is useful, when and how to use nullish coalescing operator (“??”). Thanks for reading!

我希望本文对何时以及如何使用空值合并运算符(“ ??”)有所帮助。 谢谢阅读!

Stay tuned for more under our ‘The JS Bifrost’ !!

请继续关注我们的“ JS Bifrost ” !!

翻译自: https://medium.com/globant/the-js-bifrost-nullish-coalescing-operator-6ac55e59f61f

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值