已经很久没记录知识了。今天写这篇文章是来自于一个问题的思考 (1.1 | 1 = 1)。我相信大多数人都知道这个答案，但是我细想发现并不明白其中原因，后来自己去百度了一下，发现自己的基础还是有点差，所以今天记录下位运算符和逻辑运算符的区别和用法。
首先先说一下他们的定义：
位运算符：位运算符处理32位数，使用该运算符的运算中的任何数值运算数都会被转成32位整数，结果会被转换成javaScript数
逻辑运算符：逻辑运算符用来进行逻辑运算，判断变量或者之间的逻辑关系
下面我们来看下他们的具体操作符的含义

位运算符

引用一张MDN中总结的位操作符定义表格：

image.png

表格中的比特位也就是32位二进制数中的每一个位数，列举一个40的32进制数：

0000000000000000000000000101000

列举其中与（AND）运算符的计算过程：
示例：9 | 10 = ?

9 (十进制) = 00000000000000000000000000001001 (二进制)

10 (十进制) = 00000000000000000000000000001010 (二进制)

9 | 10 (十进制) = 00000000000000000000000000001011 (二进制) = 11 (十进制)

如上图所示，按照定义在位运算中将操作数转化成32位整数，AND中任何数与1进行操作都是1，任何数与0进程操作得出自己，所以9 | 10 的位运算结果转化成javascript数也就是十进制数为11。然后再回到我的问题 1.1 | 1 = ?

  1. 1.1 (十进制) = 00000000000000000000000000000001 (二进制)
  2.    1 (十进制) = 00000000000000000000000000000001 (二进制)
  3. -------------------------------------------------------------------

1.1 | 1 (十进制) = 00000000000000000000000000000001 (二进制) = 1 （十进制）

这样一来我们的结果是不是很清晰了,对于其他位运算符可以根据上述表格进行自行计算，这里就不赘述了。

逻辑运算符

逻辑运算符通常用于布尔型(逻辑)值。这种情况下，他们返回一个布尔值，然后&&和 || 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，他们也会返回一个非布尔值。
逻辑运算符如下图所示(其中expr可能是任何一种数据类型，不一定是布尔值):

image.png

其中的expr可以是任意类型值，如果要将其转换成布尔类型值，有两种方法： ①使用非运算符（！！）来处理非布尔型值 ②使用Boolean构造函数来显示转换，还有一些常见的被转换称false的表达式有：

  • null
  • NaN
  • 0
  • 空字符串(“” or ‘’ or ``)

  • undefined

    短路运算

    由于逻辑表达式在相同优先级下是从左至右的，所以可以用以下规则进行”短路”计算：

    • （some false expression） && (expr) 短路计算结果为假
    • （some true expression） || (expr) 短路计算结果为真

短路意味着上诉表达式不需要全部被执行，当左边操作数被确定以后，表达式的值也就确定了，我们来看一个简单的示例： 

  1. /* 短路计算情况一 */
  2. false && 1 
  3. // false
  5. /* 短路计算情况二 */
  6. true || 100 
  7. // true

请注意，当存在运算符优先级时，表达式的结果可能就不同了，比如小括号包裹起来的操作将变成独立的表达式

  1. false && true || true // 结果为true
  2. false && (true || true) // 结果为false

逻辑与（&&）

列举一些逻辑与（&&） 的示例

  1. test1 = true && true // 返回true
  2. test2 = true && false // 返回false
  3. test3 = false && true // 返回false
  4. test4 = false && (3 || 4)  // 返回false
  5. test5 = 'car' && 'dog' // 返回'car'
  6. test6 = false && 'dog' // 返回false
  7. test7 = '' && 'cat' // 返回''
  8. test8 = 'cat' && false // 返回false
  9. test9 = false && '' // 返回false
  10. test10 = '' && false // 返回''

逻辑或（||）

列举一些逻辑或（||）的示例

  1. test1 = true || true // 返回true
  2. test2 = false || true // 返回false
  3. test3 = true || false // 返回true
  4. test4 = 'cat' || 'dog' // 返回'cat'
  5. test5 = false || (3 == 4) // 返回false
  6. test6 = 'cat' | false // 返回'cat'
  7. test7 = '' || 'cat' // 返回'cat'
  8. test8 = false || '' // 返回''
  9. test9 = false || 'cat' //返回'cat'

在或与逻辑表达式中我总结了一下，除了短路计算以外可以更加具体的表现为：
逻辑或（||） ： 左值为true时，取左值，左值为false时，取右值
逻辑与（&&）： 左值为true时，取右值，左值为false时，取左值

逻辑非（!）

列举一些逻辑非(!)运算符的示例

  1. test1 = !true // 返回false
  2. test2 = !false // 返回true
  3. test3 = !'' // 返回true
  4. test4 = !'Cat' // 返回false

双重非(!!) 运算符主要是显式地将任意值强制转换成其对应地布尔值。同样得Boolean构造函数也可以达到相同的效果,示例：

  1. test1 = !!true // 返回true
  2. test2 = !!false // 返回false
  3. test3 = !!{} // 返回true
  4. test4 = !!(new Boolean(false)) // 返回false
  5. test5 = !!"" // 返回false
  6. test6 = Boolean(1) // 返回1
  7. test7 = !!Boolean(1) // 返回true

总结

了解了这一块的内容后，才发现自己的弟子很薄弱，以前觉得基础的东西没什么好挖掘的，还是太年轻呀，看来得抓着红宝书啃一啃了，MDN也是一个不错的javaScript学习渠道，里面的示例也很丰富，coding…