JavaScript forEach() 方法的使用及其注意事项

夜不眠，码三千

已于 2023-11-19 18:15:25 修改

阅读量2.4k

点赞数 11

文章标签： javascript 开发语言前端

于 2023-11-19 18:02:40 首次发布

本文链接：https://blog.csdn.net/m0_74064480/article/details/134492439

版权

1、JavaScript forEach() 的作用与原理

作用：遍历数组、集合。

原理：用于调用数组的每个元素，并将元素传递给回调函数。

2、语法

array.forEach(callbackFn(currentValue, index, arr), thisValue)

其他形式的语法格式：

// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)

3、语法分析

array:被遍历的数组名

forEach:forEach方法的方面名

callbackFn:数组中每个元素需要调用的函数。(必选)

currentValue:当前元素（必选）

index:当前元素的索引值（可选）

arr:当前元素的所属的数组对象（可选）

thisValue:传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值（可选）

4、实际应用

代码演示

<body>
    <p id="demo"></p>
    <script>
      //获取元素对象
      demo = document.getElementById("demo");
      //声明一个被遍历的数组
      let numbers = [3, 8, 2, 9];
      //应用forEath语法遍历
      numbers.forEach(function (item, index) {
        //获取元素对象的内容，并放入被遍历的值
        demo.innerHTML =
          demo.innerHTML + "index[" + index + "]: " + item + "<br>";
      });
    </script>
  </body>

效果图

5、注意事项

foreach语句是for语句的特殊简化版本，但是foreach语句并不能完全取代for语句，然而，任何的foreach语句都可以改写为for语句版本

foreach并不是一个关键字，习惯上将这种特殊的for语句格式称之为“foreach”语句。从英文字面意思理解foreach也就是“for 每一个”的意思

await 不能用在 forEach 中：原因：那就是 forEach 只支持同步代码

forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效

forEach(): 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数。即map是返回一个新数组，原数组不变，forEach 是不改变原数组（尽管回调函数 callbackFn 在被调用时可能会改变原数组）

不支持 continue，用 return false 或 return true 代替

不支持 break，用 try catch/every/some 代替
实现continue：
var arr = [1,2,3,4,5];
var num = 3;
arr.some(function(v){
    if(v == num) {
        return;  // 
    }
    console.log(v);
});
实现break：
var arr = [1,2,3,4,5]; 
var num = 3; 
arr.every(function(v){
    if(v == num) {
        return false;
    }else{ 
        console.log(v); 
        return true;
    }
});
try {
    var array = ["first","second","third","fourth"];        // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);// first,sencond
    }); 
} catch(e) { 
    if(e.message!="EndIterative") throw e; 
};

6、总结

forEach实用性：

建议：尽量不要使用forEach；

原因：其实也简单，就是为了避免GC，因为forEach会“偷偷”申请内存，使用过度的话自然会引发系统的垃圾收集！

鉴此，建议大家平日尽量限制使用foreach，转而使用for之类的循环控制语法，尤其注意一下Update（或者说频繁调用的函数）中的foreach使用，不小心的话确实会导致频繁

GC

个人总结：

虽然forEach遍历的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率，但是forEach不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数。