Fe-interview: [js] 第28天 解释下这段代码的意思！

[haizhilin2013]

第28天 解释下这段代码的意思！

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

[AnsonZnl]

作用

在你的Chrome浏览器的控制台中输入这段代码，你会发现不同HTML层都被使用不同的颜色添加了一个高亮的边框。是不是非常酷？但是，简单来说，这段代码只是首先获取了所有的页面元素，然后使用一个不同的颜色为它们添加了一个1px的边框。

解析

• [].forEach.call()=> 调用引用数组的forEach方法
• $$('*') => document.querySelectorAll('*')
• ~~a => parseInt(a)
• 1<<24 => 对二进数1小数点右移24位
• (parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数，也就是随机颜色，再使用toString(16)将它转化为十六进制数。
  

  手写简版

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

看蒙了，别问我怎么知道的，百度的！！

参考：

• 从一行代码里面学点JavaScript ：https://my.oschina.net/l3ve/blog/330358

[myprelude]

用数组的foEach方法遍历 dom类数组对象 ，将对象dom节点加上随机颜色的轮廓。

[Konata9]

// $$('*') 为获取所有 dom 元素，返回数组
[].forEach.call($$("*"), function(a) {
  // forEach 的回调函数，这里的 a 是数组中每个 dom 元素，不是 a 标签
  a.style.outline =
    // ～～是取整 1<<24 是位运算 结果为 16777216
    // 之后的 toString(16) 为进行 16 进制的转换 即颜色
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

因此这段代码的意思为，给页面所有 dom 元素添加随机颜色的边框。

[Vi-jay]

用通配符拿到所有元素
用forEach.call遍历所有元素
给所有元素加上随机颜色的1px实线边框

[sosamuel]

1 << 24; // 1 左移 24 位, 值为 2^24
Math.random() * (1 << 24); // 随机生成 (0, 2^24) 之间的数字
~~(Math.random() * (1 << 24)); // 将小数转成32位有符号整数取反再取反, 即舍弃小数值
(~~(Math.random() * (1 << 24))).toString(16); // 将取整后的值转化为16进制, 值范围 [0, 2^24)
$$("*"); // 相当于 document.querySelectorAll("*")
// 代码为所有元素设置一个随机颜色的 outline

[blueRoach]

等于这个$$("").forEach(function(a){ a.style.outline="1px solid #"+((Math.random()(1<<24))).toString(16) })
$$("")获取所有标签
1<<24 “<<” 左移移位符 将2进制的1左移24位，相当于2^24
Math.random()(1<<24) 生成0~2^24的数
~~Math.random()(1<<24) 去掉小数点
(Math.random()(1<<24)).toString(16) 将取整后的数转位16进制

整个的意思就是，页面上全部元素弄一个1px solid随机颜色的轮廓