首页 > web前端 > js教程 > 正文

解锁 JavaScript:逻辑或 (||) 与空合并运算符 (??)

王林
发布: 2024-07-28 09:23:43
原创
810 人浏览过

Unlocking JavaScript: Logical OR (||) vs Nullish Coalescing Operator (??)

介绍

JavaScript 作为最流行的编程语言之一,为开发人员提供了一系列运算符来处理各种逻辑运算。其中,逻辑或 (||) 和空值合并 (??) 运算符是管理默认值和处理空值的基本工具。本文将深入探讨这两个运算符之间的差异、它们的用例,以及实际、复杂的示例来说明它们的用法。

了解逻辑 OR (||) 运算符

JavaScript 中的逻辑 OR (||) 运算符广泛用于返回其操作数中的第一个真值,或者如果没有一个真值,则返回最后一个值。它主要用于设置默认值。

句法

雷雷

怎么运行的

||运算符从左到右计算,如果第一个操作数为真则返回;否则,它将计算并返回第二个操作数。

示例 1:设置默认值

雷雷

在这个例子中,userInput 是一个空字符串(falsy),所以返回defaultText。

示例 2:处理多个值

雷雷

这里,firstName为null(假),所以lastName被返回,因为它是true。

逻辑 OR (||) 运算符的限制

|| 的主要限制运算符的一个缺点是它将多个值视为假值,例如 0、NaN、''、false、null 和 undefined。当这些值本来是有效的时,这可能会导致意外的结果。

引入空值合并 (??) 运算符

Nullish Coalescing (??) 运算符是 JavaScript 的最新补充,在 ES2020 中引入。它旨在处理 null 或 undefined 明确意味着是唯一考虑的空值的情况。

句法

雷雷

怎么运行的

的?当左侧操作数为 null 或未定义时,运算符返回右侧操作数。否则,它返回左侧操作数。

示例 1:设置默认值

雷雷

在这个例子中,userInput 是一个空字符串,不为 null 或未定义,所以返回。

示例 2:处理空值

雷雷

这里,firstName为null,因此lastName被返回,因为它既不是null也不是未定义的。

比较逻辑 OR (||) 和空合并 (??) 运算符

示例 1:比较虚假值

雷雷

在此示例中,|| 认为 0 为假。运算符,但它是 ?? 的有效值运营商.

示例 2:同时使用两个运算符

雷雷

这里,userInput 为 null,因此 ?? 使用了fallbackText操作员。然后通过 || 检查结果运算符,但由于 FallbackText 为真,因此返回它。

逻辑 OR (||) 和空合并 (??) 运算符的复杂示例

示例 3:对象的嵌套操作

考虑一个场景,您需要为嵌套对象属性设置默认值。

雷雷

在这个例子中,userSettings.theme.color 是一个空字符串,所以使用defaultSettings.theme.color。 userSettings.theme.font 为 null,因此使用 defaultSettings.theme.font。

示例 4:具有默认值的函数参数

处理函数参数时,您可能希望为缺少的参数提供默认值。

雷雷

在此示例中,name 参数使用 ??如果 name 为 null 或未定义,则使用运算符设置默认值“Guest”。问候语参数使用 ||如果问候语是除 null 或未定义之外的任何虚假值,则运算符设置默认值“Hello”。

示例 5:与可选链结合

可选链 (?.) 可以与 || 组合和 ??安全地处理深度嵌套的对象属性。

雷雷

在此示例中,可选链接可确保如果属性路径的任何部分不存在,则返回未定义,从而防止错误。 ||和 ??然后运算符提供适当的默认值。

最佳实践和用例

  1. 使用||对于广泛违约:

    • 当您需要为一系列虚假条件(例如,空字符串、0、NaN)提供默认值时。
  2. 使用??精确的空值检查:

    • 当你特别想处理 null 或 undefined 而不影响其他虚假值时。
  3. 结合两者:

    • Gunakan gabungan || dan?? untuk senario kompleks di mana anda perlu mengendalikan kedua-dua nilai kebenaran/palsu dan nilai batal dengan jelas.

Soalan Lazim

Apakah yang dilakukan oleh operator Logik OR (||)?
Operator Logik OR (||) mengembalikan nilai kebenaran pertama antara operannya atau operan terakhir jika tiada nilai kebenaran.

Bilakah saya harus menggunakan operator Nullish Coalescing (??)?
Gunakan operator Nullish Coalescing (??) apabila anda perlu mengendalikan null atau undefined secara khusus tanpa menganggap nilai palsu lain seperti 0 atau rentetan kosong sebagai batal.

Bolehkah saya menggunakan kedua-dua operator bersama-sama?
Ya, anda boleh menggunakan kedua-duanya || dan?? bersama-sama untuk mengendalikan pelbagai jenis nilai dan memastikan logik kod anda merangkumi pelbagai kes dengan berkesan.

Bagaimana || pegang tali kosong?
|| operator menganggap rentetan kosong sebagai palsu, jadi ia akan mengembalikan operan seterusnya jika rentetan pertama ialah rentetan kosong.

Adakah pengendali Nullish Coalescing (??) disokong dalam semua penyemak imbas?
yang?? operator disokong dalam pelayar moden dan persekitaran yang menyokong ES2020. Untuk persekitaran yang lebih lama, anda mungkin perlu menggunakan transpiler seperti Babel.

Apakah perbezaan antara || dan?? pengendali?
Perbezaan utama ialah || menganggap beberapa nilai sebagai palsu (cth., 0, '', palsu), manakala ?? hanya menganggap null dan undefined sebagai nilai nullish.

Kesimpulan

Memahami perbezaan antara operator Logical OR (||) dan Nullish Coalescing (??) dalam JavaScript adalah penting untuk menulis kod yang mantap dan bebas pepijat. || operator bagus untuk senario lalai yang luas, manakala ?? adalah sempurna untuk mengendalikan nilai batal dengan ketepatan. Dengan menggunakan operator ini dengan sewajarnya, anda boleh memastikan kod anda mengendalikan pelbagai keadaan data dengan berkesan, memberikan pengalaman pengguna yang lancar.

以上是解锁 JavaScript:逻辑或 (||) 与空合并运算符 (??)的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!