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下的结果截图 )：