JavaScript——for…… in……循环性能问题

JS循环优化与属性遍历

最新推荐文章于 2024-12-25 09:30:00 发布

原创最新推荐文章于 2024-12-25 09:30:00 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#循环性能问题

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了JavaScript中不同循环方法的特点与优化策略，对比了for...in循环、Object.keys()、Object.getOwnPropertyNames()及Reflect.ownKeys()在属性遍历上的差异，强调了在特定场景下选择合适方法的重要性。

问题：

使用for……in……循环会遍历原型链所有的可枚举属性，如果你的目的不是需要所有属性，会造成不必要的循环

const div =document.createElement('div')
let m =0
for (let k in div){
    m++
} 
console.log(m) //235
console.log(Object.keys(div).length)  //0

优化：

除了用for……in……可以获取 obj 中的 key 值，还可以使用 Object.key() 获取，Object.getOwnPropertyNames() 以及Reflect.ownKeys() 也可以获取，for……in…… 循环：会遍历对象自身的属性以及原形属性，for……in…… 循环只遍历可枚举属性（不包括 enumerable 为 false 的属性）。像 Array 和 Object 使用内置构造函数所创造的对象会继承自Object.prototype 和String.prototype 的不可枚举属性

const parent = {
  a: 1,
  b: 2,
  c: 3
};
const child = {
  d: 4,
  e: 5,
  [Symbol()]: 6
};
child.__proto__ = parent;
Object.defineProperty(child, "d", { enumerable: false });//设置child对象中的d属性为不可枚举
for (var attr in child) {
  console.log("for...in:", attr);// a,b,c,e
}
console.log("Object.keys:", Object.keys(child));// [ 'e' ]
console.log("Object.getOwnPropertyNames:", Object.getOwnPropertyNames(child)); // [ 'd', 'e' ]
console.log("Reflect.ownKeys:", Reflect.ownKeys(child)); // [ 'd', 'e', Symbol() ]