如何遍历一个普通的 JavaScript 对象？

英文 | 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 1
b 2
c 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 循环来记录属性值。

所以，我们得到：

​​1​​​​2​​​​3​​

在控制台中。

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)

我们创建了带有 obj 对象的 loopNestedObj 函数。

在函数内部，我们有与前一个示例相同的循环。

但是，我们有一个 if 块来检查值的数据类型，看看它是否是一个对象。

如果是，那么我们调用 loopNestedObj 来循环遍历它的内容。

需要表达式 typeof value === ‘object’ && value !== null 来检查 value 是否是一个对象，因为 typeof null 也是 'object' 。

因此，我们需要两个检查来检查对象。

结论

我们可以使用 for-of 循环和 JavaScript 提供的各种静态对象方法来遍历对象。

学习更多技能请点击下方公众号