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

翻译 | 杨小爱

JavaScript 对象是通过向它们添加属性来动态创建的。

因此，我们可能必须使用循环遍历其属性来获取值。

在本文中，我们将研究如何遍历纯 JavaScript 对象。

Object.keys

Object.keys 方法返回一个对象的所有非继承字符串属性键的数组。

要使用它，我们可以写：

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

我们使用 for-of 循环遍历 Object.keys 返回的键数组。

然后，我们可以通过将键传递到 obj 之后的方括号来访问该值。

所以我们看到：

a 1b 2c 3

Object.values

我们可以使用 Object.values 方法循环遍历对象的值。

例如，我们可以这样写：

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

Object.values 返回一个包含对象所有属性值的数组，因此，我们可以使用 for-of 循环来记录属性值。

所以，我们得到：

在控制台中。

Object.entries

此外，我们可以使用 Object.entries 方法返回一个包含键值对数组的数组。

为此，我们可以编写：

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

我们从 Object.entries 返回的每个数组条目中解构键和值。

然后，我们可以将它们记录在循环体中。

我们得到了与上一个示例相同的结果。

循环遍历嵌套对象

要循环遍历嵌套对象，我们可以创建一个函数，该函数调用自身在对象的每个级别循环遍历它们的属性。

为此，我们写：

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)