在 Javascript 开发中，经常需要遍历对象的属性，以便对它们进行操作。然而，在 ES6 之前，对象属性的遍历并不保证顺序，这给需要按照特定顺序处理属性的代码带来了麻烦。ES11 新增了一个实例方法，解决了这个问题。本文将介绍这个新方法的用法和示例。
问题描述
在 ES6 之前，对象属性的遍历顺序是不确定的。即使你按照特定顺序将属性添加到对象中，也不能保证它们在遍历时的顺序一定是按照你预期的顺序来的。这个问题可能导致在特定情况下出现 bug，例如如果需要按照特定顺序来遍历属性并执行某些操作，就会有问题。
假设我们有一个对象 user，它有两个属性：name 和 age：
const user = {
name: 'Alice',
age: 30
};如果我们对它进行遍历，可能得到的结果如下：
for (let prop in user) {
console.log(prop);
}
// Output:
// age
// name这里并不是按照我们添加属性的顺序来遍历的，而是按照属性名的 ASCII 码顺序来遍历的，这显然和我们的预期不符。
解决方案：Object.entries 和 Map 对象
在 ES11 中，新增了一个实例方法 Object.fromEntries()，可以将 Map 对象或者由键值对组成的数组转化为对象，并保持键值对的顺序。这个新的方法可以用来解决对象属性无序遍历的问题。
我们先使用 Object.entries() 将对象转化为由键值对组成的数组，然后可以对这个数组按照我们需要的顺序进行排序，最后再使用 Object.fromEntries() 将排序后的数组转化为对象。
例如，我们可以手动定义一个包含属性顺序的数组顺序：
const propertyOrder = ['name', 'age'];
const sortedProperties = Object.entries(user)
.sort(([key1, value1], [key2, value2]) => {
return propertyOrder.indexOf(key1) - propertyOrder.indexOf(key2);
});
const sortedUser = Object.fromEntries(sortedProperties);这个代码片段先定义了一个包含属性顺序的数组 propertyOrder，然后使用 Object.entries() 将 user 对象转化为一个数组，这个数组的每个元素都是一个键值对。我们可以使用 sort() 方法对这个数组进行排序，前面的元素按照 propertyOrder 数组中的顺序排序，之后的元素按照它们在原对象中出现的顺序排序。最后使用 Object.fromEntries() 将排序后的数组转化为对象 sortedUser。
这里我们使用了箭头函数和数组解构，如果你对它们不熟悉，可以参考示例代码中的注释。如果你对属性顺序想要更加动态地控制，可以根据具体需求修改 sort() 方法的实现。
示例代码
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
age: 30
};
const propertyOrder = ['name', 'age'];
const sortedProperties = Object.entries(user)
.sort(([key1, value1], [key2, value2]) => {
return propertyOrder.indexOf(key1) - propertyOrder.indexOf(key2);
});
const sortedUser = Object.fromEntries(sortedProperties);
console.log(sortedUser);
// Output:
// {name: 'Alice', age: 30}在这个示例代码中，我们手动定义了属性名的顺序，然后使用 Object.entries() 和 sort() 方法将 user 对象按照这个顺序排序，并将结果存储在 sortedUser 对象中。最后将 sortedUser 输出到控制台。
总结
ES11 新增了一个实例方法 Object.fromEntries()，可以将 Map 对象或者由键值对组成的数组转化为对象，并保持键值对的顺序。这个方法可以用来解决对象属性无序遍历的问题。在实际编程中，我们可以手动定义一个包含属性顺序的数组，然后对属性进行排序，最后再转化为对象。这个方法是比较简单实用的，能有效提升代码健壮性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501762795b1f8cacdf2e28b