JS循环大总结， for, forEach，for in，for of, map区别

小白阿斯兰

2021-07-10 11,601 阅读2分钟

map（数组方法）：

特性：

map不改变原数组但是会返回新数组
可以使用break中断循环，可以使用return返回到外层函数

实例：

let newarr=arr.map(i=>{
return i+=1;
console.log(i);
})
console.log(arr)//1,3,4---不会改变原数组
console.log(newarr)//[2,4,5]---返回新数组

forEach（数组方法）：

特性：

便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的概率。
没有返回值
不能使用break中断循环，不能使用return返回到外层函数

实例：

let newarr=arr.forEach(i=>{
 i+=1;
console.log(i);//2,4,5
})
console.log(arr)//[1,3,4]
console.log(newarr)//undefined

注意：

forEach() 对于空数组是不会执行回调函数的。
for可以用continue跳过循环中的一个迭代，forEach用continue会报错。
forEach() 需要用 return 跳过循环中的一个迭代，跳过之后会执行下一个迭代。

for in(大部分用于对象)：

用于循环遍历数组或对象属性

特性：

可以遍历数组的键名，遍历对象简洁方便 ###实例：

   let person={name:"小白",age:28,city:"北京"}
   let text=""
   for (let i in person){
      text+=person[i]
   }
   输出结果为：小白28北京
//其次在尝试一些数组
   let arry=[1,2,3,4,5]
   for (let i in arry){
        console.log(arry[i])
    }
//能输出出来，证明也是可以的

for of（不能遍历对象）：

特性：

（可遍历map，object,array,set string等）用来遍历数据，比如组中的值
避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象。

   let arr=["nick","freddy","mike","james"];
    for (let item of arr){
        console.log(item)
    }
//暑促结果为nice freddy mike james
//遍历对象
   let person={name:"老王",age:23,city:"唐山"}
   for (let item of person){
        console.log(item)
    }
//我们发现它是不可以的
//但是它和forEach有个解决方法，结尾介绍

总结：

forEach 遍历列表值,不能使用 break 语句或使用 return 语句
for in 遍历对象键值(key),或者数组下标,不推荐循环一个数组
for of 遍历列表值,允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等.在 ES6 中引入的 for of 循环，以替代 for in 和 forEach() ，并支持新的迭代协议。
for in循环出的是key，for of循环出的是value；
for of是ES6新引入的特性。修复了ES5的for in的不足；
for of不能循环普通的对象，需要通过和Object.keys()搭配使用。

友情链接：