ECMAScript5新增Array方法forEach的实现

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

使用时请注意 ：该方法的第一个参数和第二个参数刚好和ES5增加的forEach方法的参数相反，即 第一个参数 是 该项在数组中的位置 ， 第二个参数 是 数组项的值 。

demo1： 不传入context作用域环境

// 遍历数组
[1, 2, 3, 4].forEach(function(index ,value, array) {
console.log(index, value, 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下的结果截图 )：