一行代碼系列

一、一行代碼可視化CSS盒子佈局

---

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

源碼解讀

---

首先咱們把代碼格式化一下:

[].forEach.call($$("*"),
    function(a){
        a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
    }
)

一、選取頁面全部DOM元素
$$()至關於document.querySelectorAll()，返回的是一個NodeList對象數組，現代瀏覽器幾乎都支持
二、循環遍歷DOM元素
$$("*")`將全部的`DOM`元素轉化爲`NodeList`對象，但這並非一個JS數組，因此不能直接使用`$$("*").forEach()方法來進行迭代，可是咱們能夠經過call或apply方法來使用forEach
[].forEach.call等價於Array.prototype.forEach.call，不過前者字節數更少
三、給元素添加outline
爲何不使用border而是使用outline的緣由在於:border在CSS盒子模型以內，會影響頁面的總體佈局，而outline在CSS盒子模型以外，不會影響到頁面的佈局
四、生成隨機顏色函數

(~~(Math.random()*(1<<24))).toString(16)

隨機顏色區間:

最小:000000,轉爲十進制爲0
最大:ffffff,轉爲十進制爲256*256*256 = 16777216 = (1<<24)

Math.random()返回0~1的浮點數，Math.random()*(1<<24)返回的的便是(0,16777216)之間的浮點數,使用~~去除浮點數的小數部分，再經過toString(16)就轉化爲十六進制的顏色值了

效果圖

---

原文連接:https://gist.github.com/addyo...

二、一行能裝B的JS代碼

---

(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]

上面一行神奇的代碼，執行效果卻出人意料，請看下圖:

源碼解讀

---

主要涉及到的知識點是JS運算的優先級以及JS的類型轉換
補充知識:

`~~`位運算符，進行類型轉換，轉換成數字，等同於`Math.floor()`，將浮點數變成整數
首先咱們看`(!(~+[])+{})`
`+[]` => `+""` => `0`
`~+[]` => `-1`
`!(~+[])` => `false`
`(!(~+[])+{})` => `"false[object Object]"`
接着看`[--[~+""][+[]]*[~+[]]+~~!+[]]`
`[+[]]` => `[0]`
`[~+""]` => `[~0]` => `[-1]`
`[~+""][+[]]` => `[-1][0]=>-1`
`--[~+""][+[]]` => `-2`
`[~+[]]` => `[-1]`
`--[~+""][+[]]*[~+[]]` => `-2*[-1]` => `2`
`~~!+[]` => `~~!0` => `~~true` => `1`
`[--[~+""][+[]]*[~+[]]+~~!+[]]` => `[2+1]` => `[3]`
這樣左側`(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]` => `"false[object Object]"[3]` => `"s"`
再看右側`({}+[])[[~!+[]]*~+[]]`
`({}+[])` => `"[object Object]"`
`[~!+[]]` => `[~!0]` => `[~true]` => `[-2]`
`~+[]` => `-1`
`[[~!+[]]*~+[]]` => `[[-2]*-1]` => `[2]`
`({}+[])[[~!+[]]*~+[]]` => `"[object Object]"[2]` => `"b"`