forEach

2023年06月17日

柏拉文

越努力，越幸运

一、认识

---

Array.prototype.forEach() 方法对数组的每个元素执行一次给定的函数。**Array.prototype.forEach()**不对未初始化的值进行任何操作。

Array.prototype.forEach() 运行过程中, 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

一个简单的 for 循环

for...of / for...in 循环

Array.prototype.every()

Array.prototype.some()

Array.prototype.find()

Array.prototype.findIndex()

二、语法

---

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

• callback: 为数组中每个元素执行的函数，该函数接收一至三个参数：
  • currentValue: 数组中正在处理的当前元素。
  • index(可选): 数组中正在处理的当前元素的索引。
  • array(可选): forEach() 方法正在操作的数组。
• thisArg(可选): 可选参数。当执行回调函数 callback 时，用作 this 的值。

三、返回值

---

undefined

const result = array.forEach(function(currentValue,index,arr){
  console.log(currentValue,index,arr);
});

console.log(result); // result 为 undefined

四、应用场景

---

• [1,,7].forEach(): 不对未初始化的值进行任何操作

  const array = [1,,,,,,,,7];
  array.forEach(function(currentValue,index,arr){
    console.log(currentValue,index,arr);
    // 结果如下: 只执行两次，但是 index 是根据索引来的
    // 1 0 (9) [1, empty × 7, 7]
    // 7 8 (9) [1, empty × 7, 7]
  });

五、综合对比

---

5.1 for-in vs for-of vs forEach vs Map

• map: 只能遍历数组,不能中断,返回值是修改后的数组;

• forEach: 只能遍历数组; 没有返回值(或认为返回值是undefined); 无法中途跳出forEach循环，break命令或return命令都不能奏效;

• for...in循环: 遍历获得键名,且遍历的结果都是字符串（尽管数组元素索引值为 Number 类型）; 遍历对象自身的和继承的可枚举的属性; 中途可以跳出循环;

• for...of循环: 遍历获得键值; 中途可以跳出循环; 提供了遍历所有数据结构的统一操作接口, 一个数据结构只要在Symbol.iterator属性上部署了Iterator接口, 就可以用for...of循环遍历它的成员;

六、原理(Polyfill)

---

Array.prototype.forEach = function (callback, thisArg) {
    if(this == null){
      throw new TypeError('this is null or not defined');
    }
    if(typeof callback !== 'function'){
      throw new TypeError('callback is not function');
    }
    var object = Object(this);
    var length = object.length >>> 0;
    var index = 0;
    while(index < length){
      if(index in object){
          var value = object[index];
          callback.call(thisArg,value,index,object);
      }
      index++;
    }
    return undefined;
};
const array = [1, 2, 3, 4, 5, , , , , , , , , 6, 7, 8];
array.forEach(function (value, index, arr) {
  console.log(value, index, arr); // 一共输出了 8 次
});