Javascript/jQuery「Gotchas」

Question

什麼是您已經看到或被絆倒的常見Javascript和/或jQuery「陷阱」？

舉個例子，有人向我指出今天早上，你必須做parseInt()時，因爲如果你的字符串以0開始小心基數，基數將默認爲8

Answer 1

我會建議閱讀整個http://wtfjs.com/

Answer 2

的Javascript

parseInt('0aaa') //still returns 0 
parseFloat('0.aaa') //still returns 0 

這更多的人一個oops因素。在編寫switch語句時，我知道忘記在語句中放置一箇中斷，這會導致問題。

var myvar = '1' 
switch (myvar) { 
    case '1': 
    alert(myvar); 
    case '2': 
    alert(myvar); 
    break; 
} 

因爲我忘了在case '1'突破，您將收到警報的兩倍。

Answer 3

替換.round()/.floor()或.ceil()與~~去掉小數點後的位置很帥。

而不是

Math.floor(Math.random() * 100); 

你做

~~(Math.random() * 100); 

這只是短且具有更好的性能，即使！

Answer 4

道格拉斯克羅克福德的書JavaScript: The Good Parts是一個很好的閱讀有關該主題。還有的Javascript壞的和可怕的部分在裏面:)

Answer 5

的「這」

範圍請看下面的例子：

function myClass(message) { 
    this.message = message; 
    $('button').click(function(){ 
    this.onClick(); 
    });  
} 

myClass.prototype.onClick = function() { 
    alert(this.message); 
} 

當然，第3行不行：this以每個功能爲基礎工作，並且第2行定義的功能將選定按鈕作爲this而不是myClass的實例。還有一個更sneakier版本：

function myClass(message) { 
    this.message = message; 
    $('button').click(this.onClick);  
} 

myClass.prototype.onClick = function() { 
    alert(this.message); 
} 

這就需要正確的功能，但this仍然是按鈕（因爲this調用方決定，而不是由一個事實，即你是一個成員函數）。正確的解決方案是使用一箇中間變量，如self，申請理智範圍規則到this：

function myClass(message) { 
    this.message = message; 
    var self = this; 
    $('button').click(function() { self.onClick(); });  
} 

類型鑄造

[] == ![]評估爲真爲晦澀原因

陣列and Properties

The length屬性僅適用於數組上的整數鍵。例如：

var a = [];  // a.length == 0 
a[0] = 'first'; // a.length == 1 
a['1'] = 'second'; // a.length == 2 
a['x'] = 'third'; // a.length == 2 <-- 'x' does not count 

雖然關於這個主題，for(in)作品陣列上，但穿過陣列上定義的所有屬性。這意味着當您將ExtJS添加到項目中時，使用for(in)來迭代數組的JavaScript代碼會在某些瀏覽器中突然停止工作，因爲ExtJS在不存在的情況下定義Array.prototype.filter（這稱爲「猴子修補」）。從現在開始filter是每個數組對象的自定義屬性，所有的循環也遍歷它。繁榮。

遍歷數組的乾淨方式是使用長度和遞增循環。或者jQuery的$.each()。

Answer 6

我在Javascript中遇到的最大的WTF必須是String.replace。

就拿這個代碼：

"An,example,of,a,comma,separated,sentence".replace(',', ' '); 

這將產生由空格很好地分離，而不是，右一句？

令我驚訝的是：不，它不。它只是用一個空格替換第一個逗號，而其餘的則保持不變。如果您想要替換實際，則必須使用.replace(/,/g, ' ')。

爲什麼該方法不被稱爲'replaceFirst'是任何人的猜測。

Answer 7

變量作用域和循環變量絕對是一個「陷阱」。

var lis= document.getElementsByTagName('li'), 
    imgs = document.getElementsByTagName('img'); 
for (i = 0; i < elements.length; i++) 
{ 
    elements[i].onclick = function() { 
     imgs[i].src = elements[i].innerHTML; 
    } 
} 

在執行的時候，imgs[i]將是不確定的，試圖訪問imgs[i].src時拋出一個錯誤：在一個循環中分配時，事件處理這種情況發生了很多。 elements[i]及其innerHTML相同。

Answer 8

隱含的全局是一個很大的一個：

var x = 12, y = 14; 
function addOne(num) 
{ 
    x = num + 1; // since this is not declared with 'var', it is implied global 
    return x; 
} 

alert(addOne(y)); // alerts '15' 
alert(addOne(x));  // alerts '16' 

這是一個簡單的，和不切實際的例子，但很好地說明了問題。

Answer 9

Elijah Manor最近在他的博客Enterprise jQuery上發表了一篇非常好的文章。它寫在JavaScript的「陷阱」爲C＃開發人員。這是一個系列文章，並且有很多好的觀點可以「讓」個人熟悉其他語言。

查看這裏：How Good C# Habits can Encourage Bad JavaScript Habits。

Answer 10

的return聲明必須緊隨其後，或在同一行中至少開始的值：

return 4; // returns 4 
return {}; // returns an empty object 
return { // returns an empty object 
};   
return  // returns undefined 
{ 
}; 

Answer 11

阿賈克斯獲取/職位，以靜態URI可以通過IE瀏覽器中緩存。所以你需要附加一個不斷變化的參數，一個快速簡便的方法是追加new Date().getTime()