JavaScript遍历对象的七种方法汇总

当我们需要操作 JavaScript 对象的属性时，遍历对象是非常必要的。本文总结了JavaScript遍历对象的七种方法。下面进行详细讲解：

方法一：for...in

使用 for...in 循环对象的属性。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

for (let property in person) {
  console.log(`${property}: ${person[property]}`)
}

输出结果为：

name: John
age: 30
gender: male

方法二：Object.keys()

使用 Object.keys() 方法获取对象的所有属性名数组，然后使用 forEach 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`)
})

输出结果为：

name: John
age: 30
gender: male

方法三：Object.values()

使用 Object.values() 方法获取对象的所有属性值数组，然后使用 forEach 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

Object.values(person).forEach(value => {
  console.log(value)
})

输出结果为：

John
30
male

方法四：Object.entries()

使用 Object.entries() 方法获取对象的所有属性和属性值的键值对数组，然后使用 forEach 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

输出结果为：

name: John
age: 30
gender: male

方法五：Array.prototype.forEach()

将对象转换为键名为对象属性名，键值为对象属性值的数组，然后使用 forEach 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

Object.entries(person).map(([key, value]) => `${key}: ${value}`)
  .forEach(item => console.log(item))

输出结果为：

name: John
age: 30
gender: male

方法六：Array.prototype.map()

将对象转换为键名为对象属性名，键值为对象属性值的数组，然后使用 map 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

const result = Object.entries(person).map(([key, value]) => `${key}: ${value}`)

console.log(result)

输出结果为：

["name: John", "age: 30", "gender: male"]

方法七：Array.prototype.reduce()

将对象转换为键名为对象属性名，键值为对象属性值的数组，然后使用 reduce 循环。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
}

const result = Object.entries(person).reduce((acc, [key, value]) => {
  acc.push(`${key}: ${value}`);
  return acc;
}, []);

console.log(result);

输出结果为：

["name: John", "age: 30", "gender: male"]

示例说明：

const students = [
  { id: 1, name: 'Tom', age: 18 },
  { id: 2, name: 'Jack', age: 20 },
  { id: 3, name: 'Rose', age: 19 }
]

students.forEach(student => {
  console.log(`${student.id} ${student.name} ${student.age}`)
})

输出结果为：

1 Tom 18
2 Jack 20
3 Rose 19

另一个示例：

const book = {
  title: 'JavaScript高级程序设计',
  author: 'Nicholas',
  publisher: 'xxx出版社',
  price: 59.9
}

Object.keys(book).forEach(key => {
  console.log(`${key}: ${book[key]}`)
})

输出结果为：

title: JavaScript高级程序设计
author: Nicholas
publisher: xxx出版社
price: 59.9