現(xiàn)如今,，JavaScript無處不在,，因此關(guān)于JavaScript的新知識也是層出不窮。JavaScript的特點(diǎn)在于,，要學(xué)習(xí)它的語法入門簡簡單,，但是要精通使用它的方式卻是一件不容易的事,。

　　來看看下面的這段代碼，它來自于谷歌“名猿”Addy Osmani在幾天前貼出的一段代碼,，它的作用是用來調(diào)試你的CSS層,。全部代碼只有三行，但是你絕對可以把它放在一行里面完成：

　　現(xiàn)在,，在你的Chrome瀏覽器的控制臺中輸入這段代碼,，你會發(fā)現(xiàn)不同HTML層都被使用不同的顏色添加了一個高亮的邊框。是不是非?？?但是,，簡單來說，這段代碼只是首先獲取了所有的頁面元素,，然后使用一個不同的顏色為它們添加了一個1ps的邊框,。想法很簡單，但是真要實(shí)現(xiàn)起來卻不是那么容易的一件事,。在下面的內(nèi)容中,，我們將一起一步一步學(xué)習(xí)如何理解上面的這段代碼。

　　選擇頁面中所有的元素

　　我們需要做的第一件事情是獲取頁面中所有的元素,，在上面的代碼中,，Addy使用了一個Chrome瀏覽器中特有的函數(shù) $$。你可以在你的Chrome瀏覽器控制臺中輸入 $$('a'),，然后你就能得到一個當(dāng)前頁面中所有錨元素的列表,。

　　$$函數(shù)是許多現(xiàn)代瀏覽器命令行API中的一個部分，它等價于 document.querySelectorAll,，你可以將一個CSS選擇器作為這個函數(shù)的參數(shù),，然后你就能夠獲得當(dāng)前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制臺以外的地方,，你可以使用document.querySelectorAll('*') 來代替 $$('*'),。更多關(guān)于 $$ 函數(shù)的詳細(xì)內(nèi)容可以查看Chrome開發(fā)者工具的文檔。

　　當(dāng)然,，除了使用$$函數(shù)之外,，我們還有一種更簡單的方法，document.all,，雖然這并不是一種很規(guī)范的使用方法,，但是它幾乎在每一個瀏覽器中都能運(yùn)行成功。

　　迭代所有的元素

　　經(jīng)過第一步,，我們已經(jīng)獲得了頁面內(nèi)所有的元素,，現(xiàn)在我們想做的事情是遍歷每一個元素,，然后為它們添加一個彩色邊邊框。但是上面的代碼究竟是怎么一回事呢?

　　首先,，我們通過選擇器獲得的列表是一個NodeLists對象,，它和JavaScript中的數(shù)組有點(diǎn)像，你可以使用方括號來獲取其中的節(jié)點(diǎn),，你也可以檢查它其中包含多少個元素,，但是它并沒有實(shí)現(xiàn)數(shù)組包含的所有方法，因此我們并不能使用$$('*').forEach()來進(jìn)行迭代,。在JavaScript中,，有好幾個類似于數(shù)組但是并不是數(shù)組的對象，除了前面的NodeLists,，還有函數(shù)的參數(shù)集合arguments,，在這里我們可以使用call或apply函數(shù)將函數(shù)的方法運(yùn)用到這些對象上。例如下面的例子：

　　在Addy的代碼中,，使用了[].forEach.call而不是Array.prototype.forEach.call,，二者等價，但是前者可以節(jié)省幾個字節(jié),。

　　為元素添加顏色

　　為了讓元素都有一個漂亮的邊框,，我們在上面的代碼中使用了CSS屬性outline。outline屬性位于CSS盒模型之外,，因此它并不影響元素的屬性或者元素在布局中的位置,，這對于我們來說非常有用。這個屬性和修改border屬性非常類似,，因此下面的代碼應(yīng)該不會很難理解：

　　真正有趣的地方在于定義顏色部分：

　　天吶,，上面的代碼是什么意思?在JavaScript中，比特操作符并不是經(jīng)常被使用,，因此這里可能會讓很多程序員感到很疑惑,。

　　我們想達(dá)到的目的是活的一個十六進(jìn)制格式的顏色例如白色對應(yīng)的是FFFFFF，藍(lán)色對應(yīng)的是0000FF,，或者隨便一個顏色37f9ac,。雖然我們?nèi)祟愊矚g十進(jìn)制，但是我們的代碼常常會需要十六進(jìn)制的東西,。

　　我們首先要學(xué)會如何使用toString函數(shù)將一個十進(jìn)制的數(shù)組轉(zhuǎn)換為一個十六進(jìn)制整數(shù),。這個函數(shù)可以接受一個參數(shù)，如果參數(shù)缺省,，默認(rèn)為十進(jìn)制,，但是你完全可以使用別的數(shù)組：

　　除此之外，你可以使用parseInt函數(shù)將十六進(jìn)制數(shù)字轉(zhuǎn)換為十進(jìn)制,。

　　因此,，我們現(xiàn)在只需要一個位于0和ffffff之間的十六進(jìn)制數(shù)，由于:

　　而這里的16777215實(shí)際上是2^24-1,。

　　如果你對二進(jìn)制數(shù)學(xué)熟悉的話,，你可能會知道1<<24 == 16777216。

　　再進(jìn)一步,，你每在1后面添加一個0,，你就相當(dāng)于多做了一次2的乘方：

　　因此，在這里我們可以知道Math.random()*(1<<24)表示一個位于0和16777216之間的數(shù),。

　　但是這里并沒有結(jié)束,，因?yàn)镸ath.random返回的是一個浮點(diǎn)數(shù)，但是我們只想要整數(shù)部分,。我們的代碼中使用波浪號操作符來完成這件事,。波浪操作符在JavaScript中被用來對一個變量進(jìn)行取反。

　　但是我們在這里并不關(guān)心取反,，我們指向獲取整數(shù)部分,。因此我們還可以知道兩次取反可以去掉一個浮點(diǎn)數(shù)的小數(shù)部分，因此~~的作用相當(dāng)于parseInt：

　　當(dāng)然,，我們還有一種更加簡潔的方法,，使用OR操作符：

　　最終，我們獲得了一個位于0和16777216之間的隨機(jī)整數(shù),，也就是我們想要的隨機(jī)顏色,。此時我們只需要使用toString(16)將它轉(zhuǎn)化為十六進(jìn)制數(shù)即可。

　　總結(jié)

　　現(xiàn)在,，你已經(jīng)完全理解了前面的這一行代碼中的各個部分,。作為一個程序員，我們應(yīng)該在完成工作之后多問自己幾遍為什么,，還有沒有更好更簡潔的方法,。當(dāng)然，最應(yīng)該做的事情當(dāng)然是多閱讀程序代碼,，也許你就能從某一行代碼中學(xué)到很多新東西,。

原文鏈接：https://segmentfault.com/a/1190000006860477

來源作者：仁平君