卡卡網(wǎng)

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

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

方法一：借助 hasOwnProperty

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

寫法

const object = { ... };

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

代碼解釋

對于for語句，使用了in關(guān)鍵字。但是，我們也有一個 if 語句來檢查hasOwnProperty，這是因為in關(guān)鍵字還包括繼承的屬性。為了過濾掉它們，我們需要if語句。

下面的例子演示了如何在遍歷一個對象的所有屬性時忽略掉繼承屬性。

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)

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

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

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

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

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

對于更簡單的解決方案，還可以使用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ù)組，但不能遍歷對象。但是，如果你使用 Object.keys(), Object.values(), 或 Object.entries()首先將對象轉(zhuǎn)換為數(shù)組，則可以用forEach()來迭代 JavaScript 對象。 

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

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

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

demodownload

輸出，有兩行：

name 卡卡網(wǎng)
url m.gazebo2go.com

使用Object.values()

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

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

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

demodownload

輸出，有兩行：

卡卡網(wǎng)
m.gazebo2go.com

使用Object.entries()

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

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

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

demodownload

輸出，有兩行：

name 卡卡網(wǎng)
url m.gazebo2go.com

總結(jié)

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

相關(guān)文章

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

標簽: 屬性  對象  對象屬性