1. 程式人生 > >JavaScript——for…… in……迴圈效能問題

JavaScript——for…… in……迴圈效能問題

問題:

使用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() ]