最短的IE判斷var ie=!-[1,]分析_javascript技巧

 以前最短的IE判定借助於IE不支援垂直製表符的特性搞出來的。

 

複製程式碼 程式碼如下:

 var ie = ! "v1";
 

只需要7bytes！參見這篇文章，《32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE》，講述外國人是如何把IE的判定從32 bytes一步步縮簡成7 bytes!的故事但這紀錄今年1月8日被一個俄國人打破了，現在只要6 bytes!它利用了IE與標準瀏覽器在處理數組的toString方法的差異做成的。對於標準遊覽器，如果數組裡面最後一個字元為逗號，JS引擎會自動剔除它。

複製程式碼 程式碼如下:

var ie = !-[1,];

這句代碼在IE9之前曾被稱為世界上最短的IE判定代碼。程式碼雖短但確包含了不少javascript基礎知識在裡面。在這個例子中程式碼執行時會先呼叫數組的toString()方法 ，執行[1,].toString()在IE6,7,8中將會得到"1,"。然後表達式就變成!-"1,"。再嘗試把"1，"轉換成數值型得到NaN ,再對NaN取負得到值仍為NaN。最後執行!NaN傳回true。以下透過分解這個語句來回顧下程式碼中所涉及的javascript知識：

1. 瀏覽器的陣列字面量解析差異

[1,]表示使用javascript的陣列字面量定義了一個陣列。 在IE6,7,8中數組有兩個元素，數組中的值分別為1，undefined。在標準的瀏覽器中會忽略第一個元素後的undefined，陣列只包含一個元素1。

2. 陣列的toString()方法

呼叫數組物件的toString()方法時會對數組中的每個元素呼叫toString()方法，如果元素的值為NULL或undefined時會傳回空的字串，然後將得到的每項的值拼成一個使用逗號","分隔的字串。

3. 一元減號運算子

使用一元減號運算子時如果運算數是數值類型則直接對運算數取負，否則會先嘗試把運算數轉換為數值類型，轉換過程相當於執行Number函數，然後再對得到的結果取負。

4. 邏輯非運算

執行邏輯非運算時如果運算元為NaN、NULL或undefined 時傳回 true。

JavaScript可以這麼寫：

複製程式碼 程式碼如下:

var ie = !-[1,];  
   alert(ie); 

如果從非IE的角度判定，可以省一個比特，因為我們做相容時，絕大多數情況都是IE與非IE地開工。 var notIE = -[1,];

複製程式碼 程式碼如下:

if(-[1,]){ 
     alert("這不是IE瀏覽器！"); 
}else{ 
     alert("這是IE瀏覽器！"); 
}

透過上面的知識可以得到程式碼var ie = !-[1,]; 其實等價於var ie = !(-Number([1,].toString())); 在IE678中值為true 。

因為IE6/7/8都不會忽略[1,].ToString()這個bug，即得到的是"1,"；而-Number([1,].toString())即為-Number ("1,")得到的結果是NaN；然後!(-Number([1,].toString()))即為!(NaN)即得到true。一切的前提是IE6/7/8都有[1,].ToString()=>"1,"這個bug，而其它瀏覽器(應該是大部分吧~~)則是[1,].ToString( )=>"1"。

最近發現有朋友這樣使用用來提示使用者升級瀏覽器

<script>
!-[1,] && alert('您使用的是 IE6-8 版本的浏览器，
\n建议用 Chrome, Firefox, IE9+ 浏览！');
</script>