[JavaScript知识库]JavaScript中for循环和forEach的不同点原来有这么多

JavaScript中for循环和forEach的不同点原来有这么多！

在平时工作中，我们循环遍历数组的方式有很好几种，但是最常用的应该是for循环还有使用数组的forEach方法。

今天来充分对比一下两者的区别，各位请看好了。

首先我们定义两个数组

const arr1 = ['apply','call','bind']
const arr2 = ['apply','call','bind']

接下来使用不同的遍历方法运行不同的代码块，做一下对比

一、执行普通代码

for (let i = 0; i < arr1.length; i++) {
   console.log(arr1[i])
  }
arr2.forEach((item, index) => {
   console.log(item)
})

打印结果相同

二、代码中修改原数组

for (let i = 0; i < arr1.length; i++) {
   arr1[i] = arr1[i] + 1
}
console.log(arr1)
arr2.forEach((item, index) => {
   item = item + 1
})
console.log(arr2)

arr1发生改变，arr2不发生改变

三、代码中使用异步函数

console.log(new Date())
 for (let i = 0; i < arr1.length; i++) {
  setTimeout(() => {
   console.log(arr1[i])
   console.log(new Date())
  }, 3000)
}
// arr2.forEach((item, index) => {
//  setTimeout(() => {
//   console.log(item)
//   console.log(new Date())
//  }, 3000)
// })
console.log(new Date())

都是先打印第一个console，然后打印最后一个console，最后执行中间的

四、代码中使用await

function test() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(new Date())
        }, 3000)
      })
    }
    async function fn() {
      for (let i = 0; i < arr1.length; i++) {
        console.log(await test())
      }
    }
    fn()

间隔三秒打印

arr2.forEach(async (item, index) => {
   console.log(await test())
})

同时打印出来

五、代码中包含break

function test() {
   for (let i = 0; i < arr1.length; i++) {
?    console.log(arr1[i])
?    if (i === 1) {
?     break
?    }
   }
  }
  function test2() {
   arr2.forEach((item, index) => {
?    console.log(item)
?    // if (index === 1) {
?    //  break
?    // }
   })
  }
  test()
  test2()

不注释掉的话，会报错

六、代码中包含return

 function test() {
  for (let i = 0; i < arr1.length; i++) {
?    console.log(arr1[i])
?    if (i === 1) {
?     return
?    }
   }
  }
  function test2() {
   arr2.forEach((item, index) => {
?    console.log(item)
?    if (index === 1) {
?     return
?    }
   })
  }
  test()
  test2()

test函数执行时 return终止 test2函数执行时，遇到return没有终止

总结：

1.处理原数组时使用for循环。

2.forEach中不能使用break，不支持return

3.for循环可以实现间隔打印，也就是说forEach不支持异步转同步

本质区别：

前者是遍历，后者实际上是迭代

遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。

特别提示

对forEach回调函数的数组参数操作，原数组改变

var array=[1,2,3];
array.forEach(function(value,index,data){
    ++value;
    data.push(value);
});
console.log(array,"array");
// [1, 2, 3, 2, 3, 4] "array"

那么明天就来实现一下forEach方法，带大家看看迭代器是个啥玩意