如何在ES6/7中优雅实现JavaScript对象与数组的转换？

嘿，作为JS新手就关注到不可变操作这点真的很赞！完全不用写冗长的for循环，咱们用ES6+的原生API或者lodash就能简洁优雅地完成这个转换，而且全程都是纯函数式的不可变操作，完美符合你的需求～

方法一：纯ES6原生实现 #

咱们可以利用Object.entries()配合Array.map()来完成，全程没有可变变量，都是返回新的数组/对象：

const originalObj = { book: { 1001: 'a', 1002: 'b', 1003: 'c' }, game: { 1001: 'a' } };

const result = Object.entries(originalObj).map(([category, items]) => ({
  category,
  item: Object.entries(items).map(([id, name]) => ({
    id: Number(id), // 把字符串类型的id转成数字，匹配目标结构
    name
  }))
}));

console.log(result);

步骤拆解： #

1. Object.entries(originalObj)：把外层对象转换成[['book', {...}], ['game', {...}]]格式的键值对数组
2. 外层map：遍历每个键值对，解构出category（分类名）和items（对应分类下的id-name对象），返回包含category和item属性的新对象
3. 内层Object.entries(items)：把每个分类下的对象也转成键值对数组，再通过map转成{id: 数字, name: 值}的格式，确保id类型和目标结构一致

方法二：用lodash简化代码 #

如果你的项目已经引入了lodash，代码可以更简洁直观：

const _ = require('lodash'); // 或ES模块导入：import _ from 'lodash';

const originalObj = { book: { 1001: 'a', 1002: 'b', 1003: 'c' }, game: { 1001: 'a' } };

const result = _.map(originalObj, (items, category) => ({
  category,
  item: _.map(items, (name, id) => ({ id: Number(id), name }))
}));

console.log(result);

lodash的_.map支持直接遍历对象的键值对，省去了Object.entries的转换步骤，写法更简洁，同样是纯函数式的不可变操作，不会修改原对象。

两种方法都完全避开了for循环，所有操作都是返回新数据，没有任何可变变量，完美贴合你的需求～

内容的提问来源于stack exchange，提问作者wk9876