自身可枚舉屬性

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)由有經(jīng)驗的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團隊，負責(zé)網(wǎng)站視覺設(shè)計、用戶體驗優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站建設(shè)、做網(wǎng)站易于使用并且具有良好的響應(yīng)性。

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對象時返回的順序一致 。如果對象的鍵-值都不可枚舉，那么將返回由鍵組成的數(shù)組。

這是合理的，因為大多數(shù)時候只需要關(guān)注對象自身的屬性。

來看看一個對象擁有自身和繼承屬性的例子，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è)置一個指定的對象的原型 ( 即, 內(nèi)部[[Prototype]]屬性）到另一個對象或 null。

Object.keys(natureColors)返回natureColors對象的自身可枚舉屬性鍵： ['colorC'，'colorD'] 。

natureColors包含從simpleColors原型對象繼承的屬性，但是Object.keys()函數(shù)會跳過它們。

Object.values() 和 Object.entries() 也都是返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組

// ...
Object.values(natureColors); 
// => ['green', 'yellow']
Object.entries(natureColors);
// => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

現(xiàn)在注意與for..in語句的區(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原型對象繼承的屬性

2. Object.values() 返回屬性值

Object.values()方法返回一個給定對象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。

來個例子，使用Object.keys()收集keys，然后通過 key 去對象取對應(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是一個普通對象。 使用Object.keys(meals)和枚舉的for..of循環(huán)獲取對象鍵值。

代碼看起來很簡單，但是，let mealName = meals[key] 沒有多大的必要，可以進一步優(yōu)化，如下：

let meals = {
 mealA: 'Breakfast',
 mealB: 'Lunch',
 mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {
 console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

因為Object.values(meals)返回數(shù)組中的對象屬性值，所以可以直接在 for..of 中簡化。 mealName直接在循環(huán)中賦值。

Object.entries()

Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致（區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性）。

Object.entries() 返回鍵值對數(shù)組，如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。

可能直接使用這些鍵值對不怎么方便，但可以通過數(shù)組解構(gòu)賦值方式訪問鍵和值就變得非常容易，如下所示：

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'

如上所示，因為 Object.entries()返回一個與數(shù)組解構(gòu)賦值兼容的集合，因此不需要為賦值或聲明添加額外的行。

當(dāng)普通對象要轉(zhuǎn)換成 Map 時Object.entries() 就很有用，因為Object.entries() 返回的格式與Map構(gòu)造函數(shù)接受的格式完全相同：(key,value)。

使用常規(guī)的Map構(gòu)造函數(shù)可以將一個二維鍵值對數(shù)組轉(zhuǎn)換成一個Map對象。

來個例子，讓人緩緩：

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 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

有趣的是，Map提供了與Object.values()和Object.entries() 等效的方法（只是它們返回Iterators），以便為Map實例提取屬性值或鍵值對：

• Map.prototype.values() 等價于Object.values()
• Map.prototype.entries() 等價于Object.entries()

map是普通對象的改進版本，可以獲取 map 的大小(對于普通對象，必須手動獲取)，并使用任意對象類型作為鍵(普通對象使用字符串基元類型作為鍵)。

讓我們看看返回.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()返回迭代器對象。若要將結(jié)果放入數(shù)組，擴展運算符…是必要的。

對象屬性的順序

JS 對象是簡單的鍵值映射，因此，對象中屬性的順序是微不足道的， 在大多數(shù)情況下，不應(yīng)該依賴它。

在ES5和早期標準中，根本沒有指定屬性的順序。

然而，從ES 6開始，屬性的順序是基于一個特殊的規(guī)則的，除非特指按照時間排序。通過兩個新方法Object.getOwnPropertyNames和Reflect.ownKeys來編寫示例講解這一屬性排序規(guī)則。

• 數(shù)字：當(dāng)屬性的類型時數(shù)字類型時，會按照數(shù)字的從大到小的順序進行排序；
• 字符串：當(dāng)屬性的類型是字符串時，會按照時間的先后順序進行排序；
• Symbol：當(dāng)屬性的類型是Symbol時，會按照時間的先后順序進行排序。

如果需要有序集合，建議將數(shù)據(jù)存儲到數(shù)組或Set中。

總結(jié)

Object.values() 和Object.entries() 是為JS開發(fā)人員提供新的標準化輔助函數(shù)的另一個改進步驟。

Object.entries()最適用于數(shù)組解構(gòu)賦值，其方式是將鍵和值輕松分配給不同的變量。 此函數(shù)還可以輕松地將純JS對象屬性映射到Map對象中。、

注意，Object.values()和Object.entries()返回數(shù)據(jù)的順序是不確定的，所以不要依賴該方式。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

新聞名稱：JS中如何輕松遍歷對象屬性的方式總結(jié)
URL標題：http://aaarwkj.com/article30/iggcso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、App設(shè)計、全網(wǎng)營銷推廣、品牌網(wǎng)站制作、定制開發(fā)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)