用forEach()遍历对象

发表于 分类于 阅读次数： Valine：

原文：Iterating Through an Object with forEach()

通过Object.keys()、Object.values()和Object.entries()，可以用forEach遍历一个JavaScript对象。

JavaScript中的Array#forEach()函数可以遍历数组，无法遍历对象。不过可以用Object.keys()、Object.values()和Object.entries()将对象转换为数组，然后用forEach()进行遍历。

Object.keys()

Object.keys()函数返回对象自身可枚举属性名的数组，用forEach()可以遍历每一个属性名。

1
2
3
4
5
6
7
8
9
const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

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

Object.values()

Object.values()函数返回对象自身可枚举属性值的数组。用forEach()可以遍历它返回的对象属性值的数组。

1
2
3
4
5
6
7
8
9
const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// 打印 "Jean-Luc Picard" 和 "Captain"
Object.values(obj).forEach(val => {
  console.log(val);
});

Object.entries()

Object.entries()函数返回对象属性entry的数组。entry是长度为2的数组，entry[0]是属性名，entry[1]是属性值。用forEach()可以同时遍历属性名和属性值：

1
2
3
4
5
6
7
8
9
10
const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

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

本教程对您有帮助吗？来GitHub仓库点个星支持我们吧！