我正在参加「4月日新计划更文活动」，详情请看：4月日新计划更文活动

🦖我是Sam9029，一个前端

Sam9029的掘金主页:Sam9029的掘金主页

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

@TOC

前言

最近使用JS 逻辑且&& 与 或|| 遇到问题，之前记得，现在又忘了，重新温习一遍并且提供相应练习，相信在做完所有练习后，就可以在&& 与 || 使用上重整雄风·

谨记：逻辑 && 的运算优先级大于或||
注意逻辑非！优先级高于 && 与 ||
&& 与 || 亦被称为短路运算符

具体参见MDN所有优先级排序汇总表

运算符按照优先级-MDN

提示：以下是本篇文章正文内容，下面案例可供参考

一、&& 与 || 是什么？

重温一下 && 与 || 基本规则

1.1 且&& 运算

运算规则 a && b

a	b	结果
true	false	false
false	true	false
false	false	false
true	true	true

即 全真才取真, 一假则取假

1.2 或|| 运算

运算规则 a || b

a	b	结果
true	false	true
false	true	true
true	true	true
false	false	false

即 全假才取假, 一真则取真

⭐1.3 关于&& 与 || 的实际运用

注意：
往往我只注意 true && false 取false这些取真假的情况但是实际开发中 a和b很有可能不是布尔值数据类型 例如：

⭐在&& 运算中

若第一个运算子数据转换为布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）； 若第一个运算子数据转换为布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

// &&
  3 && 0   //0
  3 && 1   //1
  0 && 1   //0
  0 && 3   //0
  0 && 0   //0(第二个)
  '' && 0  //''
  0 && ""  //0

⭐在 || 运算中

若第一个运算子数据转换为布尔值为true，则返回第一个运算子的值（注意是值，不是布尔值）； 若第一个运算子数据转换为布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

// ||
  3 || 0   //3
  3 || 1   //3
  0 || 1   //1
  0 || 3   //3
  '' || 0  //0
  0 || ""  // ''

在这里插入图片描述

二、连续混合使用 && 与 ||

规则介绍
- 始终注意：&& 的优先级大于 ||
- && 与 || 的返回规则，见1.3 关于&& 与 || 的实际运用

2.1示例练习与讲解

	var a = 3  &&  0 || 2;  
	//2

根据优先级 先运算 3 && 0 （因为 3（第一个值）为真，故返回（第二个值） 0； 再运算 0 || 2 （注意：0是 3&&0 的返回值，不是按顺序的 0||2）（因为 0（第一个值）为假，故返回（第二个值） 2 故为结果为 2 （若不理解--回看1.3 关于&& 与 || 的实际运用）

	var b = 3 || 0  &&  2; 
	// 3

根据优先级 先运算 0 && 2 （因为 0（第一个值）为假，故返回（第一个值） 0； 再运算 3 || 0
（注意：0是 0&&2 的返回值，不是按顺序的 3||0）（因为 3（第一个值）为真，故返回（第一个值） 3 故为结果为 3

	var c= 0 || 2 && 3; 
	// 3

同理，分析根据优先级 先运算 2 && 3 （因为 2（第一个值）为真，故返回（第二个值） 3； 再运算 0 || 3
（注意：0是 0&&2 的返回值，不是按顺序的 3||0）（因为 0（第一个值）为假，故返回（第二个值） 2 故为结果为 3

总结

以上就是今天要讲的内容，本文仅仅简单介绍了&& 与 ||的使用，而h合理的使用使我们快速处理数据返回值。更多实际使用的场景，有待加深与发现

参考

运算符优先级以及 && (逻辑与) 和||（逻辑或）的优先级：布尔运算符-Javascript教程-网道（WangDoc.com），互联网文档计划

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的掘金主页:Sam9029的掘金主页

【JS学习】&& 和 || 运算符得注意事项踩坑

前言