详解JS的for循环

for

let arr1 = [1, 2, 3];
arr1['name'] = 'l'
for (let i = 0, len = arr1.length; i < len; i++) {
  console.log(i, arr1[i]);
}

for循环可以使用break和continue

for in

• for-in 只能遍历“可枚举的属性” 可以使用查看是否可枚举Object.getOwnPropertyDescriptor(object,property)
• 它实际上遍历的是对象的属性，而不是“索引值”， 所以for in可以遍历对象
• 遍历原型上的属性(可以配合 Object.hasOwnProperty())
• for in遍历的顺序并不确定
• 性能：每次迭代操作会同时搜索实例或者原型属性， for-in 循环的每次迭代都会产生更多开销，因此要比其他循环类型慢

Array.prototype.age = 20;
for (let key in arr1) {
    console.log(`arr1[${key}] = ${arr1[key]}`);
}
console.log(arr1.hasOwnProperty('age'));

forEach

• forEach 方法为数组中含有有效值的每一项执行一次 callback 函数
• 那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）
• 不能使用break 和 continue
• forEach 的速度不如 for

arr1[4];
arr1.forEach((item,index,arr1) => {
    console.log(item,index,arr1);
})

看🌰：mac电脑、chrome浏览器的执行环境下

console.time('for');
for(let i = 0; i< 100000 ;i++){
    console.log(i);
}
console.timeEnd('for');//耗时约8.5s

arr = new Array(100000).fill(0);
console.time('foreach');
arr.forEach((item,index) => {
    console.log(index);
})
console.timeEnd('foreach');//耗时约10.34s

for of

• for of 是用来遍历可迭代对象的，js 引擎是通过判断对象是否具有 Symbol.iterator 来判断的，

  • [][Symbol.iterator]
  • {}[Symbol.iterator]

• 迭代器：有next()方法的对象，next()方法返回：done和value，done标示是否遍历完，value就是当前的值

• 跟 forEach 相比，它可以正确响应 break, continue, return。

• for-of 循环不仅支持数组，还支持大多数类数组对象，例如 DOM nodelist 对象。

• for-of 循环也支持字符串遍历，它将字符串视为一系列 Unicode 字符来进行遍历

• for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in 循环

for (let [item,index] of arr1.entries()) {
  console.log(item,index,'===========for of');
}

既然知道了for of的工作原理，那么我们是否可以手动实现一个功能，让对象可以被for of遍历呢？

function* createIterator(obj){
  let propKeys = Reflect.ownKeys(obj);

  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}

const obj = {
  name:'kaka',
  age:24
}

for(let [key,value] of createIterator(obj)){
  console.log(key,value,'=========forof');
}