专栏名称: 前端宇宙
种一棵树,最好的时间是十年前,其次是现在。
目录
相关文章推荐
51好读  ›  专栏  ›  前端宇宙

?? 与 || 在 JavaScript 中的微妙差别

前端宇宙  · 公众号  · Javascript  · 2024-10-10 09:07

主要观点总结

文章主要介绍了JavaScript中的??和||运算符的区别,以及它们在特定情境(如视频游戏初始化、响应分页、用户输入验证等)中的应用。同时,文章还提及了React Hook、CSS技巧、Vue2与Vue3的技巧以及VueUse源码的解读。

关键观点总结

关键观点1: JavaScript中的??和||运算符的区别

文章强调了??和||运算符在JavaScript中的不同行为。??运算符在查找truthy值,而||运算符在寻找任何非空或未定义的值。文章还通过具体例子解释了这两个运算符在视频游戏、响应分页、用户输入验证等情境中的应用。

关键观点2: React Hook、CSS技巧、Vue2与Vue3的技巧

文章提到了React Hook的深入浅出,CSS技巧的案例详解,以及Vue2与Vue3的技巧合集。这些都是前端开发中的重要主题,文章可能涵盖了这些主题的基本概念、使用方法和实践应用。

关键观点3: VueUse源码解读

文章还涉及了VueUse源码的解读,这可能包括了对VueUse库的内部工作原理、代码结构、特定功能实现等的分析和解释。


正文

起初,你可能会认为你可以随意替换任何你喜欢的人,对吗?

错误。他们并非你所想的那样。

我们必须一劳永逸地学习这个区别,以避免日后出现痛苦的错误。

这个差别是什么?

这是他们对待真值和假值的令人难以置信的对比。这些是什么?

假值:在 Boolean()if 中变为 false

  • 0
  • undefined
  • null
  • NaN
  • false
  • '' (空字符串)

Truthy:所有其他的事情:

现在看看创建一个这样的 || 链时会发生什么:

它会一直进行下去,直到遇到第一个真值!但是关于 ?? 链呢?👇

看到明显的区别了吗?

一个寻找 truthy ,另一个寻找任何非空或未定义的东西。

何时使用 ?? 与 ||

在视频游戏中初始化额外生命,其中 0 代表某种含义?

?? 👇

对响应进行分页,其中 0 limit 没有意义?

|| 👇

用户必须有一个名称,所以不能有空格,绝对不能有空字符串?

|| 👇


用户输入的数字无效,还是他们根本就没有输入数字?

?? 找出来👇

#### ???. 是朋友

总结

?? 是一个轻信的孩子,他会相信任何事情。|| 是一名寻找真实无非真实的侦探。


最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读