JavaScript——for…… in……迴圈效能問題
阿新 • • 發佈:2018-12-02
問題:
使用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() ]