简述一下下面代码的意思以及用到的知识点
[].forEach.call($$(*),function(a){
a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16))
})
答案解析:
1)选择页面中所有的元素
$$函数是现代浏览器提供的一个命令行API,它相当于document.querySelectorAll,可以将当前页面中的css选择器作为参数传给该方法,然后它会返回匹配的所有元素。
2)遍历元素
[].forEach.call($$('*'),function(a){/*具体操作*/})
通过使用函数call和apply方法,可以实现在类似NodeLists这样的类数组对象上调用数组方法。
3)为元素添加颜色
a.style.outline="1px solid #"+color
代码中使用outline的css属性给元素添加一个边框。由于渲染的outline是不会在css盒模型中的,所以为元素添加outline并不会影响元素带的大小和布局。
4)生成随机颜色
~~(Math.random()*(1<<24)).tostring(16)
1.Math.random()*(1<<24)可以得到0~2^24-1之间的随机数,使用了位操作
2.因为得到的是一个浮点数,但是我们只需要整数部分,使用取反操作符~连续两次取反获得整数部分,使用两个波浪号等价于parseInt,const a=12.34;~~a==parseInt(a,10);//true
3.然后再用toString(16)的方式,转换为一个16进制的字符串。
toString()方法将数值转换成字符串时,接收一个参数用以指明数值的进制。如果省略了该参数,则默认采用十进制,但你可以指定其他的进制。
总结知识点:
call,apply绑定this指向
$$('*')获取页面中的所有元素
css中outline属性不在盒模型中,不会影响元素的大小
Math.random随机数
<<运算符执行左移位运算。在移位运算过程中,符号位始终保持不变。如果右侧空出位置,则自动填充为 0;超出 32 位的值,则自动丢弃。
tostring()可以将其他类型转成字符串,如果是数字可以转换成其他进制