JS中如何輕松遍歷對(duì)象屬性的方式總結(jié)
自身可枚舉屬性
Object.keys()
方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。如果對(duì)象的鍵-值都不可枚舉,那么將返回由鍵組成的數(shù)組。
這是合理的,因?yàn)榇蠖鄶?shù)時(shí)候只需要關(guān)注對(duì)象自身的屬性。
來(lái)看看一個(gè)對(duì)象擁有自身和繼承屬性的例子,Object.keys()
只返回自己的屬性鍵:
let simpleColors = { colorA: 'white', colorB: 'black' }; let natureColors = { colorC: 'green', colorD: 'yellow' }; Object.setPrototypeOf(natureColors, simpleColors); Object.keys(natureColors); // => ['colorC', 'colorD'] natureColors['colorA']; // => 'white' natureColors['colorB']; // => 'black'
Object.setPrototypeOf()
方法設(shè)置一個(gè)指定的對(duì)象的原型 ( 即, 內(nèi)部[[Prototype]]屬性)到另一個(gè)對(duì)象或 null。
Object.keys(natureColors)
返回natureColors對(duì)象的自身可枚舉屬性鍵: ['colorC','colorD']
。
natureColors包含從simpleColors原型對(duì)象繼承的屬性,但是Object.keys()函數(shù)會(huì)跳過(guò)它們。
Object.values()
和 Object.entries()
也都是返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組
// ... Object.values(natureColors); // => ['green', 'yellow'] Object.entries(natureColors); // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]
現(xiàn)在注意與for..in語(yǔ)句的區(qū)別,for..in不僅可以循環(huán)枚舉自身屬性還可以枚舉原型鏈中的屬性
// ... let enumerableKeys = []; for (let key in natureColors) { enumerableKeys.push(key); } enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']
enumerableKeys數(shù)組包含natureColors自身屬性鍵: 'colorC'和'colorD'。
另外for..in也遍歷了從simpleColors原型對(duì)象繼承的屬性
2. Object.values() 返回屬性值
Object.values()
方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組,值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。
來(lái)個(gè)例子,使用Object.keys()
收集keys,然后通過(guò) key 去對(duì)象取對(duì)應(yīng)的值:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName); } // 'Breakfast' 'Lunch' 'Dinner'
meal是一個(gè)普通對(duì)象。 使用Object.keys(meals)
和枚舉的for..of循環(huán)獲取對(duì)象鍵值。
代碼看起來(lái)很簡(jiǎn)單,但是,let mealName = meals[key]
沒有多大的必要,可以進(jìn)一步優(yōu)化,如下:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let mealName of Object.values(meals)) { console.log(mealName); } // 'Breakfast' 'Lunch' 'Dinner'
因?yàn)?code>Object.values(meals)返回?cái)?shù)組中的對(duì)象屬性值,所以可以直接在 for..of 中簡(jiǎn)化。 mealName直接在循環(huán)中賦值。
Object.entries()
Object.entries()
方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性)。
Object.entries()
返回鍵值對(duì)數(shù)組,如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。
可能直接使用這些鍵值對(duì)不怎么方便,但可以通過(guò)數(shù)組解構(gòu)賦值方式訪問(wèn)鍵和值就變得非常容易,如下所示:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let [key, value] of Object.entries(meals)) { console.log(key + ':' + value); } // 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'
如上所示,因?yàn)?Object.entries()
返回一個(gè)與數(shù)組解構(gòu)賦值兼容的集合,因此不需要為賦值或聲明添加額外的行。
當(dāng)普通對(duì)象要轉(zhuǎn)換成 Map 時(shí)Object.entries()
就很有用,因?yàn)?code>Object.entries() 返回的格式與Map構(gòu)造函數(shù)接受的格式完全相同:(key,value)。
使用常規(guī)的Map構(gòu)造函數(shù)可以將一個(gè)二維鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè)Map對(duì)象。
來(lái)個(gè)例子,讓人緩緩:
let greetings = { morning: 'Good morning', midday: 'Good day', evening: 'Good evening' }; let greetingsMap = new Map(Object.entries(greetings)); greetingsMap.get('morning'); // => 'Good morning' greetingsMap.get('midday'); // => 'Good day' greetingsMap.get('evening'); // => 'Good evening'
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
有趣的是,Map提供了與Object.values()
和Object.entries()
等效的方法(只是它們返回Iterators),以便為Map實(shí)例提取屬性值或鍵值對(duì):
Map.prototype.values()
等價(jià)于Object.values()
Map.prototype.entries()
等價(jià)于Object.entries()
map是普通對(duì)象的改進(jìn)版本,可以獲取 map 的大小(對(duì)于普通對(duì)象,必須手動(dòng)獲取),并使用任意對(duì)象類型作為鍵(普通對(duì)象使用字符串基元類型作為鍵)。
讓我們看看返回.values()
和.entries()
的map的方法:
// ... [...greetingsMap.values()]; // => ['Good morning', 'Good day', 'Good evening'] [...greetingsMap.entries()]; // => [ ['morning', 'Good morning'], ['midday', 'Good day'], // ['evening', 'Good evening'] ]
注意,greetingsMap.values()
和greetingsMap.entries()
返回迭代器對(duì)象。若要將結(jié)果放入數(shù)組,擴(kuò)展運(yùn)算符…是必要的。
對(duì)象屬性的順序
JS 對(duì)象是簡(jiǎn)單的鍵值映射,因此,對(duì)象中屬性的順序是微不足道的, 在大多數(shù)情況下,不應(yīng)該依賴它。
在ES5和早期標(biāo)準(zhǔn)中,根本沒有指定屬性的順序。
然而,從ES 6開始,屬性的順序是基于一個(gè)特殊的規(guī)則的,除非特指按照時(shí)間排序。通過(guò)兩個(gè)新方法Object.getOwnPropertyNames
和Reflect.ownKeys
來(lái)編寫示例講解這一屬性排序規(guī)則。
- 數(shù)字:當(dāng)屬性的類型時(shí)數(shù)字類型時(shí),會(huì)按照數(shù)字的從大到小的順序進(jìn)行排序;
- 字符串:當(dāng)屬性的類型是字符串時(shí),會(huì)按照時(shí)間的先后順序進(jìn)行排序;
- Symbol:當(dāng)屬性的類型是Symbol時(shí),會(huì)按照時(shí)間的先后順序進(jìn)行排序。
如果需要有序集合,建議將數(shù)據(jù)存儲(chǔ)到數(shù)組或Set中。
總結(jié)
Object.values()
和Object.entries()
是為JS開發(fā)人員提供新的標(biāo)準(zhǔn)化輔助函數(shù)的另一個(gè)改進(jìn)步驟。
Object.entries()
最適用于數(shù)組解構(gòu)賦值,其方式是將鍵和值輕松分配給不同的變量。 此函數(shù)還可以輕松地將純JS對(duì)象屬性映射到Map對(duì)象中。、
注意,Object.values()
和Object.entries()
返回?cái)?shù)據(jù)的順序是不確定的,所以不要依賴該方式。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
- js中遍歷對(duì)象的屬性和值的方法
- Javascript的數(shù)組與字典用法與遍歷對(duì)象的技巧
- js中遍歷Map對(duì)象的方法
- js 遍歷對(duì)象的屬性的代碼
- js遍歷json對(duì)象所有key及根據(jù)動(dòng)態(tài)key獲取值的方法(必看)
- JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
- jquery動(dòng)態(tài)遍歷Json對(duì)象的屬性和值的方法
- js簡(jiǎn)單遍歷獲取對(duì)象中的屬性值的方法示例
- JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
- 關(guān)于JavaScript對(duì)象類型之Array及Object
- es6 javascript對(duì)象Object.values() , Object.entries()示例詳解
- Javascript?Object對(duì)象類型使用詳解
- Object的相關(guān)方法 和 js遍歷對(duì)象的常用方法總結(jié)
相關(guān)文章
JavaScript實(shí)現(xiàn)時(shí)鐘滴答聲效果
本文給大家分享一段js實(shí)例代碼實(shí)現(xiàn)時(shí)鐘滴答聲效果,效果逼真,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05說(shuō)明你的Javascript技術(shù)很爛的五個(gè)原因
Javascript在互聯(lián)網(wǎng)上名聲很臭,但你又很難再找到一個(gè)像它這樣如此動(dòng)態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語(yǔ)言。2011-04-04JavaScript獲取當(dāng)前url根目錄(路徑)
本文主要介紹JavaScript獲取當(dāng)前url根目錄的方法,比較實(shí)用,需要的朋友可以參考一下。2016-06-06關(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解
下面小編就為大家?guī)?lái)一篇關(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]
有時(shí)我們需要在客戶端獲取鏈接參數(shù),一個(gè)常見的方法是將鏈接當(dāng)做字符串,按照鏈接的格式分解,然后獲取對(duì)應(yīng)的參數(shù)值。本文給出的就是這個(gè)流程的具體實(shí)現(xiàn)方法。2010-02-02JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法,涉及javascript針對(duì)頁(yè)面字符串查找及替換的相關(guān)技巧,需要的朋友可以參考下2015-07-07JS嵌套函數(shù)調(diào)用上下文的問(wèn)題解決
這篇文章主要探討了JS嵌套函數(shù)調(diào)用上下文的問(wèn)題,需要的朋友可以參考下2014-03-03