在JavaScript中,遍历对象的属性是一项常见任务。以下是一些遍历对象属性的方法,以及它们的用法和区别。
1. for...in
语句
for...in
语句用于遍历对象的可枚举属性(包括从原型链继承的属性)。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
for (let key in person) {
console.log(key, person[key]);
}
输出:
name John
age 30
job developer
特点:
for...in
语句遍历对象自身和继承的可枚举属性。- 如果只想遍历对象自身的属性而不包含继承的属性,通常会结合
hasOwnProperty
方法。
使用 hasOwnProperty
过滤继承属性:
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(key, person[key]);
}
}
2. Object.keys()
方法
Object.keys()
方法返回一个数组,数组的元素是对象自身的可枚举属性名(不包括继承的属性)。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
Object.keys(person).forEach(key => {
console.log(key, person[key]);
});
输出:
name John
age 30
job developer
特点:
- 只遍历对象自身的可枚举属性。
- 返回的属性顺序是与手动遍历对象属性时的顺序一致。
3. Object.values()
方法
Object.values()
方法返回一个数组,数组的元素是对象自身的可枚举属性值。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
Object.values(person).forEach(value => {
console.log(value);
});
输出:
John
30
developer
特点:
- 只遍历对象自身的可枚举属性的值。
- 无法直接获取属性名,只能获取属性值。
4. Object.entries()
方法
Object.entries()
方法返回一个数组,数组的元素是对象自身的可枚举属性的键值对数组。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
Object.entries(person).forEach(([key, value]) => {
console.log(key, value);
});
输出:
name John
age 30
job developer
特点:
- 只遍历对象自身的可枚举属性。
- 提供键值对形式的遍历,适合需要同时访问属性名和属性值的场景。
5. Object.getOwnPropertyNames()
方法
Object.getOwnPropertyNames()
方法返回一个数组,包含对象自身的所有属性(包括不可枚举属性)。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
Object.getOwnPropertyNames(person).forEach(key => {
console.log(key, person[key]);
});
输出:
name John
age 30
job developer
特点:
- 遍历对象自身的所有属性,包括不可枚举属性。
- 通常用于需要获取对象的所有属性时。
6. Reflect.ownKeys()
方法
Reflect.ownKeys()
方法返回一个数组,包含对象自身的所有属性(包括符号属性)。
示例:
const person = {
name: 'John',
age: 30,
job: 'developer'
};
Reflect.ownKeys(person).forEach(key => {
console.log(key, person[key]);
});
输出:
name John
age 30
job developer
特点:
- 返回对象的所有属性名,包括可枚举属性、不可枚举属性和符号属性。
总结
for...in
:遍历对象及其原型链上的可枚举属性,适合简单遍历,但需要hasOwnProperty
来过滤继承属性。Object.keys()
:返回对象自身的可枚举属性名,最常用。Object.values()
:返回对象自身的可枚举属性值,适合只需要值的场景。Object.entries()
:返回对象自身的键值对,适合同时需要键和值的场景。Object.getOwnPropertyNames()
:返回对象自身的所有属性,包括不可枚举属性。Reflect.ownKeys()
:返回对象自身的所有属性,包括符号属性和不可枚举属性。