值得注意的7个 JavaScript 技巧

JavaScript 本质上是种简单的语言，在其之上发展出了一些智能、灵活的模式，我们将这些模式融入了 JavaScript 框架中，来帮助 Web 应用的开发。但是许多刚入门的开发者太依赖框架，忽视了一些非常有用的 JavaScript 技巧，以下就列出其中的 7 个，用这些技巧来处理一些基本任务非常合适：

1.String.prototype.replace: /g 和 /i 标志

许多 JavaScript 新手都搞不懂字符串的 replace 方法，它不替换所有匹配的子字符串，而是只替换了第一个。当然，有经验的人会知道应该在这里用一个正则表达式并加上全局标志（/g）：

// 错误
var 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.prototype.slice

数组的 slice 方法主要是用来从一个数组中截取片段，而许多人没有注意到它也可以用来将类似数组的对象比如 arguments，NodeList 对象等转换为真正的数组：

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // 所有 DIV 元素组成的数组
var argsArr = Array.prototype.slice.call(arguments); // 把 arguments 对象转换为真正的数组
// 注：这个技巧不适合 IE8 以及之前的版本，会报错，因为它们的 NodeList 对象是利用 COM 实现的，不是真正的 JavaScript 对象

你也可以调用 slice 来克隆一个对象：

var clone = myArray.slice(0);

Array.prototype.slice 在 JavaScript 的世界里是一个不折不扣的好东东，甚至有些老手也并不熟悉它。

3.Array.prototype.sort

很多人也没有充分利用数组的 sort 方法，它的用途其实比想象中的要多。许多开发者以为sort 方法只是用来干这个的：

[1, 3, 9, 2].sort(); // 返回 [1, 2, 3, 9]

不过它也有更强大的用法，像下面这样：

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // 升序排列
    return obj1.age - obj2.age;
});
    // 返回值:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

你可以根据某个属性来将一组对象排序，而不单单是对一些简单值。如果在某个项目中，服务器返回一组 JSON 数据并且你需要对其中的对象排序，记得试试这个方法！

4.用 length 属性来截断数组

JavaScript 中的对象是引用传递，许多人在这上面都犯过错误。有些人想要清空一个数组，经常就新建一个：

var myArray = yourArray = [1, 2, 3];

//  
myArray = []; // "yourArray" 仍然是 [1, 2, 3]

// 正确方法
myArray.length = 0; // "yourArray" 和 "myArray" 都是 []

对象是通过引用来传递的，所以当 myArray 被设为 [] 时其实是创建了一个新数组，但其他变量还保持着对原数组的引用，这是一个 big mistake！

5.用 push 方法合并数组

在第 2 条中讲过，数组的 slice 配合 apply 用起来非常酷，其实数组的别的方法也不赖，这次我们用 push 来合并数组：

var mergeTo = [4,5,6],
var mergeFrom = [7,8,9];

Array.prototype.push.apply(mergeTo, mergeFrom);

mergeTo; //  [4, 5, 6, 7, 8, 9]

一个简单的方法完成数组合并，很少有人知道。

6.高效的特性检测 / 对象属性检测

常常有人用下面的方法来探测浏览器特性：

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

这种方法尽管可以，但有时并不高效，因为相当于访问了对象的该属性，所以浏览器可能进行一些初始化工作。在一些老的浏览器中还会引发内存泄漏。所以更有效的办法是检查对象中的键是否存在：

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

7.事件的 preventDefault 和 stopPropagation

我们常常要在某个链接被点击以后触发一些功能，而不需要浏览器跳转到该链接，一般我们会用 JS 库中的 Event.stop 等类似方法：

$("a.trigger").on("click", function(e) {
    e.stop();

    // Do more stuff
});

这种懒人方法有一个问题，就是它不仅阻止默认行为，同时也会阻止事件冒泡，这意味着上层的监听器不会接收到事件，更不会触发相应的动作。所以最好还是乖乖地使用preventDefault 方法。

JavaScript 老手们看了可能会说，“这些我都知道”，但偶尔也还会在这些地方栽跟头。所以还是时刻注意小细节吧，毕竟它们也会惹出大问题。

原文地址：http://pandacafe.net/blog/513