技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

【示例】3種方法迭代遍歷JavaScript對(duì)象屬性和值

作者:admin    時(shí)間:2022-6-10 16:11:5    瀏覽:

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

3種方法迭代遍歷JavaScript對(duì)象屬性和值

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

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

使用forEach方法迭代

使用forEach方法,我們可以單獨(dú)訪問每個(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

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

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

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

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

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

可枚舉屬性是“通過簡(jiǎn)單賦值或通過屬性初始化器”設(shè)置的屬性。JavaScript如何檢查一個(gè)屬性是否可枚舉。由于 JavaScript 對(duì)象有很多額外的屬性(例如constructor, __proto__),我們不想在對(duì)我們的對(duì)象進(jìn)行操作時(shí)包含這些類型的屬性。當(dāng)然,它們可以直接訪問,但在迭代屬性時(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.valuesObject.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é)

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

相關(guān)文章

標(biāo)簽: 對(duì)象  屬性  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */