JS遍历对象的方式

1. Object.keys()返回自身可枚举属性
Object.keys()方法会返回对象自身的键组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。
与for..in语句的区别：for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性

let simpleColors = {
  colorA: 'white',
  colorB: 'black'
};
let natureColors = {
  colorC: 'green',
  colorD: 'yellow'
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors['colorA'];    // => 'white'
natureColors['colorB'];    // => 'black'

//...
let enumerableKeys = [];
for (let key in natureColors) {
  enumerableKeys.push(key);
}
enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

2. Object.values() 返回属性值
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )

let meals = {
  mealA: 'Breakfast',
  mealB: 'Lunch',
  mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {
  console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

3. Object.entries()
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环遍历该对象时返回的顺序一致（区别在于for-in循环也枚举原型链中的属性）。

let meals = {
  mealA: 'Breakfast',
  mealB: 'Lunch',
  mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {
  console.log(key + ':' + value);
}
// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

当普通对象要转换成 Map时Object.entries() 就很有用，因为Object.entries() 返回的格式与Map构造函数接受的格式完全相同：(key,value)。使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象。

let greetings = {
  morning: 'Good morning',
  midday: 'Good day',
  evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));
greetingsMap.get('morning'); // => 'Good morning'
greetingsMap.get('midday');  // => 'Good day'
greetingsMap.get('evening'); // => 'Good evening'

Map提供了与Object.values()和Object.entries()等效的方法（只是它们返回Iterators），以便为Map实例提取属性值或键值对：

• Map.prototype.values()等价于Object.values()
• Map.prototype.entries()等价于Object.entries()

// ...
[...greetingsMap.values()];
// => ['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()];
// => [ ['morning', 'Good morning'], ['midday', 'Good day'], 
//      ['evening', 'Good evening'] ]

greetingsMap.values()和greetingsMap.entries()返回迭代器对象。若要将结果放入数组，扩展运算符…是必要的

注意，Object.values()和Object.entries()返回数据的顺序是不确定的，所以不要依赖该方式。