遇到此类问题可以尝试百度关键词 JS Operators logical ,能比较准确地定位到相关知识点网站

一、JS中的逻辑或 || 、逻辑与 &&

首先如果第一项的值不是Boolean值的话，会转为Boolean类型的

在数值上，0和-0在转为Boolean时为false，其余为true

Ⅰ- 问题提出

我在平时写js代码时，一般也就使用&&和||判断true和false

但是最近在看其他人代码与源码时,发现出现了大量逻辑或 || 、逻辑与 && 的其他用法,于是在此记录梳理一下

Ⅱ - 逻辑或 ||

  1. console.log(1 || 2);  //真或真   1
  2. console.log(1 || 0); //真或假   1
  3. console.log(0 || 2); //假或真   2
  4. console.log(-1 || 2); // 注意:只有0代表假,负数不为假,所以仍是真或真  -1
  5. console.log(0 || false); //假或假  false
  6. console.log(false || 0); //假或假  0
  7. console.log(true || false); //布尔值的真或假  true
  8. console.log(false || true); //布尔值的假或假  true

逻辑或 || 规律总结:

  • 若 || 前方为true: 则返回运算符前方内容或运算结果;
  • 若 || 前方为 false: 则返回运算符后方的内容或运算结果
  • || 当第一位判断到为真,结果就已经是真,所以不用再走到运算符后方,只要将前方内容返回即可(true),反之相反

Ⅲ - 逻辑与 &&

  1. console.log(1 && 2);  //真并真   2
  2. console.log(1 && 0); //真并假    0
  3. console.log(0 && 2); //假并真    0
  4. console.log(-1 && 2); // 注意:只有0代表假,负数不为假,所以仍是真或真   2
  5. console.log(0 && false); //假并假  0
  6. console.log(false && 0); //假并假  false
  7. console.log(true && false); //布尔值的真或假   false
  8. console.log(false && true); //布尔值的假或假   false

逻辑与 && 规律总结:

  • 若 && 前方为 true: 则返回运算符后方内容或运算结果;
  • 若 && 前方为 false: 则返回运算符前方的内容或运算结果
  • 因为 true && false 为 true,所以当运算符前方为 true 时,就靠的后方内容真假为最终结果,所以可以直接返回后方的内容作为运算结果,反之相反

Ⅳ - 应用场景举例

转换成数组时根据特定条件去重
  1. let andObj = {}
  2. let orObj = {}
  3. let arr = ['努力学习的汪','努力学习的汪','hongjilin','努力学习的汪'] 
  4. //使用&& 运算符
  5. arr.map((item,index)=>{
  6.    !andObj[item] && (andObj[item]=index)  //当此属性名第一次出现时,赋予obj
  7. })
  8. //使用 || 运算符,其实判断就恰好与&&相反
  9. arr.map((item,index)=>{
  10.    andObj[item] || (andObj[item]=index)  //当此属性名第一次出现时,赋予obj
  11. })
  12. console.log(andObj) // {努力学习的汪: 1, hongjilin: 2}
  13. console.log(orObj) // {努力学习的汪: 1, hongjilin: 2}

这里只是举个偏例,实际上可以变换成很多适用场景

二、运算优先级

Ⅰ- 以题入手

此部分我觉得仍是从各种题目入手,通过分析题目对此部分知识点进行梳理整合

如果要看更多JS面试题目可以点这里 —> JavaScript专项练习

1、求下方打印结果

  1. var a = 18;
  2. var b = "努力学习的汪";
  3. var c = false;
  4. var d = a && b || c ? c || b ? a : c && b : a ;
  5. console.log(d)

知识点梳理以及答案解析
  1. && 运算符的优先级高于 ||，而 || 的优先级又高于? :
  • 所以我们对它进行第一次分解：((a && b) || c) ? (c || b) ? a : (c && b) : a
  1. ? : 是右关联
  • 例如: a ? b : c ? d : e —> a ? b : (c ? d : e)
  • 所以进一步对上方进行分解 : ((a && b) || c) ? ((c || b) ? a : (c && b)) : a
  1. 对于&&来说，如果条件判断结果为true就会返回第二个操作数的值，如果为false就会返回第一个操作数的值
  1. 对于 || 来说，如果条件判断结果为true就会返回第一个操作数的值，如果为false就会返回第二个操作数的值；
  1. 此时结果就非常明了了,下面给出结果变化
  • c ? (b ? a : c) : a ==> false ? ( “努力学习的汪” ? 18 : false) : 18
  • 经过隐式转换后 : false ? (true ? 18: false) : 18
  • 三元运算符可知,当?前为false,返回:后方的值 所以结果为18