关于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 不反对异步转同步

本质区别：

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

遍历：指的对数据结构的每一个成员进行有法则的且为一次拜访的行为。

迭代 ：迭代是递归的一种非凡模式，是迭代器提供的一种办法，默认状况下是依照肯定程序 一一 拜访数据结构成员。

<u> 特地提醒 </u>

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