ECMAScript5新增Array方法forEach的实现

前言

最近又开始变懒了，一个多星期没写blog了，负罪感油然而生。最近一直在看JavaScript高级程序设计一书，其中关于数组部分，ES5新增了5个迭代方法：every()、filter()、forEach()、map()、some()。每个方法都接收两个参数：要在每一项上运行的函数和(可选的)运行该函数的作用域对象。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。大概用法的结构如下：

// 这里是对于forEach的例子
[1, 2, 3, 4].forEach(function(item, index, array) {
// do something
});

虽然这些方法用起来很方便，但是遗憾的是浏览器的支持情况不太好，尤其对于IE系列版本，IE6-8都不支持，具体的浏览器支持情况如下：

Opera 11+

Firefox 3.6+

Safari 5+

Chrome 8+

Internet Explorer 9+

forEach的使用

ES5对forEach方法的描述是这样的：对数组中的每一项运行给定函数，并且该方法没有返回值，作用是对数组进行遍历、循环。

如下例子所示：

var numbers = [1, 2, 3, 4];
numbers.forEach(function(item, index, array) {
console.log(item + "\t" + index + "\t" + array);
});

firefox下结果：



在Array原型上扩展forEach

针对以上情况，为了使得ES5新增的数组迭代方法兼容主流浏览器(包括低版本)，我们可以在Array原型上扩展这些方法，例如

forEach

方法:

// 特别是针对IE6、7、8
if (typeof Array.prototype.forEach !== "function") {
Array.prototype.forEach = function () {
// 代码主体
};
}

基于以上情况，我们可以对forEach进行扩展了，js代码：

/**
* 数组遍历
* @param {Array|NodeList}
* @param {Function}  遍历执行方法，执行方法中返回false值，则停止继续遍历
* @param {Object} [scope] 执行方法的this指针
*/
if (!Array.prototype.forEach && typeof Array.prototype.forEach !== "function") {
Array.prototype.forEach = function(callback, context) {
// 遍历数组,在每一项上调用回调函数，这里使用原生方法验证数组。
if (Object.prototype.toString.call(this) === "[object Array]") {
var i,
len;
for (i = 0, len = this.length; i < len; i++) {
if (typeof callback === "function"  && Object.prototype.hasOwnProperty.call(this, i)) {
if (callback.call(context, this[i], i, this) === false) {
break; // or return;
}
}
}
}
};
}

使用时请注意参数的含义以及各参数的顺序：

demo1：不传入context作用域环境

// 遍历数组
[1, 2, 3, 4].forEach(function(value, index, array) {
console.log(value, index, array);
});

firefox下结果(注：其他浏览器都已测试通过，这里只是提供FF下的结果截图)：



demo2：传入context作用域环境

// 遍历数组，并在特定作用域中调用callback
var data = {
names: ["张三", "李四", "王五"],
sayName: function(name) {
if (/^王/.test(name)) {
console.log("hello：" + name);
} else {
console.log("sorry：" + name + "，你不是本人！");
}
}
};
data.names.forEach(data.sayName, data);

firefox下结果(注：其他浏览器都已测试通过，这里只是提供FF下的结果截图)：



到此forEach方法已经实现完毕，其他的迭代方法也是基于该forEach方法实现的，这里暂时不介绍，下次再补上。

结语

╮(╯▽╰)╭，快十一点了，明天还要上课，今天就到此为止啦，吃夜宵去。