返回
轻松掌握!js中9种遍历对象的方法详解,让你成为遍历高手!
前端
2024-02-09 05:33:11
JavaScript中遍历对象的方法
对象是JavaScript中最常用的部分之一。我们经常需要遍历对象上的属性或键值对,以获取或更新数据。有九种不同的方法可以帮助我们遍历对象。
1. for-in循环
for-in循环是一种最常用的方法,它遍历对象的属性名称。使用for-in循环时,我们需要使用一个变量来存储属性名称,然后我们可以使用这个变量来访问属性值。
const person = {
name: 'John Doe',
age: 30,
city: 'New York'
};
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
输出:
name: John Doe
age: 30
city: New York
2. for-of循环
for-of循环是一种更现代的方法,它遍历对象的可迭代属性值。使用for-of循环时,我们需要使用一个变量来存储属性值,然后我们可以使用这个变量来访问属性名称。
for (const value of Object.values(person)) {
console.log(value);
}
输出:
John Doe
30
New York
3. Object.keys()
Object.keys()方法返回一个包含对象所有可枚举属性名称的数组。我们可以使用这个数组来遍历对象。
const keys = Object.keys(person);
for (const key of keys) {
console.log(`${key}: ${person[key]}`);
}
输出:
name: John Doe
age: 30
city: New York
4. Object.values()
Object.values()方法返回一个包含对象所有可枚举属性值的数组。我们可以使用这个数组来遍历对象。
const values = Object.values(person);
for (const value of values) {
console.log(value);
}
输出:
John Doe
30
New York
5. Object.entries()
Object.entries()方法返回一个包含对象所有可枚举属性名称和值的数组。我们可以使用这个数组来遍历对象。
const entries = Object.entries(person);
for (const [key, value] of entries) {
console.log(`${key}: ${value}`);
}
输出:
name: John Doe
age: 30
city: New York
6. Array.from()
Array.from()方法可以将一个可迭代对象转换为数组。我们可以使用这个方法将对象转换为数组,然后使用for循环来遍历数组。
const personArray = Array.from(person);
for (const [key, value] of personArray) {
console.log(`${key}: ${value}`);
}
输出:
name: John Doe
age: 30
city: New York
7. Reflect.ownKeys()
Reflect.ownKeys()方法返回一个包含对象所有自身属性名称的数组。我们可以使用这个数组来遍历对象。
const keys = Reflect.ownKeys(person);
for (const key of keys) {
console.log(`${key}: ${person[key]}`);
}
输出:
name: John Doe
age: 30
city: New York
8. Set
我们可以使用Set来遍历对象。Set是一个不包含重复元素的集合。我们可以将对象转换为Set,然后使用Set的forEach()方法来遍历Set。
const personSet = new Set(person);
personSet.forEach((value) => {
console.log(value);
});
输出:
John Doe
30
New York
9. 自定义迭代器
我们可以使用自定义迭代器来遍历对象。自定义迭代器是一个对象,它实现了next()方法。next()方法返回一个包含值和完成标志的