详细解析[].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 样式为实线 颜色为随机任意颜色的边框(轮廓)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值