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循环