通过一行代码学习javascript

时间:2023-03-10 04:18:16
通过一行代码学习javascript
[].forEach.call($$("*"), function (a){
a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

在控制台运行这段代码,可以给页面中所有元素加上1px、颜色随机的边框。下面来分析这段代码:

$$只能在控制台中使用,作用跟document.querySelectorAll一样,所以在控制台以外的地方想选中页面中所有元素,可以用document.querySelectorAll("*")代替$$("*")。当然选中页面中所有元素的方法有很多,比如document.all,一样可以代替$$("*")。

存储有所有元素的NodeList看起来像Array,可以用中括号去访问节点,拥有length属性。但它并没有Array的所有接口。是不是想起了函数里的Arguments变量。所以需要用call或apply调用Array的函数,并将第一个参数作为函数里面的this对象。

单行代码中用[]代替了Array.prototype,节省了一些字节。这相当于在$$("*").forEach中,把$$("*")当成Array来使用。

outline是CSS属性用于在元素外围增加轮廓,显示的边框在CSS区块模型外(不会占据空间,也不会对元素本身的布局和位置产生任何影响),语法和border一样。

toString(16)可转换成16进制,Math.random()可生成0~1随机数。

1<<24是位运算符,意思是将1转换成二进制数字再往左移24位,等同于十进制的2^24,这样随机数范围即为0~16777215.而parseInt("ffffff",16)=16777215正好是2^24.

~表示按位取反,位运算的操作值要求是整数,所以经过位运算的都会变成整数。这里~~取反两次,表示去掉小数部分。除了~~n,还可以使用n<<0,n>>0,n|0,这种取整方式无论正负都不会改变整数部分。