How to iterate over object keys using JavaScript

Custom objects cannot be iterated using for...of loops. Additionally, you cannot use iterator methods such as map() and forEach(). If you do this, you will receive TypeError in every instance.

Instead, use for...in to iterate over objects. This method iterates over all enumerable, non-symbolic properties of the object.

In the following example, we use it to iterate over all three properties of obj, and for each property, we record an attribute consisting of the property name (i.e. its key) and its corresponding A string of values.

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"

We initialize the loop using the variable prop which will hold a different property name (also called a key) on each iteration of the object's properties. The code specified in the block will be run on each iteration.

Here's a small demo to demonstrate this (click Results to see the output):

Within the loop, on each iteration, we log one of the object's property names and values ​​to the console.

Another way to iterate over the properties of an object is to pass the object into Object.entries() and call that method. This will return all enumerable properties of this object within a multidimensional array (array of arrays):

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

let result = Object.entries(obj)

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

We can then loop over it using any of the array iterator methods:

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

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

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

You can also use a for...of loop:

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

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

Here are some demos:

Here, since we get an array of keys and values ​​in each iteration, we just use entry[0] and entry[1] respectively to visit them. If you only need keys instead of keys and values, use Object.keys() instead of Object.entries().

for...of Basically the same:

in conclusion

These are the methods by which we can easily iterate over the properties and keys of an object in JavaScript. Check out our JavaScript post for more articles and tutorials.

The above is the detailed content of How to iterate over object keys using JavaScript. For more information, please follow other related articles on the PHP Chinese website!