4種JavaScript中不同疊代對象的方法

英文 | https://javascript.plainenglish.io/javascript-basics-4-different-ways-to-iterate-over-an-object-a5d16335cef

翻譯 | 楊小愛

在今天這篇文章裡，我将介紹了一些疊代對象并擷取鍵值對的方法。這些技巧可以被視為小石頭，最終将幫助您渡過 JavaScript 面試的一些小河流。

我知道每個獨立的小石頭可能沒有多大用處，但如果我們得到一千顆或者一萬顆這樣的小石頭，他們就會有用，甚至非常有用。

如果您想要擷取更多這樣的小石頭，請記得關注我😉。

現在，我們就一起開始今天的内容吧。

我們如何在 JavaScript 中疊代對象并獲得鍵值對？

在今天的内容，我将介紹4種不同的方法，可用于在 JavaScript 中疊代任何對象。

01、Object.values()

此方法從對象的值傳回一個數組。它的工作順序與對象的值相同。

const obj1 = {
    test1: 'atit',
    test2: 53,
    test3: false,
};
console.log(Object.values(obj1));
// expected output: Array ["atit", 53, false]      

02、Object.keys()

此方法傳回對象鍵名的數組。

const obj1 = {
    test1: 'atit',
    test2: 53,
    test3: false,
};
console.log(Object.keys(obj1));
// expected output: Array ["test1", "test2", "test3"]      

03、Object.entries()

此方法傳回對象的 [key, value] 對的數組。

const obj1 = {
    test1: 'atit',
    test2: 53,
    test3: false,
};
for (let [key, value] of Object.entries(obj1)) {
    console.log(key, value);
}
//test1 atit
//test2 53
//test3 false      

我們還可以使用 hasOwnProperty 來檢查對象中是否存在鍵。

for (let key in obj1) {
    if (obj1.hasOwnProperty(key)) {
        console.log(key, obj1[key]);
    }
}
//test1 atit
//test2 53
//test3 false      

04、Object.fromEntries()

const test = new Map([
  ['atit', '51'],
  ['patel', 52]
]);
const obj1 = Object.fromEntries(test);
console.log(obj1);
// expected output: Object { atit: 51, patel: 52 }