JS使用 forEach() 遍历对象

发表于 2022年04月23日
javascript , 前端

JavaScript 的 Array#forEach() 函数允许您遍历数组，但不能遍历对象。但是，如果您首先使用 Object.keys()、Object.values() 或 Object.entries() 将对象转换为数组，则可以使用 forEach() 迭代 JavaScript 对象。

目录表

使用 `Object.keys()`

Object.keys() 函数返回对象自身的可枚举属性的数组。然后，您可以使用 forEach() 遍历对象中的每个键。

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "name Jean-Luc Picard" followed by "rank Captain"
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

const obj = {

rank: 'Captain'

};

// Prints "name Jean-Luc Picard" followed by "rank Captain"

Object.keys(obj).forEach(key => {

console.log(key, obj[key]);

});

使用 `Object.values()`

Object.values() 函数返回对象自己的可枚举属性值的数组。换句话说，它返回一个包含对象值的数组，您可以使用 forEach() 对其进行迭代。

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "Jean-Luc Picard" followed by "Captain"
Object.values(obj).forEach(val => {
  console.log(val);
});

const obj = {

rank: 'Captain'

};

// Prints "Jean-Luc Picard" followed by "Captain"

Object.values(obj).forEach(val => {

console.log(val);

});

使用 `Object.entries()`

Object.entries() 函数返回一个条目数组。条目是长度为 2 的数组，其中entry[0] 是键，entry[1] 是值。您可以同时遍历键和值：

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "name Jean-Luc Picard" followed by "rank Captain"
Object.entries(obj).forEach(entry => {
  const [key, value] = entry;
  console.log(key, value);
});