调整字号

七个 JavaScript 基本技巧

本文翻译自Tech.Pro

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"

每一个开发者都在这里犯过错——所以要学会这两个标志!

2.类数组对象与 Array.prototype.slice

数组的 slice 方法主要是用来从一个数组中截取一段下了,而许多人没有注意到它也可以用来将类数组的对象比如 argumentsNodeList 等对象转换为真的数组:

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.事件的 preventDefaultstopPropagation

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

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

    // Do more stuff
});

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

老手们也许会说“这些我都知道”,但偶尔还是会栽跟头,所以,时刻注意小细节,否则它们也能惹出大问题。

评论(1条)

scrat 2013年10月1日 , 0:32

踩踩

flight