簡(jiǎn)述一下下面代碼的意思以及用到的知識(shí)點(diǎn)

[].forEach.call($$(*),function(a){

a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16))

})

答案解析：

1）選擇頁面中所有的元素

$$函數(shù)是現(xiàn)代瀏覽器提供的一個(gè)命令行API，它相當(dāng)于document.querySelectorAll，可以將當(dāng)前頁面中的css選擇器作為參數(shù)傳給該方法，然后它會(huì)返回匹配的所有元素。

2）遍歷元素

[].forEach.call($$('*')，function(a){/*具體操作*/})

通過使用函數(shù)call和apply方法，可以實(shí)現(xiàn)在類似NodeLists這樣的類數(shù)組對(duì)象上調(diào)用數(shù)組方法。

3）為元素添加顏色

a.style.outline="1px solid? #"+color? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

代碼中使用outline的css屬性給元素添加一個(gè)邊框。由于渲染的outline是不會(huì)在css盒模型中的，所以為元素添加outline并不會(huì)影響元素帶的大小和布局。

4）生成隨機(jī)顏色

~~（Math.random()*(1<<24)).tostring(16)

1.Math.random()*(1<<24)可以得到0~2^24-1之間的隨機(jī)數(shù)，使用了位操作

2.因?yàn)榈玫降氖且粋€(gè)浮點(diǎn)數(shù)，但是我們只需要整數(shù)部分，使用取反操作符~連續(xù)兩次取反獲得整數(shù)部分，使用兩個(gè)波浪號(hào)等價(jià)于parseInt，const a=12.34;~~a==parseInt（a，10）;//true

3.然后再用toString(16)的方式，轉(zhuǎn)換為一個(gè)16進(jìn)制的字符串。

toString()方法將數(shù)值轉(zhuǎn)換成字符串時(shí)，接收一個(gè)參數(shù)用以指明數(shù)值的進(jìn)制。如果省略了該參數(shù)，則默認(rèn)采用十進(jìn)制，但你可以指定其他的進(jìn)制。

總結(jié)知識(shí)點(diǎn)：

call,apply綁定this指向

$$('*')獲取頁面中的所有元素

css中outline屬性不在盒模型中，不會(huì)影響元素的大小

Math.random隨機(jī)數(shù)

<<運(yùn)算符執(zhí)行左移位運(yùn)算。在移位運(yùn)算過程中，符號(hào)位始終保持不變。如果右側(cè)空出位置，則自動(dòng)填充為 0；超出 32?位的值，則自動(dòng)丟棄。

tostring()可以將其他類型轉(zhuǎn)成字符串，如果是數(shù)字可以轉(zhuǎn)換成其他進(jìn)制