七个开法者经常忽略或误用的JavaScript基本知识

七个开法者经常忽略或误用的JavaScript基本知识

翻译自 http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly ，我觉得4、5、6条还是蛮有用的哈。

1.  String.prototype.replace: /g and /i 标识

让很多新手疑惑的是，JavaScript里的字符串的replace方法不会替换所有匹配的字符，而是只替换第一次匹配的字符。当然熟悉JavaScript的老手知道我们需要一个正则表达式和一个/g标识。

// 错误的用法
str ="David is an Arsenal fan, which means David is great";
str.replace("David","Darren");// "Darren is an Arsenal fan, which means David is great"
// 想要的效果
str.replace(/David/g,"Darren");// "Darren is an Arsenal fan, which means Darren is great"

另一种常犯的错误是当字符串大小写不敏感时不使用 /i 标志来匹配

str.replace(/david/gi,"Darren")// "Darren will always be an Arsenal fan, which means Darren will always be great"

每一个JavaScript开发者都被每一个标志坑过，所以要保证在适合的时候使用这些标志。

2.  Array-Like Objects 和 Array.prototype.slice

Array的slice方法主要用来提取数组中的一部分，很多开发者不知道slice方法可以将类数组的对象转换成真正的数组，比如 arguments,NodeLists。

var nodesArr =Array.prototype.slice.call(document.querySelectorAll("div"));// "true" array of DIVs

var argsArr =Array.prototype.slice.call(arguments);// changes arguments to "true" array

你甚至可以用slice克隆一个数组：

var clone = myArray.slice(0);// naive clone

Array.prototype.slice 绝对是JavaScript世界中的精华，即时JS熟手也不一定知道它全部的威力。

3.  Array.prototype.sort

 Array sort 方法被广泛使用，很多开发者以为sort方法做这样的事情：

[1,3,9,2].sort();// Returns: [1, 2, 3, 9]

这样是对的，但是sort有更强大的用法，像这样：

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // Ascending: first age less than the previous
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

4.  Array 长度截断

没有一个开发者没被JavaScript的传递对象引用的特性坑过，常常这样来清空一个数组，但却错误的创建了一个新的数组。

var myArray = yourArray =[1,2,3];// :(
myArray =[];// "yourArray" 还是 [1, 2, 3]
// 正确的方法，保持引用
myArray.length =0;// "yourArray" and "myArray" 都变成了 []

5.  push方法来合并数组

我在第二条展示了Array的slice方法的强大能力，所以push方法有这样的能力你也不会见怪了。这次我们用push方法来合并数组

var mergeTo =[4,5,6];
var mergeFrom =[7,8,9];
Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo;// is: [4, 5, 6, 7, 8, 9]

6. 高效的特性检测或者属性检测

我们常常这样来检测一个浏览器的特性：

if(navigator.geolocation){
// Do some stuff
}

当然，这能正常工作，但它不是很高效。因为对象的方法检测在浏览器中可能会导致分配资源，上面的代码在某些浏览器曾导致内存泄漏。更好的方法检测对象的key：

if("geolocation"in navigator){
// Do some stuff
}

这样的key检测使用简单并且避免了很多问题，比如一个属性的值是false，那么你的检测会失败，即使key存在。

7. Event preventDefault 和 stopPropagation

当元素被点击时（比如链接），我们经常触发自己的函数。显然，我们不希望浏览器继续访问这个链接，所以我们使用JavaScript库的Event.stop方法：

$("a.trigger").on("click",function(e){
    e.stop();
// Do more stuff
});

这个方法的问题在于它不仅阻止了浏览器的默认行为，而且阻止了事件冒泡。也就是说，其他的事件监听器不会监听到这个事件。

所以最好是直接使用preventDefault方法。

一些开发者可能会说：“我知道这些！”，但是他们也常常犯这样的错误，所以不要忽略这些小的细节，它们可能造成大的差异。

附：preventDefault与return false 的区别  http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false