Javascript/jQuery"Gotchas"

Question

您见过或被绊过的常见Javascript和/或jQuery"陷阱"是什么？

作为一个例子,今天早上我指出你在做的时候必须小心基数parseInt(),因为如果你的字符串以0开头,则基数将默认为8.

Answer 1

更换.round()/ .floor()或.ceil()与~~切去小数位是相当帅.

代替

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

你做

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

它只是更短,甚至更好的性能!

Answer 2

'这个'的范围

请考虑以下示例:

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

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

当然,第3行不起作用:this基于每个函数工作,第2行定义的函数将选择按钮this而不是myClass的实例.有一个更加狡猾的版本:

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(); });    
}

类型铸造

[] == ![] 由于不明原因,评估为真

数组和属性

该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 )可以处理数组,但遍历数组上定义的所有属性.这意味着for( in )当您将ExtJS添加到项目中时,用于迭代数组的JavaScript代码将突然停止在某些浏览器上运行,因为ExtJS定义Array.prototype.filter它是否不存在(这称为猴子修补).由于现在filter是每个数组对象的自定义属性,所有循环也会遍历它.繁荣.

迭代数组的干净方法是使用length和递增for循环.或jQuery的$.each().

Answer 3

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

以此代码为例:

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

这会产生一个很好地用空格分隔的句子,对吧？

令我惊讶的是:不,它没有.它只用空格替换第一个逗号,其余部分保持不变.如果您想进行实际更换,则必须使用.replace(/,/g, ' ').

为什么这个方法不被称为'replaceFirst'是任何人的猜测.

Answer 4

我会建议阅读整个http://wtfjs.com/

Answer 5

该return语句必须紧跟其后的值,或者至少从同一行开始:

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