卡卡網(wǎng)

JavaScript迭代遍歷對(duì)象屬性和值非常常見(jiàn)常用，在本文中，我將介紹3種常用的方法，來(lái)達(dá)到我們的目的。每種方法都有細(xì)微的差別，因此我將為每種方法提供詳細(xì)的解釋和示例。

• 使用Object.entries（對(duì)象條目）
• 使用Object.keys （對(duì)象鍵）
• 使用Object.values （對(duì)象值）

1、使用Object.entries（對(duì)象條目）

我將介紹的第一個(gè)方法是Object.entries。此方法返回對(duì)象的字符串鍵值對(duì)數(shù)組。有幾種Object.entries的使用方法。

使用forEach方法迭代

使用forEach方法，我們可以單獨(dú)訪問(wèn)每個(gè)entry。請(qǐng)注意，entry會(huì)進(jìn)行解構(gòu)，entry[0]是鍵，而entry[1]是對(duì)應(yīng)的值。

const obj = {
  'key1': 'value1',
  'key2': 'value2'
}

Object.entries(obj).forEach(entry => {
  let [key, value] = entry;
  console.log(key, value);
})

// output
key1 value1
key2 value2

使用for...of迭代

除了上面的forEach，我們還可以使用 for...of 解構(gòu)entry，循環(huán)定義中的每一個(gè)。

const obj = {
  'key1': 'value1',
  'key2': 'value2'
}

for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// output
key1 value1
key2 value2

forEach和for都起到迭代數(shù)組的作用，但它們的作用不盡相同，參考forEach和for不同的功能表現(xiàn) 。

我應(yīng)該什么時(shí)候使用Object.entries？

從上面的例子可以看出，Object.entries最有價(jià)值的特性是你可以同時(shí)訪問(wèn) key 和 value。因此，當(dāng)你知道要對(duì)對(duì)象的屬性（鍵）和相應(yīng)的值進(jìn)行操作時(shí)，這是一種理想的方法。

2、使用Object.keys（對(duì)象鍵）

Object.keys返回對(duì)象的可枚舉屬性名稱(chēng)的數(shù)組。

可枚舉屬性是“通過(guò)簡(jiǎn)單賦值或通過(guò)屬性初始化器”設(shè)置的屬性。JavaScript如何檢查一個(gè)屬性是否可枚舉。由于 JavaScript 對(duì)象有很多額外的屬性（例如constructor, __proto__），我們不想在對(duì)我們的對(duì)象進(jìn)行操作時(shí)包含這些類(lèi)型的屬性。當(dāng)然，它們可以直接訪問(wèn)，但在迭代屬性時(shí)不會(huì)包含在內(nèi)。

用法很簡(jiǎn)單，看下面的例子：

const obj = {
  name: 'Levi Coffin',
  birthdate: '10/28/1798',
  city: 'Newport',
  state: 'Indiana'
};

Object.keys(obj)  // => [ 'name', 'birthdate', 'city', 'state' ]

要遍歷對(duì)象的屬性，我們可以使用forEach：

Object.keys(obj).forEach(key => {
   console.log(key);
});

或者for...of：

for (let key of Object.keys(obj)) {
  console.log(key);
}

而要得到對(duì)應(yīng)的值，我們可以使用key進(jìn)行參考：

for (let key of Object.keys(obj)) {
  let value = obj[key];
  console.log(key, value);
}

我應(yīng)該什么時(shí)候使用Object.keys？

當(dāng)你只對(duì)對(duì)象的鍵（屬性名）感興趣時(shí)，你應(yīng)該使用它。如果你也對(duì)這些值感興趣，那么Object.entries可能是正確的工具。

3、使用Object.values（對(duì)象值）

Object.values是Object.keys的對(duì)應(yīng)物，并返回對(duì)象的可枚舉屬性值的數(shù)組。

同樣，我們可以迭代使用forEach：

Object.values(obj).forEach(value => {
   console.log(value);
});

或者for...of：

for (let value of Object.values(obj)) {
  console.log(value);
}

我應(yīng)該什么時(shí)候使用Object.values？

同樣，就像它的對(duì)應(yīng)物一樣，你應(yīng)該在只對(duì)對(duì)象的值感興趣時(shí)使用Object.values。

使用與上面相同的示例：

const nameAgeMap = {
  'Tom': 30,
  'Susan': 28,
  'Rob': 35,
  'Claire': 22
};

我們可以很容易地得到對(duì)應(yīng)的值列表：

Object.values(nameAgeMap)  // => [ 30, 28, 35, 22 ]

總結(jié)

本文通過(guò)多個(gè)示例，詳細(xì)介紹了迭代遍歷JavaScript對(duì)象屬性和值的幾種方法。通過(guò)本文的學(xué)習(xí)，我們應(yīng)該了解這幾種方法各自的優(yōu)點(diǎn)，在使用時(shí)選擇合適的方法。

相關(guān)文章

• 【示例】詳解JavaScript如何檢查一個(gè)屬性是否可枚舉
• 兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法
• 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• JS刪除對(duì)象屬性：這種方法比delete快50倍

• JavaScript檢查對(duì)象是否數(shù)組的最快方法
• 詳細(xì)介紹5種方法檢查JavaScript對(duì)象是否數(shù)組
• 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
• 3種方法JS和jQuery判斷對(duì)象是否為空
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: 對(duì)象  屬性