JS 5種遍歷物件的方式

2021-10-14 17:46:04 字數 3244 閱讀 3554

幾天前乙個小夥伴問我object.getownpropertynames()是幹什麼用的

平時還真沒有使用到這個方法,一時不知如何回答

從方法名稱來分析,應該是返回的是物件自身屬性名組成的陣列

那和object.keys()方法不就一樣了嗎

感覺事情並不這麼簡單,於是我仔細看了一下這幾種遍歷物件的方法的區別

for in

for in 迴圈是最基礎的遍歷物件的方式,它還會得到物件原型鏈上的屬性

// 建立乙個物件並指定其原型,bar 為原型上的屬性

const obj = object.create()

// foo 為物件自身的屬性

obj.foo ='foo'

for(let keyinobj)

可以看到物件原型上的屬性也被迴圈出來了

在這種情況下可以使用物件的hasownproperty()方法過濾掉原型鏈上的屬性

for(let keyinobj)

}

這時候原型上的 bar 屬性就被過濾掉了

object.keys

object.keys()是 es5 新增的乙個物件方法,該方法返回物件自身屬性名組成的陣列,它會自動過濾掉原型鏈上的屬性,然後可以通過陣列的foreach()方法來遍歷

object.keys(obj).foreach((key) => )

另外還有object.values()方法和object.entries()方法,這兩方法的作用範圍和object.keys()方法類似,因此不再說明

for in 迴圈和object.keys()方法都不會返回物件的不可列舉屬性

如果需要遍歷不可列舉的屬性,就要用到前面提到的object.getownpropertynames()方法了

object.getownpropertynames

object.getownpropertynames()也是 es5 新增的乙個物件方法,該方法返回物件自身屬性名組成的陣列,包括不可列舉的屬性,也可以通過陣列的foreach方法來遍歷

// 建立乙個物件並指定其原型,bar 為原型上的屬性

// baz 為物件自身的屬性並且不可列舉

const obj = object.create(,

})

obj.foo ='foo'

// 不包括不可列舉的 baz 屬性

object.keys(obj).foreach((key) => )

// 包括不可列舉的 baz 屬性

object.getownpropertynames(obj).foreach((key) => )

es2015 新增了 symbol 資料型別,該型別可以作為物件的鍵,針對該型別 es2015 同樣新增object.getownpropertysymbols()方法

object.getownpropertysymbols

object.getownpropertysymbols()方法返回物件自身的 symbol 屬性組成的陣列,不包括字串屬性

object.getownpropertysymbols(obj).foreach((key) => )

什麼都沒有,因為該物件還沒有 symbol 屬性

// 給物件新增乙個不可列舉的 symbol 屬性

object.defineproperties(obj,

})

// 給物件新增乙個可列舉的 symbol 屬性

obj[symbol('foo')] ='symbol foo'

object.getownpropertysymbols(obj).foreach((key) => )

reflect.ownkeys

reflect.ownkeys()方法是 es2015 新增的靜態方法,該方法返回物件自身所有屬性名組成的陣列,包括不可列舉的屬性和 symbol 屬性

reflect.ownkeys(obj).foreach((key) => )

對比

方式基本屬性原型鏈不可列舉symbol

for in是是

否否object.keys()是否

否否object.getownpropertynames()是否

是否object.getownpropertysymbols()否否

是是reflect.ownkeys()是否

是是結論

這其中只有 for in 迴圈會得到物件原型鏈上的屬性,其它方法都只適用於物件自身的屬性

es 語言後續新增的新特性不會對以前的**產生***,比如在 es2015 之前就存在的 for in 迴圈,object.keys() 和 object.getownpropertynames() 是肯定不會返回 symbol 屬性的

您可能感興趣的文章:

js中遍歷物件(5種)和遍歷陣列(6種)的方法總結

一 遍歷物件方法 1.for.in 遍歷輸出的是物件自身的屬性以及原型鏈上可列舉的屬性 不含symbol屬性 原型鏈上的屬性最後輸出說明先遍歷的是自身的可列舉屬性,後遍歷原型鏈上的 eg var obj object.prototype.pro1 function 在原型鏈上新增屬性 object....

JS遍歷物件屬性的幾種方式

es6中 一共有 5 種方法可以遍歷物件的屬性。for.in for in 迴圈遍歷物件自身的和繼承的可列舉屬性 不含 symbol 屬性 object.keys 返回乙個陣列,包括物件自身的 不含繼承的 所有可列舉屬性 不含 symbol 屬性 的鍵名。陣列中屬性名的排列順序和使用 for.in ...

js 迴圈遍歷物件的幾種方式

1.v for迴圈 陣列 item index 物件 value key index 2.物件方法獲取key,value陣列 console.log object.keys obj console.log object.values obj 3.for in迴圈物件 object.prototype...