JS中遍歷對象屬性的方法是什么

小編給大家分享一下JS中遍歷對象屬性的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

列出了這些功能：

• Object.values()和Object.entries()

• 異步函數(shù)

• str.padStart()和str.padEnd()

• Object.getOwnPropertyDescriptors()

• 在函數(shù)參數(shù)列表和調用中的拖尾逗號(Trailing commas)

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

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

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

• 使用Object.values()獲取對象屬性

• 使用Object.entries()獲取屬性key/value

乍一看，這些靜態(tài)函數(shù)似乎并沒有帶來顯著的價值。但是當它們與for...of循環(huán)配合使用，你會得到一種簡而美的遍歷對象的屬性的方式。

讓我們一探究竟吧。

自己的和可枚舉的屬性

正如你可能已經知道的那樣，Object.keys()只訪問對象本身和可枚舉的屬性。這是合理的，因為大多數(shù)時候只有這些屬性需要評估。

讓我們看一個對象擁有和繼承屬性的例子。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()函數(shù)會跳過它們。

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

現(xiàn)在請注意和for...in不同之處。循環(huán)遍歷可枚舉的自己和繼承的屬性。下面的例子說明了這一點：

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數(shù)組包含natureColors對象自己屬性的鍵：'colorC'和'colorD'。

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

Object.values()返回屬性值

為了區(qū)分Object.values()的好處，讓我們先看看在2017年之前獲取對象的屬性值是怎么來實現(xiàn)的。

首先使用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的循環(huán)枚舉出對象鍵值。代碼看起來很簡單，但是可以通過去掉let mealName = meals[key]來優(yōu)化它。

通過使用Object.values()可以直接訪問對象屬性值，可以實現(xiàn)優(yōu)化。優(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循環(huán)把對象的屬性值直接分配給mealName，因此不需要添加額外的代碼，就像前面的例子那樣。

Object.values()只做一件事，但做得很好。這也是我們寫代碼的正確姿勢。

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

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

可能直接使用有些不爽。幸運的是，數(shù)組在for...of循環(huán)中傳入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對象的屬性鍵和值到一個數(shù)組中。然后通過for...of循環(huán)解構性參數(shù)let [key, value]把數(shù)組中的值分配給key和value變量。

正如所見，訪問的鍵和值現(xiàn)在已經是一種舒適而且易于理解的形式。由于Object.entries()返回一個與數(shù)組解構性賦值相兼容的集合，因此沒有必要添加額外的賦值或聲明行。

Object.entries()將普通對象導入到Map時是有用的。由于Object.entries()返回Map構造函數(shù)所接受的格式：key和value成對。因此問題變得無關緊要。

讓我們創(chuàng)建一個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))構造函數(shù)使用一個參數(shù)來調用，這個參數(shù)是greeting對象中導出的數(shù)組的一個鍵值對。

如預期的那樣，map實例greetingsMap包含greetings對象導入的屬性。可以使用.get(key)方法訪問這些數(shù)據(jù)。

有趣的是，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）。將結果放入一個數(shù)組，擴展運算符...是必要的。在for...of循環(huán)語句中可以直接使用迭代器。

關于順序上的筆記

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

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

如果你需要一個有序的集合，推薦的方法是將數(shù)據(jù)存儲到數(shù)組或集合中。

總結

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

Object.entries()最好用數(shù)據(jù)組解構性參數(shù)來執(zhí)行，這樣鍵和值就可以很容易地分配給不同的變量。這個函數(shù)還可以很容易地將普通JavaScript對象屬性導出到Map對象中。Map能夠更好地支持傳統(tǒng)的map（或hash）行為。

注意：object.values()和object.entries()返回數(shù)據(jù)的順序是未確定的。所以不要依賴于順序。

看完了這篇文章，相信你對JS中遍歷對象屬性的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！