現在到處都是JavaScript，每天都能知道點新東西。一旦你入了門，你總能從這里或是那里領悟到很多知識。
一旦我發現一些有意思的東西，我喜歡去感覺他們的源代碼，看一看它是怎么辦到的。
今天我想分享Addy Osmani的一行代碼，這行代碼對于你調試你的CSS是很有用的。為了可讀性，我把它變成了3行。
注* Addy Osmani 是Google Chrome開發工程師，他前幾天開發的字符串解析模板，馬上被兼容最新ES6標準的io.js采納。
Js代碼
[].forEach.call($$(“”),function(a){
a.style.outline=”1px solid #”+(~~(Math.random()(1<<24))).toString(16)
})
嘗試在你瀏覽器的Console(F12)中運行一下，你會發現頁面被不同的顏色塊高亮了，這個方法非常簡單，但是你自己寫的話可能產生非常多的代碼，讓我們來研究一下它是怎么實現的。
選擇一個頁面上的所有元素
我們首先需要選擇頁面上的所有元素。Addy使用了只能在console調試工具中使用的$$函數，你可以在console中輸入$$(‘a’)自己試一下。它會返回當前頁面的所有anchor（鏈接）元素。
$$與document.querySelectorAll是等價的。所以$$(‘’)與 document.querySelectorAll(‘’)是等價的，有興趣的話可以看看$$和$選擇器的歷史。
對于我來說，$$的使用已經讓我學到了很多。但是選擇頁面上的所有元素的知識還有很多。Mathias Bynens就在評論中指出document.all 其實也能選取選用元素，而且兼容所有主流瀏覽器。
遍歷所有的元素
現在我們有了一個所有元素的節點列表（NodeList）,現在我們想遍歷它們，并給他們加上有顏色的邊框。我們先看看能從這行代碼里發現什么：
Js代碼
[].forEach.call( $$(‘’), function( element ) { / And the modification code here / });
NodeList看起來像一個Array（數組），你可以使用中括號來訪問他們的節點，而且你還可以通過length屬性知道它有多少元素。但是它并沒有實現Array的所有接口，因此使用 $$(‘’).forEach 會返回錯誤，在JavaScript的世界里，有一堆看起來像Array但其實不是的對象。如function中的arguments對象。因此在他們身上通過call和apply來應用數組的方法是非常有用的。我之前寫過一篇文章來解析它們的用法，下面是一個例子：
Js代碼
function say(name) {
console.log( this + ‘ ‘ + name );
}
say.call( ‘hola’, ‘Mike’ );
// 打印輸出 ‘hola Mike’
之前的一行代碼使用 [].forEach.call 代替 Array.prototype.forEach.call 減少了代碼的編寫量 ( 另外一個很有意思的地方 )；如果$$(‘’)返回是個數組的話，它與$$(‘’).forEach是等價的。
如果你看看評論，還有人使用for(i=0;A=$$(‘*’);)讓代碼變得更短，但是它在全局對象中注入了變量。
你可以帶上var聲明，如
Js代碼
for(var i=0,B=document.querySelectorAll(‘’);A=B[i++];){ / your code here */ }
其中i和B將只聲明在console的上下文中。
改變元素的顏色
讓元素有一個漂亮的邊框，這行代碼使用了CSS的outline屬性。有一點你可能不知道，在CSS渲染的盒子模型（Box Model）中，outline并不會改變元素及其布局的位置。因此這比使用border屬性要好得多，所以這一部分其實并不難理解
Js代碼
a.style.outline=”1px solid #” + color
怎樣定義顏色值其實是比較有意思的
Js代碼
~~(Math.random()*(1<<24))).toString(16)
我不是特別懂位運算，因此我最喜歡這一段。
我們想構造的其實是一個16進制的顏色值，像白色FFFFFF，藍色0000FF等等。
首先我們學到了可以使用數字類型的toString方法進行十進制到16進制的轉換。
其實你可以用它進行任意進制的轉換
Js代碼
(30).toString(); // “30”
(30).toString(10); // “30”
(30).toString(16); // “1e” 16進制
(30).toString(2); // “11110” 二進制
(30).toString(36); // “u” 36 是最大允許的進制
因此16進制中的ffffff其實是 parseInt(“ffffff”, 16) == 16777215，16777215是2^24 – 1的值
因此左位移操作乖以一個隨機數 Math.random()*(1<<24) 可以得到一個0 到 16777216之間的值
但是還不夠，Math.random返回的是一個浮點數字，我們只需要整數部，這里使用了“~”操作符（按位取反操作）。
這行代碼并不關心正負值。因此通過兩次取返就可以得到純整數部，我們還可以將~~視為parseInt的簡寫：
Js代碼
var a = 12.34, // ~~a = 12
b = -1231.8754, // ~~b = -1231
c = 3213.000001 // ~~c = 3213
;
~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true
如果你仔細看評論你會知道使用 按位或 “|”操作符也可以得到相同的結果。
Js代碼
~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)
我們最終得到了一個 0 到 16777216之間的隨機數，然后使用toString(16)轉換成16進制，它就是這樣工作的。
