卡卡網(wǎng)

說(shuō)到循環(huán)遍歷，大家可能立即想到的是是for語(yǔ)法，但在某些情況下，for循環(huán)并不是最佳選擇。今天，我將介紹兩個(gè)，簡(jiǎn)潔又安全的，JS遍歷對(duì)象屬性的寫(xiě)法。

• 借助 hasOwnProperty
• 使用Object.keys組合forEach

方法一：借助 hasOwnProperty

借助 hasOwnProperty 方法，可以輕松循環(huán)對(duì)象的屬性，而不包括繼承的屬性。

寫(xiě)法

const object = { ... };

for (const key in object) {
    if (object.hasOwnProperty(key)) {
        // 找到屬性
    }
}

代碼解釋

對(duì)于for語(yǔ)句，使用了in關(guān)鍵字。但是，我們也有一個(gè) if 語(yǔ)句來(lái)檢查hasOwnProperty，這是因?yàn)?code>in關(guān)鍵字還包括繼承的屬性。為了過(guò)濾掉它們，我們需要if語(yǔ)句。

下面的例子演示了如何在遍歷一個(gè)對(duì)象的所有屬性時(shí)忽略掉繼承屬性。

let site = {
  webkaka: '卡卡網(wǎng)'
};

for (let name in site) {
  if (site.hasOwnProperty(name)) {
    console.log('網(wǎng)站 (' +
      name + ') 的名稱是: ' + site[name]);
  }
  else {
    console.log(name);
  }
}

demodownload

輸出

網(wǎng)站 (webkaka) 的名稱是: 卡卡網(wǎng)

下面示例說(shuō)明了in和hasOwnProperty的區(qū)別：

//構(gòu)造函數(shù)是一個(gè)繼承屬性
//因此，這將返回 true
console.log('constructor' in window);

     
// 然而這將返回 false
console.log(window.hasOwnProperty(constructor));

如果需要檢查繼承的屬性，則需要使用 in 運(yùn)算符。

方法二：使用Object.keys組合forEach

對(duì)于更簡(jiǎn)單的解決方案，還可以使用Object.keys組合forEach：

Object.keys(object).forEach((key, index) => {
    console.log(`key: ${key}, value: ${object[key]}, index: ${index}`);
});

它有相當(dāng)好的瀏覽器支持，在IE中支持到版本9。

JavaScript 的Array#forEach()函數(shù)允許你遍歷數(shù)組，但不能遍歷對(duì)象。但是，如果你使用 Object.keys(), Object.values(), 或 Object.entries()首先將對(duì)象轉(zhuǎn)換為數(shù)組，則可以用forEach()來(lái)迭代 JavaScript 對(duì)象。 

Object.keys()函數(shù)返回對(duì)象自身的可枚舉屬性的數(shù)組 ，然后，你可以使用forEach()迭代對(duì)象中的每個(gè)鍵。

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'howtostagehomes.com'
};

//先輸出：name 卡卡網(wǎng)
//再輸出：url howtostagehomes.com
Object.keys(webkaka).forEach(key => {
  console.log(key, webkaka[key]);
});

demodownload

輸出，有兩行：

name 卡卡網(wǎng)
url howtostagehomes.com

使用Object.values()

Object.values()函數(shù)返回對(duì)象自身的可枚舉屬性值的數(shù)組。換句話說(shuō)，它返回一個(gè)包含對(duì)象值的數(shù)組，你可以使用forEach()迭代對(duì)象中的每個(gè)鍵值。

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'howtostagehomes.com'
};

//先輸出：卡卡網(wǎng)
//再輸出：howtostagehomes.com
Object.values(webkaka).forEach(val => {
  console.log(val);
});

demodownload

輸出，有兩行：

卡卡網(wǎng)
howtostagehomes.com

使用Object.entries()

Object.entries()函數(shù)返回一個(gè)條目數(shù)組。條目是長(zhǎng)度為 2 的數(shù)組，其中entry[0]是鍵，entry[1]是值。你可以同時(shí)遍歷鍵和值：

const webkaka = {
  name: '卡卡網(wǎng)',
  url: 'howtostagehomes.com'
};

//先輸出：name 卡卡網(wǎng)
//再輸出：url howtostagehomes.com
Object.entries(webkaka).forEach(entry => {
  const [key, value] = entry;
  console.log(key, value);
});

demodownload

輸出，有兩行：

name 卡卡網(wǎng)
url howtostagehomes.com

總結(jié)

本文介紹了兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法。在本文中，我們了解了in和hasOwnProperty的區(qū)別，同時(shí)了解了Object.keys()和forEach()的使用。

相關(guān)文章

• 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• JS刪除對(duì)象屬性：這種方法比delete快50倍
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

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