Bagaimana untuk mengulangi kekunci objek menggunakan JavaScript

Objek tersuai tidak boleh diulang menggunakan gelung for...of. Selain itu, anda tidak boleh menggunakan kaedah iterator seperti map() dan forEach(). Jika anda melakukan ini, anda akan menerima TypeError dalam setiap kejadian. 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

Sebaliknya, gunakan for...in

Dalam contoh di bawah, kami menggunakannya untuk mengulangi ketiga-tiga sifat obj dan untuk setiap sifat, kami merekodkan senarai yang terdiri daripada nama sifat (iaitu kuncinya) dan rentetan nilainya yang sepadan.

Kami memulakan gelung menggunakan pembolehubah prop yang akan memegang nama sifat yang berbeza (juga dipanggil kunci) pada setiap lelaran sifat objek. Kod yang dinyatakan dalam blok akan dijalankan pada setiap lelaran.

Atas ialah kandungan terperinci Bagaimana untuk mengulangi kekunci objek menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!