详细解析[].forEach.call($$(“*“),function(a){})

菜鸡互啄题1：

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

解释上面代码的含义：

首先，这段代码出现了[].forEach.call写法，我们先从这里入手。

先看一个例子：

var h2s = document.querySelectorAll('h2');

[].forEach.call(h2s,function(h2){
  h2.style.color = "red";
});

在浏览器内的效果：

可以看到执行这个例子以后，标签<h2>的内容全部变为红色。

在[].forEach.call()中[]是一个数组，而且是用不到的空数组，目的是用来引申方法，为了访问数组相关方法，比如这里的.forEach,这种写法的完整写法是：

Array.prototype.forEach.call(...);

forEach方法：它可以接受一个函数参数：

[1,2,3].forEach(function (num) { console.log(num);});
//输出  1
//     2
//     3

上面的这句代码中，我们可以访问this对象，也就是[1,2,3]，可以看出，这个this是个数组。

.call是一个prototype，JavaScript函数内置的,.call使用它的第一个参数替换掉上面说的这个this，也就是你要传人的数组，其它的参数就跟forEach方法的参数一样了。

举个例子：

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
    console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"

我们可以观察到，在执行上面代码之后，[1,2,3]里面的内容被替换为["a","b","c","d"]

到这里，我们可以了解到[].forEach.call()所做的工作

然后我们再分析($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

首先，我们看到一个特殊的语句$$("*")

$ 与document.queryselect 的效果一样。返回传入选择的第一个元素

$$与document.queryselectAll 的效果一样。返回传入选择所有元素

我们可以知道$$('*')作用是拿到所有DOM标签

a.style.outline=这句代码作用是为拿到的标签a设置css样式outline属性，也就是为标签添加边框属性，后面跟的参数"1px solid #…":

1px 代表这个边框宽度为1px

solid 代表这个边框为实线

#… 代表为边框设置颜色

那么到此，我们可以基本得出[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

这句代码的作用是，为所有DOM标签，添加一个宽度为1px 样式为实线 的指定颜色的边框

分析到这里，那只剩最后一句是为了得到一个颜色(~~(Math.random()*(1<<24))).toString(16)

• Math.random()是生成[0,1)的浮点数，

• 1<<24是2^24，相乘得到一个[0,16777216）的浮点数

• ~~因为得到了一个浮点数，但是我们只需要整数部分，使用取反操作符 ~ 连续两次取反获得整数部分，使用两个波浪号等价于使用parseInt：const a = 12.23; ~~a === parseInt(a); //true

• .toString(16)转换为16进制

• rgb颜色种类是256，256，256，是2的24次方，一个数字代表一个颜色，那么在这个代码里，随机生成一个0~2^24-1的数字就代表随机一个颜色

所以，我们最后可以得出[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })的目的是为所有DOM标签添加一个宽度为1px 样式为实线 颜色为随机任意颜色的边框（轮廓）