js bifrost无效合并运算符

    科技2022-07-31  108

    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?)

    Photo by Mathew Schwartz on Unsplash Mathew Schwartz在 Unsplash上的 照片

    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?)

    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:

    字串 :

    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:

    整数:

    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:

    布尔值:

    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.

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

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

    Photo by Markus Spiske on Unsplash Markus Spiske在 Unsplash上 拍摄的照片 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(??)运算符(链),并从左到右检查每个操作数的值,直到找不到一个非null或undefined 在我们的例子中,输出为5。

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

    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 。

    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.

    大多数现代浏览器都支持无效的合并运算符(??),但从兼容性角度来看,几乎没有例外。 以下是快速摘要。

    结论 (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

    相关资源:Bifrost 彩虹桥 远程控制(所有版本)
    Processed: 0.013, SQL: 8