for...in、forEach、for...of三种循环对比

for …of循环

ES6 引入了一种全新的遍历方式 for…of 循环，作为遍历所有数据结构的统一方式

创建一个obj对象和arr数组

const  obj = {
  name:"li",
  age:21,
  id:001
}
  
const arr = [11,22,33,44];

使用for…in 循环

//for...in 循环
for(var k in obj){
  console.log(obj[k]);
}

使用for…of循环

//for..of循环
for(let i of arr){
   console.log(i);
   if (i >= 33) {
    break;
   }
}

使用forEach循环，forEach循环从头到尾是没有办法停止的，不能break

//forEach循环    循环从头到尾没有办法停止，不能break
arr.forEach(i => {
   console.log(i);
});

在ES2015中，set对象、map对象、类数组对象都可以使用for…of，推荐使用for…of

const s = new Set([11,"a","223",445,66]);
for(const i of s){
   console.log(i);
}
  
const m = new Map();
m.set("name","li");
m.set("age",21);
// for(const i of m){
//     console.log(i);
// }
for(const [key,value] of m){
   console.log(key,value);
}

注意for…of 在遍历普通对象会报错obj对象不是迭代对象，所有遍历普通对象时建议还是用for…in循环