JavaScript数组forEach方法详解与IE兼容方案

作者：闭包旅人时间：2026-10-30 16:11:27浏览：570

本文详解JavaScript中Array的forEach方法，涵盖其基本用法、在Firefox和Chrome中的支持情况，以及针对IE浏览器缺失该方法时的兼容实现方案。重点讨论了forEach中无法使用break和continue的限制，并通过return语句模拟continue效果，同时探讨了实现类似break功能的难点。

JavaScript数组遍历基础

在JavaScript中，对数组进行循环遍历是常见的操作。

提到数组循环变量，大多数人首先想到的是传统的for循环写法，例如：for(var i=0; i<count; i++)。

除了传统方式，还可以使用更为简便的forEach方法。

forEach函数用法

关于forEach函数的具体应用。

Firefox和Chrome浏览器中的Array类型均提供了forEach函数，使用方式如下：


<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 

//匿名方式
arryAll.forEach(function(e){ 
  alert(e); 
}) 

function t1(arg){alert(arg);}
//非匿名方式
arryAll.forEach(t1,arryAll);

</script> 
</BODY> 
</HTML>

然而，上述代码在Internet Explorer（IE）浏览器中无法正常运行。

原因在于IE浏览器的Array对象中不存在该方法。


alert(Array.prototype.forEach);

执行相关检测代码会返回"undefined"，这证实了在IE中Array没有内置的forEach方法。

IE浏览器兼容方案

如何实现IE浏览器对forEach方法的兼容。

既然IE的Array原生不支持forEach，我们可以手动为其添加原型方法以实现兼容。


//Array.forEach implementation for IE support.. 
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
}

详细的实现原理可参考： https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

跳出循环的控制方法

如何在forEach循环中跳出或终止迭代？

在JavaScript的这种forEach用法中，不能直接使用continue和break语句，但可以使用以下两种方式处理：

1. 利用if语句进行条件控制。

2. 利用return语句进行控制（无论是return true还是return false）。

实际上，return语句的作用类似于continue。

以下示例展示了如何从数组中筛选出2的倍数和3的倍数：


<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
} 
 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6); 
arryAll.push(7); 
 
 
var arrySpecial = []; 
 
arryAll.forEach(function(e){ 
  if(e%2==0) 
  { 
    arrySpecial.push(e); 
  }else if(e%3==0) 
  { 
    arrySpecial.push(e); 
  } 
}) 
 
</script> 
</BODY> 
</HTML>

通过return语句实现上述筛选效果。


arryAll.forEach(function(e){ 
  if(e%2==0) 
  { www.jb51.net
    arrySpecial.push(e); 
    return; 
  } 
  if(e%3==0) 
  {   
    arrySpecial.push(e); 
    return; 
  } 
})

至于如何实现类似break的完全跳出循环效果，目前尚未找到较为理想的通用办法。

个人观点认为：无论是Java还是C#语法，forEach的设计初衷就是遍历所有值。

经搜索发现，有观点称return false可以实现跳出，但经过测试，return false的效果与直接return以及return true一致，均无法实现break功能。以下测试代码为自行补充。


var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6);
arryAll.push(7);

arryAll.forEach(function(e){
alert(e);
if(e>3)
return false;
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38