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方法,带大家看看迭代器是个啥玩意

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容