奇技淫巧：指過于奇巧而無益還讓人著迷的技藝與制品。

And（與）	&
Or（或）	|
Exclusive Or（異或） 或者稱 Xor	^
Not（非）	~

位運算符，我們在日常js開發中其實 說真的，很少會用到，甚至可以說 有相當一部分的 javascripter完全不知道 位運算符

但是我們日常中肯定常常會用到 '&&'、'||'、'!' 這么幾個符號，它們看起來跟位運算符很像，但是 它們并不是位運算符，它們只運用在 ‘boolean 布爾值’運算中

曾幾何時我曾疑惑過 為什么 我們 在 js中 做條件判斷的時候 ‘and’是用‘&&’而不是‘&’

現在答案來了，因為‘&’已被占用，是個位運算符

 

雖然說 我們日常開發中 很多js原生方法能滿足我們了，但是適當掌握一些 位運算 能提高你的開發效率和代碼性能

 

在這里我們不探討 位運算符的原理，有興趣的可以自行谷歌

 

---

 

Not ～

Not 實質上  是對數字向下取整求負 再 減1

var num = 20.1          

console.log(~num)    // -21

 

 

 

---

And &

這個 就有點復雜了

對數字的二進制形式進行運算。它把每個數字中的數位對齊，然后用下面的規則對同一位置上的兩個數位進行 AND 運算：

 

第一個數字中的數位	第二個數字中的數位	結果
1	1	1
1	0	0
0	1	0
0	0	0

舉例： 30 & 3

我們先來看下兩個數的 二進制

var i = 30

i.toString(2) // 11110

var j = 3

j.toString(2) // 11

console.log(i & j) // 2

為什么是‘2’？

我們來看一下, 按照上表的關系 我們可以得出 下表結果

30	1 1110
3	0 0011
結果	0 0010

二進制 ‘10’ 對應的 十進制數就是 ‘2’了

 

---

Or |

or跟and 相似 也是 轉為二進制之后 進行的 計算 不過規則不同

第一個數字中的位數	第二個數字中的位數	結果
1	1	1
1	0	1
0	1	1
0	0	0

同樣的 我們拿 30 | 3來舉例

 

var i = 30

i.toString(2) // 11110

var j = 3

 j.toString(2) // 11

console.log(i | j) // 31

 

30	1 1110
3	0 0011
結果	1 1111

 

---

 Exclusive Or ^(或者稱 Xor)

也是類似 or 和 and 一樣 不過規則不同

 

第一數字中的位數	第二數字中的位數	結果
1	1	0
1	0	1
0	1	1
0	0	0

var i = 30

i.toString(2) // 11110

var j = 3

 j.toString(2) // 11

console.log(i ^ j) // 29

 

30	1 1110
3	0 0011
結果	1 1101

 

---

 

那么 看了這4個 基本運算之后，

究竟我們的 奇技淫巧在哪呢？

我們再回到 Not 運算符上，可以說 And Or Xor 這三個位運算 我們用到的可能性比較小

但是 Not 的 法則 是 向下取整 后 求負 減1

注意我 著重標出的 關鍵字，是不是想到了什么？沒錯 Math.floor()

如果說 單次 使用 Not 是 求負減1 那么 我連續使用 2次 Not 會怎么樣呢？對于 整型 的數字來說 連續兩次 就是它本身，那么對于浮點型的數字呢？ 那豈不就是 他的向下取整了么？

為了驗證 我們可以試一下

var i = 25.1

console.log(~~i) //25

但是又有人說 向下取整 不是有 Math.floor() 方法么？

好了 這就是我們奇技淫巧了 為什么要用 兩次 Not 而不用 Math.floor()

第一，你不覺得 ‘~~’ 輸入起來 比 'Math.floor()' 快么？

第二，就是 '~~' 比 'Math.floor()' 更快。

Math.floor() 運行速度 是 3.5 millions ops/sec

~~的運行速度是 3.8 millions ops/sec

但是 ~~ 只適用于 32位 以下的整型，對于 超過32位的 整型 還是要用 Math.floor()