JS中遍歷物件屬性的方法介紹

在2016年6月釋出的ECMAScript 2016的同一時期，令JavaScript開發人員開心的是知道另一組很棒的提案已經達到了第4階段（完成）。

譯者注：在翻譯這篇文章時，這幾個特性已得到了支援。

讓我們列出這些功能：

新提議包括在2017年要釋出的ESMAScript2017標準中，可能會在2017年夏天釋出。請注意，這個功能列表可能會一直增長。太好了！

當然，你不必等到ES2017釋出，或者直到供應商（瀏覽器）實現了新功能！Babel已經包含了這些已完成的提案中的大部分特性。

本文主要討論如何改進物件屬性的迭代：

使用Object.values()獲取物件屬性
使用Object.entries()獲取屬性key/value

乍一看，這些靜態函數似乎並沒有帶來顯著的價值。但是當它們與for...of迴圈配合使用，你會得到一種簡而美的遍歷物件的屬性的方式。

讓我們一探究竟吧。

自己的和可列舉的屬性

正如你可能已經知道的那樣，Object.keys()只存取物件本身和可列舉的屬性。這是合理的，因為大多數時候只有這些屬性需要評估。

讓我們看一個物件擁有和繼承屬性的例子。Object.keys()只返回自己的屬性鍵（key）：

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.keys(natureColors)返回natureColors物件自身和可列舉的屬性鍵：['colorC', 'colorD']。natureColors包含從simpleColors原型物件繼承的屬性。然而，Object.keys()函數會跳過它們。

Object.values()和Object.entries()存取物件的屬性採用相同的標準：擁有和可列舉屬性。讓我們來看看：

let simpleColors = {  
    colorA: 'white',
    colorB: 'black'
};
let natureColors = {  
    colorC: 'green',
    colorD: 'yellow'
};

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

現在請注意和for...in不同之處。迴圈遍歷可列舉的自己和繼承的屬性。下面的例子說明了這一點：

let simpleColors = {  
    colorA: 'white',
    colorB: 'black'
};
let natureColors = {  
    colorC: 'green',
    colorD: 'yellow'
};

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

enumerableKeys陣列包含natureColors物件自己屬性的鍵：'colorC'和'colorD'。

此外，for...in遍歷從simpleColors原型中繼承過來的屬性鍵：'colorA'和'colorB'。

Object.values()返回屬性值

為了區分Object.values()的好處，讓我們先看看在2017年之前獲取物件的屬性值是怎麼來實現的。

首先使用Object.keys()來收集屬性鍵，然後使用一個屬性存取器，並將值儲存在一個額外的變數中。讓我們看一個例子：

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'
}

meals是一個普通的JavaScript物件。使用Object.keys(meals)和for...of的迴圈列舉出物件鍵值。程式碼看起來很簡單，但是可以通過去掉let mealName = meals[key]來優化它。

通過使用Object.values()可以直接存取物件屬性值，可以實現優化。優化程式碼後如下：

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.values()只做一件事，但做得很好。這也是我們寫程式碼的正確姿勢。

Object.entries()返回屬性值和鍵

Object.entries()很強大，它返回物件的鍵和屬性值，而且它們是成對的，比如： [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。

可能直接使用有些不爽。幸運的是，陣列在for...of迴圈中傳入let [x, y] = array，很容易得到對應的存取鍵和值。

下面是Object.entries()的範例：

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(meals)返回meal物件的屬性鍵和值到一個陣列中。然後通過for...of迴圈解構性引數let [key, value]把陣列中的值分配給key和value變數。

正如所見，存取的鍵和值現在已經是一種舒適而且易於理解的形式。由於Object.entries()返回一個與陣列解構性賦值相相容的集合，因此沒有必要新增額外的賦值或宣告行。

Object.entries()將普通物件匯入到Map時是有用的。由於Object.entries()返回Map建構函式所接受的格式：key和value成對。因此問題變得無關緊要。

讓我們建立一個JavaScript物件並將其匯出到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'

new Map(Object.entries(greetings))建構函式使用一個引數來呼叫，這個引數是greeting物件中匯出的陣列的一個鍵值對。

如預期的那樣，map範例greetingsMap包含greetings物件匯入的屬性。可以使用.get(key)方法存取這些資料。

有趣的是，Map提供了與Object.values()和Object.entries()方法相同的方法（只有它們返回迭代器），以便提取Map範例的屬性值或鍵值對：

Map.prototype.values()等價於Object.values()
Map.prototype.entries()等價於Object.entries()

Map提供了普通物件的改良版。你可以獲得Map的大小（對於一個簡單的物件，你必須手動操作），並使它作為鍵或物件型別（簡單物件把鍵當作一個字串原始型別）。

我們來看看map的.values()和.entries()方法返回什麼：

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
[...greetingsMap.values()]; // =>['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()]; // =>[['morning','Good morning'],
                       ['midday','Good day'],['evening','Good evening']]

注意：greetingsMap.values()和greetingsMap.entries()返回迭代器物件（Iterator Objects）。將結果放入一個陣列，擴充套件運運算元...是必要的。在for...of迴圈語句中可以直接使用迭代器。

關於順序上的筆記

JavaScript物件是簡單的鍵值對映。所以物件的屬性的順序是無關緊要的。在大多數情況下，你不應該依賴它。

然而，ES2015已經對迭代的方式提供了標準化的要求：首先是有序的數位字元，然後是插入順序的字串，然後是插入順序的符號（symbols）。在ES5和較早的標準中，屬性的順序沒有指定。

如果你需要一個有序的集合，推薦的方法是將資料儲存到陣列或集合中。

總結

Object.values()和Object.entries()是為JavaScript開發人員提供函數的另一個改進步驟的新標準化。

Object.entries()最好用資料組解構性引數來執行，這樣鍵和值就可以很容易地分配給不同的變數。這個函數還可以很容易地將普通JavaScript物件屬性匯出到Map物件中。Map能夠更好地支援傳統的map（或hash）行為。

注意：object.values()和object.entries()返回資料的順序是未確定的。所以不要依賴於順序。

英文原文地址：https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/
譯文地址：https://www.w3cplus.com/javascript/how-to-iterate-easily-over-object-properties-in-javascript.html

更多程式設計相關知識，請存取：！！

以上就是JS中遍歷物件屬性的方法介紹的詳細內容，更多請關注TW511.COM其它相關文章！