ES6中forEach方法

喜欢ヅ旅行 2022-06-14 09:13 201阅读 0赞

本文引用地址：http://www.zhangxinxu.com/wordpress/?p=3220。感谢博主。

forEach  
`forEach`是Array新方法中最基本的一个，就是遍历，循环。例如下面这个例子：

[1, 2 ,3, 4].forEach(alert);

等同于下面这个传统的`for`循环：

var array = [1, 2, 3, 4];
    
    for (var k = 0, length = array.length; k < length; k++) {
      alert(array[k]);
    }

Array在ES5新增的方法中，参数都是`function`类型，默认有传参，这些参数分别是？见下面：

[1, 2 ,3, 4].forEach(console.log);
    
    // 结果：
    
    // 1, 0, [1, 2, 3, 4]
    // 2, 1, [1, 2, 3, 4]
    // 3, 2, [1, 2, 3, 4]
    // 4, 3, [1, 2, 3, 4]

![用来判断参数个数以及内容的测试输出截图 张鑫旭-鑫空间-鑫生活][_-_-]

显而易见，`forEach`方法中的`function`回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。

因此，我们有：

[].forEach(function(value, index, array) {
        // ...
    });

对比[jQuery][]中的`$.each`方法：

$.each([], function(index, value, array) {
        // ...
    });

会发现，第1个和第2个参数正好是相反的，大家要注意了，不要记错了。后面类似的方法，例如`$.map`也是如此。

现在，我们就可以使用`forEach`卖弄一个稍显完整的例子了，数组求和：

var sum = 0;
    
    [1, 2, 3, 4].forEach(function (item, index, array) {
      console.log(array[index] == item); // true
      sum += item;
    });
    
    alert(sum); // 10

再下面，更进一步，`forEach`除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数（改变回调函数里面的`this`指向）（第2个参数）。

array.forEach(callback,[ thisObject])

例子更能说明一切：

如果这第2个可选参数不指定，则使用全局对象代替（在浏览器是为window），严格模式下甚至是undefined.  
  
另外，forEach不会遍历纯粹“占着官位吃空饷”的元素的，例如下面这个例子：

var array = [1, 2, 3];
    
    delete array[1]; // 移除 2
    alert(array); // "1,,3"
    
    alert(array.length); // but the length is still 3
    
    array.forEach(alert); // 弹出的仅仅是1和3

综上全部规则，我们就可以对IE6-IE8进行仿真扩展了，如下代码：

// 对于古董浏览器，如IE6-IE8
    
    if (typeof Array.prototype.forEach != "function") {
      Array.prototype.forEach = function (fn, context) {
        for (var k = 0, length = this.length; k < length; k++) {
          if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
            fn.call(context, this[k], k, this);
          }
        }
      };
    }

现在拿上面“张含韵”的例子测下我们扩展的`forEach`方法，您可能狠狠地点击这里：[兼容处理的forEach方法demo][forEach_demo]

例如IE7浏览器下：  
![IE7下forEach方法测试结果截图 张鑫旭-鑫空间-鑫生活][IE7_forEach_ _-_-]

[_-_-]: /images/20220614/fc4efffd88e346af8adc56e85bf3d7ca.png
[jQuery]: http://lib.csdn.net/base/jquery
[forEach_demo]: http://www.zhangxinxu.com/study/201304/array-foreach.html
[IE7_forEach_ _-_-]: /images/20220614/13d9a86e93604465a52b93153bbe612e.png