JS对象遍历 追求理想最优解

对比10种遍历方式 ，精选以下四种遍历以应对大部分情况

姐妹篇 —— JS数组遍历 追求理想最优解

1. Object.keys() + forEach 推荐

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.keys(obj).forEach(key =>{
   console.log(key,obj[key])   // a 1 , b 2 ,c 3
})

2. for in 基础

const obj = {
  a: 1,
  b: 2,
  c: 3
};
for (const key in obj) {
    if (obj.hasOwnProperty(key)) {  // 过滤原型链上的属性
        console.log(key,obj[key])   // a 1 , b 2 ,c 3
    }
}

3. Object.entries() + forEach

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.entries(obj).forEach(([key,value], index) => {
   console.log(key,value,index)    // a 1 0 , b 2 1 , c 3 2
})

4. Object.entries() + for of

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (let [key, value] of Object.entries(obj)) {
    if (value === 2) {
        break        // a 1
        continue     // a 1 , c 3
    }
    console.log(key, value)
}

break 跳出循环
continue 跳过本次 

效率对比

遍历方式	耗时
Object.keys() + forEach	2000ms
for in	2099ms
Object.entries() + forEach	7200ms
Object.entries() + for of	8200ms

总结

1. Object.keys() + forEach 可阅读性高，性能均衡，推荐
2. for in 可阅读性高，性能均衡，推荐
3. Object.entries() + forEach 效率低
4. Object.entries() + for of 效率低,可以 跳出循环 和 跳出本次

姐妹篇 —— JS数组遍历 追求理想最优解