ES6 一共有 5 種方法可以遍歷對(duì)象的屬性绢淀。
(1)for...in
for...in
循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)晦攒。
(2)Object.keys(obj) ie9
Object.keys
返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名付呕。
(3)Object.getOwnPropertyNames(obj) ie9
Object.getOwnPropertyNames
返回一個(gè)數(shù)組奥裸,包含對(duì)象自身的所有屬性(不含 Symbol 屬性,但是包括不可枚舉屬性)的鍵名嗜价。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols
返回一個(gè)數(shù)組,包含對(duì)象自身的所有 Symbol 屬性的鍵名幕庐。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys
返回一個(gè)數(shù)組久锥,包含對(duì)象自身的(不含繼承的)所有鍵名,不管鍵名是 Symbol 或字符串异剥,也不管是否可枚舉瑟由。
以上的 5 種方法遍歷對(duì)象的鍵名,都遵守同樣的屬性遍歷的次序規(guī)則冤寿。
- 首先遍歷所有數(shù)值鍵歹苦,按照數(shù)值升序排列。
- 其次遍歷所有字符串鍵疚沐,按照加入時(shí)間升序排列暂氯。
- 最后遍歷所有 Symbol 鍵,按照加入時(shí)間升序排列亮蛔。
? 其中兼容性最好的是for... in來(lái)進(jìn)行遍歷,因?yàn)槲覀兺ǔV恍枰闅v對(duì)象自身?yè)碛械膶傩?所以使用 Object.prototype.hasOwnProperty() 兼容到ie5.5 方法來(lái)排除繼承的屬性
for (var key in targetObj) {
if (Object.prototype.hasOwnProperty.call(targetObj, key)){
//對(duì)篩選出的對(duì)象自身?yè)碛械膋ey進(jìn)行處理
}
}
注意:即使屬性的值是 null
或 undefined
擎厢,只要屬性存在究流,hasOwnProperty
依舊會(huì)返回 true
。
?
? 如果不在意兼容性問(wèn)題动遭,用keys方法芬探,搭配for... of來(lái)遍歷也不錯(cuò),厘惦、
? for...of是es6引入的用于遍歷可迭代對(duì)象的語(yǔ)法偷仿,相當(dāng)于python里的for in。
? js的for...in別扭的地方在于宵蕉,遍歷數(shù)組和對(duì)象都是返回的key值酝静,遍歷數(shù)組是下標(biāo)值。for...of遍歷數(shù)組會(huì)返回每一個(gè)值羡玛,跟foreach類(lèi)似的效果别智,但是對(duì)于對(duì)象,只支持實(shí)現(xiàn)了迭代器的對(duì)象稼稿。
for (const key of Object.keys(targetObj)) {
//對(duì)遍歷到的key值進(jìn)行處理
}