Javascript数组循环遍历之forEach详解

### Javascript数组循环遍历之forEach详解 #### 1. JavaScript数组循环遍历基础 在JavaScript中，循环遍历数组是常见的操作，传统的方式是使用for循环，例如： ```javascript var count = arr.length; for(var i = 0; i < count; i++){ // 对数组arr的第i个元素执行操作 } ``` 然而，除了for循环外，现代JavaScript提供了更为简洁和高级的数组遍历方法：`forEach`。`forEach`方法为每个数组元素执行一次提供的函数，不返回任何值。 #### 2. forEach函数使用 `forEach` 方法是Firefox和Chrome中的Array类型的方法，使用方法如下： ```javascript 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); ``` 然而，需要注意的是，`forEach` 方法并不是所有的浏览器都支持。尤其是IE浏览器，在IE中Array没有`forEach`方法。因此，若需要在IE中使用`forEach`，需要手动进行兼容性处理。 #### 3. 兼容IE的forEach方法 为了在IE浏览器中使用`forEach`方法，可以通过为Array的原型添加方法的方式实现： ```javascript 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; 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++; } }; } ``` 通过上述代码，可以为Array添加一个`forEach`方法，使其在IE浏览器中也可以使用。 #### 4. 如何跳出forEach循环 使用`forEach`进行数组遍历时，由于没有直接提供`break`和`continue`语句，因此不能像传统的for循环那样直接跳出循环。然而，可以通过以下两种方式间接达到跳出循环的目的： - **通过`if`语句控制**：在`forEach`的回调函数中，通过`if`语句来跳过某些元素的处理，从而实现类似于`continue`的效果。 ```javascript arryAll.forEach(function(e) { if (e % 2 !== 0) { return; } // 只处理偶数 alert(e); }); ``` - **通过返回`true`或`false`**：`forEach`的回调函数可以返回一个布尔值，`true`表示跳过当前元素，`false`则继续执行。但这种方式在大多数情况下并不适用，因为`forEach`默认行为是遍历数组的每一个元素。 ```javascript arryAll.forEach(function(e) { if (e % 2 !== 0) { return false; } // 只处理偶数 alert(e); }); ``` 通过上述方法，即使在`forEach`中不能使用`break`和`continue`语句，我们依然可以灵活地控制遍历过程，实现复杂的逻辑。 总结而言，`forEach`提供了一种简洁有效的方式来遍历数组，虽然它的兼容性与控制流跳转不如传统的`for`循环灵活，但在现代JavaScript开发中，它是处理数组元素遍历的首选方法。对于不支持`forEach`的老旧浏览器，我们可以通过扩展Array原型的方式来提供支持，从而确保跨浏览器的一致性。