JS中輕鬆遍歷對象屬性的幾種方式

時間 2019-11-08

標籤輕鬆遍歷對象屬性幾種方式欄目 JavaScript 简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。html

自身可枚舉屬性

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

這是合理的，由於大多數時候只須要關注對象自身的屬性。git

來看看一個對象擁有自身和繼承屬性的例子，Object.keys()只返回本身的屬性鍵：github

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() 方法設置一個指定的對象的原型 ( 即, 內部[[Prototype]]屬性）到另外一個對象或 null。

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

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

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

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

如今注意與for..in語句的區別，for..in不只能夠循環枚舉自身屬性還能夠枚舉原型鏈中的屬性學習

// ...
let enumerableKeys = [];
for (let key in natureColors) {
  enumerableKeys.push(key);
}
enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

enumerableKeys數組包含natureColors自身屬性鍵: 'colorC'和'colorD'。優化

另外for..in也遍歷了從simpleColors原型對象繼承的屬性阿里雲

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

Object.values()方法返回一個給定對象自身的全部可枚舉屬性值的數組，值的順序與使用 for...in循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。

來個例子，使用Object.keys()收集keys，而後經過 key 去對象取對應的值：

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循環獲取對象鍵值。

代碼看起來很簡單，可是，let mealName = meals[key] 沒有多大的必要，能夠進一步優化，以下：

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

由於Object.values(meals)返回數組中的對象屬性值，因此能夠直接在 for..of 中簡化。 mealName直接在循環中賦值。

Object.entries()

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

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

可能直接使用這些鍵值對不怎麼方便，但能夠經過數組解構賦值方式訪問鍵和值就變得很是容易，以下所示：

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()返回一個與數組解構賦值兼容的集合，所以不須要爲賦值或聲明添加額外的行。

當普通對象要轉換成 Map 時Object.entries() 就頗有用，由於Object.entries() 返回的格式與Map構造函數接受的格式徹底相同：(key,value)。

使用常規的Map構造函數能夠將一個二維鍵值對數組轉換成一個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()返回迭代器對象。若要將結果放入數組，擴展運算符…是必要的。