如何在 JavaScript 中遍歷對象的鍵和值

有時您可能需要遍歷 JavaScript 中的對像以檢索多個鍵值對。在本文中，我們將研究在 JavaScript 中循環遍歷對象屬性的四種不同方法。

在 ES6 之前，循環對象的唯一方法是 for...in 循環。 Object.keys() 方法是在 ES6 中引入的，以便更容易迭代對象。後來在 ES8 中，添加了兩個新方法，Object.entries() 和 Object.values() .最新的方法將對象轉換為數組，然後使用數組循環方法遍歷該數組。

讓我們從第一種方法開始吧！

for...in 循環

迭代對象屬性的最簡單直接的方法是使用 for...in 陳述。此方法適用於所有現代和舊瀏覽器，包括 Internet Explorer 6 及更高版本。

這是一個使用 for...in 的示例 循環遍歷一個對象：

const user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    dob: '08/02/1989',
    active: true
};

// iterate over the user object
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true

問題 與 for...in 循環是它也遍歷原型鏈中的屬性。由於 JavaScript 中的對象可以從其原型繼承屬性，所以 fo...in 語句也會遍歷這些屬性。

避免 在循環對象時迭代原型屬性，您需要顯式 使用 hasOwnProperty() 檢查屬性是否屬於對象 方法：

for (const key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(`${key}: ${user[key]}`);
    }
}

幸運的是，我們不再需要依賴 for...in 和 hasOwnProperty() 循環對象的方法。有更好的方法可用。

Object.keys() 方法

Object.keys() 方法是在 ES6 中引入的。它將您要迭代的對像作為參數，並返回一個包含所有屬性名稱（或鍵）的數組。

然後，您可以使用任何數組循環方法（例如 forEach()）來遍歷數組並檢索每個屬性的值。

這是一個例子：

const courses = {
    java: 10,
    javascript: 55,
    nodejs: 5,
    php: 15
};

// convert object to key's array
const keys = Object.keys(courses);

// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
});

// java: 10
// javascript: 55
// nodejs: 5
// php: 15

在上面的函數聲明中，我使用了 ES6 語法。我假設你已經熟悉 ES6 尤其是箭頭函數。如果您是 ES6 新手，請查看箭頭函數指南以了解它。

Object.values() 方法

Object.values() 方法是在 ES8 中引入的，它與 Object.key() 相反 .它將對像中所有屬性的值作為數組返回。然後，您可以使用任何數組循環方法遍歷 values 數組。

讓我們看一個例子：

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

// iterate over object values
Object.values(animals).forEach(val => console.log(val));

// 🐅
// 🐱
// 🐒
// 🐘

Object.entries() 方法

Object.entries() 是 ES8 中引入的另一種方法，可用於遍歷對象。不同於 Object.values() 在對像中創建一個值數組，Object.entries() 產生一個數組數組。每個內部數組都有兩個元素。第一個元素是屬性；第二個元素是值。

這是一個例子：

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

const entries = Object.entries(animals);
console.log(entries);

// [ [ 'tiger', '🐅' ],
//   [ 'cat', '🐱' ],
//   [ 'monkey', '🐒' ],
//   [ 'elephant', '🐘' ] ]

遍歷 Object.entries() 返回的數組 ，您可以使用 for...of 循環或 forEach() 方法，如下所示：

// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
    console.log(`${key}: ${value}`);
}

// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

結論

這就是在 JavaScript 中迭代對象屬性的全部內容。我們研究了四種不同的方法來完成這項任務。 for...in 如果您想支持舊瀏覽器，它仍然是一個不錯的選擇。否則，只需使用任何最新方法：Object.keys() , Object.values() 或 Object.entries() .