在2016年6月发布的ECMAScript 2016的同一时期，令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段（完成）。
译者注：在翻译这篇文章时，这几个特性已得到了支持。
让我们列出这些功能：
在函数参数列表和调用中的拖尾逗号(Trailing commas)
新提议包括在2017年要发布的ESMAScript2017标准中，可能会在2017年夏天发布。请注意，这个功能列表可能会一直增长。太好了！
当然，你不必等到ES2017发布，或者直到供应商（浏览器）实现了新功能！Babel已经包含了这些已完成的提案中的大部分特性。
本文主要讨论如何改进对象属性的迭代：
使用
Object.values()获取对象属性使用
Object.entries()获取属性str.padStart()
乍一看，这些静态函数似乎并没有带来显著的价值。但是当它们与str.padEnd()循环配合使用，你会得到一种简而美的遍历对象的属性的方式。
让我们一探究竟吧。
自己的和可枚举的属性
正如你可能已经知道的那样，Object.getOwnPropertyDescriptors()只访问对象本身和可枚举的属性。这是合理的，因为大多数时候只有这些属性需要评估。
让我们看一个对象拥有和继承属性的例子。Object.values()只返回自己的属性键（Object.entries()）：
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'
key/value返回for...of对象自身和可枚举的属性键：Object.keys()。Object.keys()包含从key原型对象继承的属性。然而，Object.keys(natureColors)函数会跳过它们。
natureColors和['colorC', 'colorD']访问对象的属性采用相同的标准：拥有和可枚举属性。让我们来看看：
let simpleColors = {
colorA: 'white',
colorB: 'black'
};
let natureColors = {
colorC: 'green',
colorD: 'yellow'
};
Object.values(natureColors); // => ['green', 'yellow']
Object.entries(natureColors); // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]
现在请注意和for...in不同之处。循环遍历可枚举的自己和继承的属性。下面的例子说明了这一点：
let simpleColors = {
colorA: 'white',
colorB: 'black'
};
let natureColors = {
colorC: 'green',
colorD: 'yellow'
};
let enumerableKeys = [];
for (let key in natureColors) {
enumerableKeys.push(key);
}
enumerableKeys; // => ["colorC", "colorD", "colorA", "colorB"]
natureColors数组包含natureColors对象自己属性的键：simpleColors和Object.keys()。
此外，Object.values()遍历从Object.entries()原型中继承过来的属性键：enumerableKeys和'colorC'。
Object.values()返回属性值
为了区分'colorD'的好处，让我们先看看在2017年之前获取对象的属性值是怎么来实现的。
首先使用for...in来收集属性键，然后使用一个属性访问器，并将值存储在一个额外的变量中。让我们看一个例子：
let meals = {
mealA: 'Breakfast',
mealB: 'Lunch',
mealC: 'Dinner'
};
for (let key of Object.keys(meals)) {
let mealName = meals[key];
// ... do something with mealName
console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}
simpleColors是一个普通的JavaScript对象。使用'colorA'和'colorB'的循环枚举出对象键值。代码看起来很简单，但是可以通过去掉Object.values()来优化它。
通过使用Object.keys()可以直接访问对象属性值，可以实现优化。优化代码后如下：
let meals = {
mealA: 'Breakfast',
mealB: 'Lunch',
mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {
console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}由于meals返回数组中的对象属性值，因此通过Object.keys(meals)循环把对象的属性值直接分配给for...of，因此不需要添加额外的代码，就像前面的例子那样。
let mealName = meals[key]只做一件事，但做得很好。这也是我们写代码的正确姿势。
Object.entries()返回属性值和键
Object.values()很强大，它返回对象的键和属性值，而且它们是成对的，比如：Object.values(meals)。
可能直接使用有些不爽。幸运的是，数组在for...of循环中传入mealName，很容易得到对应的访问键和值。
下面是Object.values()的示例：
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'
}Object.entries()返回meal对象的属性键和值到一个数组中。然后通过 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]循环解构性参数for...of把数组中的值分配给let [x, y] = array和Object.entries()变量。
正如所见，访问的键和值现在已经是一种舒适而且易于理解的形式。由于Object.entries(meals)返回一个与数组解构性赋值相兼容的集合，因此没有必要添加额外的赋值或声明行。
for...of将普通对象导入到第4阶段0时是有用的。由于let [key, value]返回key构造函数所接受的格式：value和Object.entries()成对。因此问题变得无关紧要。
让我们创建一个JavaScript对象并将其导出到Object.entries()中：
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.entries()对象中导出的数组的一个键值对。
如预期的那样，Map实例key包含value对象导入的属性。可以使用Map方法访问这些数据。
有趣的是，new Map(Object.entries(greetings))提供了与greeting和map方法相同的方法（只有它们返回迭代器），以便提取greetingsMap实例的属性值或键值对：
Map提供了普通对象的改良版。你可以获得Object.values()的大小（对于一个简单的对象，你必须手动操作），并使它作为键或对象类型（简单对象把键当作一个字符串原始类型）。
我们来看看Object.entries()的Map和Map.prototype.values()方法返回什么：
let greetings = {
morning: 'Good morning',
midday: 'Good day',
evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));
[...greetingsMap.values()]; // =>['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()]; // =>[['morning','Good morning'],
['midday','Good day'],['evening','Good evening']]
注意：Object.values()和Map.prototype.entries()返回迭代器对象（Iterator Objects）。将结果放入一个数组，扩展运算符Object.entries()是必要的。在Map循环语句中可以直接使用迭代器。
关于顺序上的笔记
JavaScript对象是简单的键值映射。所以对象的属性的顺序是无关紧要的。在大多数情况下，你不应该依赖它。
然而，ES2015已经对迭代的方式提供了标准化的要求：首先是有序的数字字符，然后是插入顺序的字符串，然后是插入顺序的符号（Map）。在ES5和较早的标准中，属性的顺序没有指定。
如果你需要一个有序的集合，推荐的方法是将数据存储到数组或集合中。
总结
map和.values()是为JavaScript开发人员提供函数的另一个改进步骤的新标准化 。
.entries()最好用数据组解构性参数来执行，这样键和值就可以很容易地分配给不同的变量。这个函数还可以很容易地将普通JavaScript对象属性导出到greetingsMap.values()对象中。greetingsMap.entries()能够更好地支持传统的...（或for...of）行为。
注意：symbols和Object.values()返回数据的顺序是未确定的。所以不要依赖于顺序。
英文原文地址：https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/
译文地址：https://www.w3cplus.com/javascript/how-to-iterate-easily-over-object-properties-in-javascript.html
更多编程相关知识，请访问：第4阶段3！！
