一行代码系列

一、一行代码可视化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"`