英文 | https://javascript.plainenglish.io/how-to-loop-through-a-plain-javascript-object-e3d1a45c2319

翻譯 | 楊小愛

JavaScript 對象是通過向它們添加屬性來動態(tài)創(chuàng)建的。

因此，我們可能必須使用循環(huán)遍歷其屬性來獲取值。

在本文中，我們將研究如何遍歷純 JavaScript 對象。

Object.keys

Object.keys 方法返回一個對象的所有非繼承字符串屬性鍵的數(shù)組。

要使用它，我們可以寫：

const obj = {  a: 1,  b: 2,  c: 3}for (const key of Object.keys(obj)) {  console.log(key, obj[key])}

我們使用 for-of 循環(huán)遍歷 Object.keys 返回的鍵數(shù)組。

然后，我們可以通過將鍵傳遞到 obj 之后的方括號來訪問該值。

所以我們看到：

a 1b 2c 3

登錄。

Object.values

我們可以使用 Object.values 方法循環(huán)遍歷對象的值。

例如，我們可以這樣寫：

const obj = {  a: 1,  b: 2,  c: 3}for (const value of Object.values(obj)) {  console.log(value)}

Object.values 返回一個包含對象所有屬性值的數(shù)組，因此，我們可以使用 for-of 循環(huán)來記錄屬性值。

所以，我們得到：

在控制臺中。

Object.entries

此外，我們可以使用 Object.entries 方法返回一個包含鍵值對數(shù)組的數(shù)組。

為此，我們可以編寫：

const obj = {  a: 1,  b: 2,  c: 3}for (const [key, value] of Object.entries(obj)) {  console.log(key, value)}

我們從 Object.entries 返回的每個數(shù)組條目中解構(gòu)鍵和值。

然后，我們可以將它們記錄在循環(huán)體中。

我們得到了與上一個示例相同的結(jié)果。

循環(huán)遍歷嵌套對象

要循環(huán)遍歷嵌套對象，我們可以創(chuàng)建一個函數(shù)，該函數(shù)調(diào)用自身在對象的每個級別循環(huán)遍歷它們的屬性。

為此，我們寫：

const obj = {  a: 1,  b: 2,  c: {    d: {      e: 4    },    f: 5  }}const loopNestedObj = obj => {  for (const [key, value] of Object.entries(obj)) {    console.log(key, value)    if (typeof value === 'object' && value !== null) {      loopNestedObj(value)    }  }}loopNestedObj(obj)

我們創(chuàng)建了帶有 obj 對象的 loopNestedObj 函數(shù)。

在函數(shù)內(nèi)部，我們有與前一個示例相同的循環(huán)。

但是，我們有一個 if 塊來檢查值的數(shù)據(jù)類型，看看它是否是一個對象。

如果是，那么我們調(diào)用 loopNestedObj 來循環(huán)遍歷它的內(nèi)容。

需要表達式 typeof value === ‘object’ && value !== null 來檢查 value 是否是一個對象，因為 typeof null 也是 'object' 。

因此，我們需要兩個檢查來檢查對象。

結(jié)論

我們可以使用 for-of 循環(huán)和 JavaScript 提供的各種靜態(tài)對象方法來遍歷對象。

如何遍歷一個普通的 JavaScript 對象？

學(xué)習(xí)更多技能
請點擊下方公眾號

如何遍歷一個普通的 JavaScript 對象？

學(xué)習(xí)更多技能請點擊下方公眾號

如何遍歷一個普通的 JavaScript 對象？

學(xué)習(xí)更多技能
請點擊下方公眾號