ES6~ 如何遍历JavaScript中对象属性

在2016年6月发布的ECMAScript 2016的同一时期，令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段（完成）。著作权归作者所有。

来看一下这组特性的清单：

• Object.values()和Object.entries()
• 异步函数
• str.padStart()和str.padEnd()
• Object.getOwnPropertyDescriptors()
• 在函数参数列表和调用中的拖尾逗号(Trailing commas)

新提议包括在2017年要发布的ESMAScript2017标准中，可能会在2017年夏天发布。请注意，这个功能列表可能会一直增长。太好了！
当然，你不必等到ES2017发布，或者直到供应商（浏览器）实现了新功能！Babel已经包含了这些已完成的提案中的大部分特性。
本文主要讨论如何改进对象属性的迭代：

• 使用Object.values()获取对象属性
• 使用Object.entries()获取属性key/value

乍一看，这些静态函数似乎并没有带来显著的价值。但是当它们与for...of循环配合使用，你会得到一种简而美的遍历对象的属性的方式。
让我们一探究竟吧。


自己的和可枚举的属性

正如你可能已经知道的那样，Object.keys()只访问对象本身和可枚举的属性。这是合理的，因为大多数时候只有这些属性需要评估。
让我们看一个对象拥有和继承属性的例子。Object.keys()只返回自己的属性键（key）：

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

Object.keys(natureColors)返回natureColors对象自身和可枚举的属性键：['colorC', 'colorD']。natureColors包含从simpleColors原型对象继承的属性。然而，Object.keys()函数会跳过它们。

Object.values()和Object.entries()访问对象的属性采用相同的标准：拥有和可枚举属性。让我们来看看：

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