浅析Object.entries()方法的使用及解决使用for of或for in遍历对象的问题和普通对象与Map对象互相转换的问题

一、Object.entries() 方法的使用

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

2、实例代码：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// 类数组对象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// 随机排序的类数组对象：这里需要注意 100 排在后面
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo 是不可枚举属性
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// 非对象参数将被强制为对象
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// 优雅的遍历对象键值
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
// 或者使用数组遍历
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"

　　这里需要注意的是：数字属性字段的排序，以及如何优雅的遍历对象的键值对。

　　以及需要注意：如果原对象的属性名是一个 Symbol 值，该属性会被忽略。

Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]

3、将 Object 转为 Map

　　new Map() 构造函数接受一个可迭代的 entries。借助Object.entries方法你可以很容易的将Object转换为Map：

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map);
// VM579:3 Map(2) {'foo' => 'bar', 'baz' => 42}

4、Polyfill

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };

二、Object.entries 常见应用

1、解决使用 for of 或 for in 遍历对象的问题

　　很多初学前端的小伙伴可能都写过下面这个代码：

let obj = {
  a: 1,
  b: 2
}
for (let value of obj) {
  // ...
}

　　但是运行一下就发现，报错了：Uncaught TypeError: obj is not iterable

　　于是乎，遍历普通对象就变成了清一色的 for...in 遍历。但由于 for...in 不光会遍历对象的自有属性，还会遍历到对象原型上，因此我们在使用的时候还需要加一个过滤，例如：

for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    // ...
  }
}

　　可以看到这样写很不优雅。之所以普通对象不能用 for...of 遍历，是因为普通对象没有实现 iterator 接口。而 JS 数组是实现了 iterator 接口的，因此通过 Object.entries 得到的键值对数组就可以使用 for...of 遍历：

for (let [key, value] of Object.entries(obj)) {
  // ...
}

　　Object.entries 会返回对象自身可枚举属性的键值对数组，不包含原型上的属性。

2、普通对象与Map对象相互转换

　　看到项目中将普通对象转为 Map 对象，还在使用 for...in 遍历：

let obj = {
  a: 1,
  b: 2
}
let map = new Map();
for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    map.set(key, obj[key]);
  }
}

　　实际上 Map 构造器可以接受一个键值对数组初始化，这就意味着可以使用 Object.entries 将普通对象转为 Map 对象：

let map = new Map(Object.entries(obj));

　　那么 Map 对象如何转回普通对象呢？还使用遍历吗？不需要，可以使用 Object.fromEntries 静态方法来转换：

let obj = Object.fromEntries(map);

　　Object.entries 和 Object.fromEntries 是两个相反的操作。