一行代码系列

2016-08-28

1、一行代码可视化CSS盒子布局

1	[].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)
    }
)

1、选取页面所有DOM元素
$$()相当于document.querySelectorAll()，返回的是一个NodeList对象数组，现代浏览器几乎都支持

2、循环遍历DOM元素
$$("*")将所有的DOM元素转化为NodeList对象，但这并不是一个JS数组，所以不能直接使用$$("*").forEach()方法来进行迭代，但是我们可以通过call或apply方法来使用forEach
[].forEach.call等价于Array.prototype.forEach.call，不过前者字节数更少
3、给元素添加outline
为什么不使用border而是使用outline的原因在于:border在CSS盒子模型之内，会影响页面的整体布局，而outline在CSS盒子模型之外，不会影响到页面的布局
4、生成随机颜色函数

1	(~~(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/addyosmani/fd3999ea7fce242756b1

2、一行能装B的JS代码

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

上面一行神奇的代码，执行效果却出人意料，请看下图:

源码解读

主要涉及到的知识点是JS运算的优先级以及JS的类型转换
补充知识:
~按位取反运算，进行类型转换，转换成数字，作用是取负然后减1，会自动去掉小数位
~~位运算符，进行类型转换，转换成数字，等同于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"