数组对象互转 ES6、ES7

ES2017 提供了三个可以将对象转换为数组的方法。数组包含了一系列的方法，通过将对象转化为数组，就可以让它们访问这些方法。

const zoo = {
  lion: '🦁',
  panda: '🐼'
};

Object.keys(zoo)
// ['lion', 'panda']

Object.values(zoo)
// ['🦁', '🐼']

Object.entries(zoo)
// [ ['lion', '🦁'], ['panda', '🐼'] ]

很久很久以前，在一个遥远的星球，那里没有 ES6。人们为了将对象转化为数组，只能这样做：

var numbers = {
  one: 1,
  two: 2
};
var keys = [];
for (var number in numbers) {
  if(numbers.hasOwnProperty(number)){
    keys.push(number)
  }
}
keys; // [ 'one', 'two' ]

ES6 - Object.keys

随着 ES6 的出现，一切都变得美好起来。ES6中内置的 Object.Keys方法可以快速将对象中的所有键转换为数组。

const numbers = {
  one: 1,
  two: 2
}
Object.keys(numbers);
// [ 'one', 'two' ]

美好的时光总是短暂的，没过多久，人们就开始抱怨：“哦，我的上帝，为什么我只能将键转换为数组，我想要值”。

ES2017 - Object.values

嗨，我是 ES2017，我可以实现你所有的愿望。通过 ES2017 提供的 Object.values方法，你现在可以轻松的将值提取到数组中。

const numbers = {
  one: 1,
  two: 2
}
Object.values(numbers);
// [ 1, 2 ]

ES2017 - Object.entries

不仅于此，ES2017还提供了另外一个方法，可以同时将键值提取到数组中。

const numbers = {
  one: 1,
  two: 2
}
Object.entries(numbers);
// [ ['one', 1], ['two', 2] ]

Object.entries + 解构

Object.entries 提取出来的是一个嵌套数组，我们可以使用解构来获取数组中的值。

const numbers = {
  one: 1
};
const objectArray = Object.entries(numbers);
objectArray.forEach(([key, value]) => {
  console.log(key); 	// 'one'
  console.log(value); 	// 1
})

浏览器兼容性

Object.keys 的兼容性较好，重要的是它支持IE。Object.values 和 Object.entries 不支持 IE，但是可以使用 polyfill 来进行支持。

等等，还有...

上面我们已经介绍了如何将对象转化为数组，那么如何将数组转化为对象呢？不用担心，JavaScript 已经提供了一个新方法 Object.fromEntries 可以将数组转化为对象，它的作用与 Object.entries 相反。

const array = [
  [ 'one', 1 ],
  [ 'two', 2 ]
];

Object.fromEntries(array);
// { one: 1, two: 2 }