"使用JavaScript迭代对象键的高效方法：掌握技巧，提升开发效率"

自定义对象无法使用 for...of 循环进行迭代。此外，您不能使用 map() 和 forEach() 等迭代器方法。如果这样做，您将在每个实例中收到 TypeError 。

相反，请使用 for...in 来迭代对象。此方法迭代对象的所有可枚举、非符号属性。

在下面的示例中，我们使用它来迭代 obj 的所有三个属性，并且对于每个属性，我们记录一个由属性名称（即其键）及其相应值组成的字符串。

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

我们使用变量 prop 初始化循环，该变量将在对象属性的每次迭代中保存不同的属性名称（也称为键）。块中指定的代码将在每次迭代时运行。

这里有一个小演示来演示这一点（单击结果查看输出）：

在循环内，每次迭代时，我们都会将对象的属性名称和值之一记录到控制台。

迭代对象属性的另一种方法是将对象传递到 Object.entries() 中并调用该方法。这将返回多维数组（数组的数组）内该对象的所有可枚举属性：

const obj = {a: 1, b: 2, c: 3};

let result = Object.entries(obj)

console.log(result)
// [["a", 1], ["b", 2], ["c", 3]]

然后我们可以使用任何数组迭代器方法循环它：

Object.entries(obj).forEach(entry => {
  // do something
})

Object.entries(obj).map(entry => {
  // do something
})

Object.entries(obj).every(entry => {
  // do something
})

您还可以使用 for...of 循环：

for (const entry of Object.entries(obj)) {
  // do something
}

for (const [key, value] of Object.entries(obj)) {
  // do something
}

以下是一些演示：

在这里，因为我们在每次迭代中得到一个由键和值组成的数组，所以我们只需分别使用 entry[0] 和 entry[1] 来访问它们。如果您只需要键而不是键和值，请使用 Object.keys() 代替 Object.entries()。

for...of 基本相同：

结论

这些是我们可以在 JavaScript 中轻松迭代对象的属性和键的方法。查看我们的 JavaScript 帖子以获取更多文章和教程。