返回

轻松掌握!js中9种遍历对象的方法详解,让你成为遍历高手!

前端

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()方法返回一个包含值和完成标志的