In JavaScript, we often need to iterate over the properties of an object. This can be achieved by using the for in, Object.keys and Object.getOwnPropertyNames methods. But what are the differences between these three methods? In this article, we'll delve into this issue and provide some sample code to help you better understand the differences.
start
Before we dive into these three methods, let’s understand their basic concepts.
- for in: used to traverse the enumerable properties of an object, including properties on the prototype chain.
- Object.keys: Used to return an array consisting of the enumerable properties of the object.
- Object.getOwnPropertyNames: Used to return an array consisting of all properties of the object, including non-enumerable properties.
Advantages and Disadvantages
- for…in loop traverses properties
advantage:
- Simple and easy to use, suitable for traversing all enumerable properties of an object
- It is possible to traverse the properties on the object's prototype chain
shortcoming:
- The traversal order of properties is not guaranteed
- Traversing will include properties on the object's prototype chain, which may lead to unexpected property traversal
- Object.keys() method traverses properties
advantage:
- Returns an array containing all enumerable properties of the object
- Properties on the object's prototype chain are not traversed
shortcoming:
- Unable to traverse properties on object's prototype chain
- The traversal order of properties is not guaranteed
- Object.getOwnPropertyNames() method traverses properties
advantage:
- Returns an array containing all properties of the object (including non-enumerable properties)
- Properties on the object's prototype chain are not traversed
shortcoming:
- The traversal order of properties is not guaranteed
- Unable to traverse properties on object's prototype chain
for in
The for in statement can be used to iterate over the properties of an object. Here's a simple example:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
for (const key in person) {
console.log(`${
key}: ${
person[key]}`);
}
In the above code, we have used the for in statement to iterate through all the properties of the person object and print their keys and values. The output is as follows:
name: John
age: 30
gender: male
It should be noted that the for in statement not only traverses the object's own properties, but also traverses the properties on its prototype chain. Therefore, you need to use the hasOwnProperty() method to check if the property belongs to the object itself, like this:
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(`${
key}: ${
person[key]}`);
}
}
Object.keys
The Object.keys method returns an array consisting of the enumerable properties of the object. Here's an example:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
const keys = Object.keys(person);
console.log(keys);
In the above code, we get all the enumerable properties of the person object using the Object.keys method and store them in an array. The output is as follows:
["name", "age", "gender"]
It should be noted that the Object.keys method will only return the enumerable properties of the object, not the properties on its prototype chain.
Object.getOwnPropertyNames
The Object.getOwnPropertyNames method returns an array consisting of all properties of the object, including non-enumerable properties. Here's an example:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
const propertyNames = Object.getOwnPropertyNames(person);
console.log(propertyNames);
In the above code, we use the Object.getOwnPropertyNames method to get all the properties of the person object and store them in an array. The output is as follows:
["name", "age", "gender"]
It should be noted that the Object.getOwnPropertyNames method will return all properties of the object, including non-enumerable properties and Symbol properties.
in conclusion
In JavaScript, we can use for in, Object.keys and Object.getOwnPropertyNames three methods to traverse the properties of an object. The difference between them is:
- The for in statement will traverse the properties on the object's prototype chain, and you need to use the hasOwnProperty() method to check whether the property belongs to the object itself.
- The Object.keys method will only return the enumerable properties of the object, not the properties on its prototype chain.
- The Object.getOwnPropertyNames method returns all properties of the object, including non-enumerable properties and Symbol properties.
Depending on your specific needs, choose a method that works for you to iterate over an object's properties.