建站
咨詢
售后
建站咨詢
新聞中心
最前面
本文主要是對 JS 對象(不含數(shù)組、Map、Set 結(jié)構(gòu))的 7個(gè)遍歷方法進(jìn)行總結(jié)歸納，寫該文章的這天恰好是我最喜愛的球星艾弗森的 45 周歲生日，因此本文會(huì)以艾弗森的基本資料為模板生成一個(gè) JS 對象并對其進(jìn)行遍歷 。
創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為白銀企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，白銀網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
定義對象
首先讓我們定義如以下代碼所示的對象 player：
- const player = {
- name: 'Allen Iverson',
- [Symbol('birthday')]: '1975/06/07',
- };
- Object.defineProperties(player, {
- isHallofFame: {
- enumerable: false,
- value: true,
- },
- [Symbol('ScoreKingTime')]: {
- enumerable:false,
- value: 4,
- },
- });
- Object.defineProperties(player.__proto__, {
- university: {
- enumerable: true,
- value: 'Georgetown',
- },
- team: {
- enumerable: false,
- value: '76ers',
- },
- [Symbol('country')]: {
- enumerable: true,
- value: 'USA',
- },
- [Symbol('hometown')]: {
- enumerable: false,
- value: 'Virginia',
- },
- });
如上述代碼所示，定義了一個(gè) player 的對象，其共有以下 8 個(gè)屬性：
通過控制臺(tái)的輸出觀察也更直觀：
其中淺顏色的屬性都是不可枚舉的屬性，__proto__下的屬性則為其原型上(即 Object.prototype)的屬性，Symbol 類型的值自然為 Symbol 屬性
for...in
MDN：The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.
- for(const name in player) {
- console.log('name:', name);
- }
- // name: name
- // name: university
for...in 循環(huán)是我們較為常用的遍歷對象方法了，結(jié)合 MDN 里所言以及輸出結(jié)果不難得出其遍歷的屬性，包含自身以及原型上所有可枚舉的屬性，不包含 Symbol 屬性。因?yàn)槠淇杀闅v到原型上可枚舉的屬性，因此我們的代碼中通常會(huì)多出一句這樣的判斷(如果我們不需要原型上的屬性)：
- for(const name in player) {
- if (Object.prototype.hasOwnProperty.call(player, name)) {
- console.log('name:', name);
- }
- }
- // name: name
Object.keys
MDN：The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.
- const keys = Object.keys(player);
- console.log('keys:', keys);
- // keys: ["name"]
Object.keys 大概是我們最常用的遍歷方法了，如在 Vue 源碼對 data 進(jìn)行遍歷響應(yīng)式處理也是用這個(gè)方法。通過輸出結(jié)果也表明：其返回的是所有自身可枚舉的屬性(不含 Symbol 屬性)，不包含原型上的任何屬性。
Object.getOwnPropertyNames
MDN：The Object.getOwnPropertyNames() method returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.
- const ownPropertyNames = Object.getOwnPropertyNames(player);
- console.log('ownPropertyNames:', ownPropertyNames);
- // ownPropertyNames: ["name", "isHallofFame"]
Object.getOwnPropertyNames 返回的是所有自身的屬性(包含不可枚舉屬性但不包含 Symbol 屬性)，不包含原型上的任何屬性。
Object.getOwnPropertySymbols
MDN：The Object.getOwnPropertySymbols() method returns an array of all symbol properties found directly upon a given object.
- onst ownPropertySymbols = Object.getOwnPropertySymbols(player);
- console.log('ownPropertySymbols:', ownPropertySymbols);
- // ownPropertySymbols: [Symbol(birthday), Symbol(ScoreKingTime)]
通過輸出不難得出 Object.getOwnPropertySymbols 返回的是自身的所有 Symbol 屬性(包含不可枚舉的)，但是不含原型上的任何屬性。
Reflect.ownKeys
MDN：The static Reflect.ownKeys() method returns an array of the target object's own property keys.
- const ownKeys = Reflect.ownKeys(player);
- console.log('ownKeys:', ownKeys)
- // ownKeys: ["name", "isHallofFame", Symbol(birthday), Symbol(ScoreKingTime)]
Reflect.ownKeys 返回的是自身的所有屬性(包含不可枚舉的以及所有 Symbol 屬性)，不包含原型 上的任何屬性。
Object.values
MDN：The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. (The only difference is that a for...in loop enumerates properties in the prototype chain as well.)
- const values = Object.values(player);
- console.log('values:', values);
- // values: ["Allen Iverson"]
Object.values 同 Object.keys 一樣，其遍歷的是所有自身可枚舉的屬性(不含 Symbol 屬性)，不包含原型上的任何屬性。但與 Object.keys 不同的是：其返回的不再是 key 值而是 value 值集合。
Object.entries
MDN: The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. (The only important difference is that a for...in loop enumerates properties in the prototype chain as well).
- const entries =Object.entries(player);
- console.log('entries:', entries);
- // entries: [["name", "Allen Iverson"]]
其也同 Object.keys 一樣，遍歷的是所有自身可枚舉的屬性(不含 Symbol 屬性)，不包含原型上的任何屬性。不同的是，其返回值是 [key, value]的集合。Object.entries 在我們平時(shí)的開發(fā)中可能很少用到，但是其可配合Object.fromEntries一起使用：有以下代碼：
- // 對象轉(zhuǎn)換
- const object1 = { a: 1, b: 2, c: 3 };
- const object2 = Object.fromEntries(
- Object.entries(object1)
- .map(([ key, val ]) => [ key, val * 2 ])
- );
- console.log(object2);
- // { a: 2, b: 4, c: 6 }
總結(jié)
結(jié)合文章中的代碼輸出結(jié)果可得到以下表格：
簡而言之：
- 只有 for...in 可以遍歷到原型上的屬性
- Object.getOwnPropertyNames 和 Reflect.ownKeys 可獲取到不可枚舉的屬性
- Object.getOwnPropertySymbols 和 Reflect.ownKeys 可獲取到 Symbol 屬性
本文題目：JS對象遍歷知多少？
網(wǎng)址分享：http://www.5511xx.com/article/coeoedh.html
