javascript 对象数组转换详解

本文介绍如何将一个键值对形式的 JavaScript 对象，其中值是子数组，转换为一个对象数组。每个对象包含键名、ID 和对应的子对象数组。这种转换在处理层级数据，例如将扁平数据转换为树形结构时非常有用。

原始数据结构：

假设原始数据结构如下：

const obj = {
  "a": ["a1", "a2"],
  "b": ["b1", "b2", "b3"] 
};

目标数据结构：

立即学习“Java免费学习笔记（深入）”；

目标是将其转换为以下结构：

const list = [
  { id: 1, name: 'a', childList: [{ id: 3, name: 'a1' }, { id: 4, name: 'a2' }] },
  { id: 2, name: 'b', childList: [{ id: 5, name: 'b1' }, { id: 6, name: 'b2' }, { id: 7, name: 'b3' }] }
];

实现方法：

我们可以利用 Object.entries 和 reduce 方法高效地完成转换。以下代码展示了转换过程：

let obj = {
  "a": ["a1", "a2"],
  "b": ["b1", "b2", "b3"]
};
let id = 1;
const list = Object.entries(obj).reduce((acc, [name, val]) => {
  acc.push({
    id: id++,
    name,
    childList: val.map(childName => ({ id: id++, name: childName }))
  });
  return acc;
}, []);

这段代码首先使用 Object.entries 将对象转换为键值对数组。然后，reduce 方法迭代每个键值对，创建一个新对象。新对象包含 id（从 1 开始递增）、name（来自原始对象的键）和 childList（通过 map 方法将原始数组中的每个元素转换为包含 id 和 name 的新对象）。id 在整个过程中持续递增，确保每个子对象都有唯一的 ID。最终，reduce 方法返回包含所有转换后对象的数组。

通过这种方法，我们可以轻松地将复杂的键值对子数组对象转换为更易于管理和操作的对象数组。