前端数组对象树结构扁平化

前端数组对象树结构扁平化是指将嵌套的对象数组转换成一维的、简单的键值对数组。这种操作通常发生在需要处理数据展示或API请求返回的数据，以便更容易地遍历和操作。例如，假设你有这样一个树状结构：

{
  "id": 1,
  "name": "Root",
  "children": [
    {
      "id": 2,
      "name": "Child 1",
      "children": [
        {"id": 4, "name": "Grandchild 1"},
        {"id": 5, "name": "Grandchild 2"}
      ]
    },
    {
      "id": 3,
      "name": "Child 2"
    }
  ]
}

扁平化后可能会变成：

[
  { id: 1, name: 'Root' },
  { id: 2, name: 'Child 1', children: [{ id: 4, name: 'Grandchild 1' }, { id: 5, name: 'Grandchild 2' }] },
  { id: 3, name: 'Child 2' }
]

这个过程可以使用递归或循环的方式实现，JavaScript中常见的库如lodash或手写的for循环都能完成这样的任务。

相关问题

lodash将数组对象树结构扁平化写法

在lodash库中，将数组对象树结构扁平化通常可以使用`_.flattenDeep`函数。这个函数会递归地展开嵌套的对象数组，将其转换成单一层次的数组。例如，假设你有一个像这样的对象数组：

const nestedArray = [
  { key: 'a', value: [1, { b: [2, { c: [3, { d: 4 }] }]}] },
  { key: 'e', value: [5, { f: [6, { g: 7 }] }] }
];

你可以使用`_.flattenDeep(nestedArray)`来扁平化它，得到的结果将会是一个新的数组：

[
  { key: 'a', value: 1 },
  { key: 'b', value: 2 },
  { key: 'c', value: 3 },
  { key: 'd', value: 4 },
  { key: 'e', value: 5 },
  { key: 'f', value: 6 },
  { key: 'g', value: 7 }
]

js 扁平化数组转树结构对象

扁平化数组转树结构对象是一种常见的数据处理方式，在 JavaScript 中可以通过递归来实现。具体步骤如下：

1. 首先对扁平化数组进行排序，以保证每个父节点在子节点之前处理。
2. 通过递归，遍历整个扁平化数组。如果当前节点是根节点，直接添加到结果数组中；否则，将当前节点添加到父节点的 children 数组中。
3. 最后返回结果数组。

下面是一个示例代码，假设数据格式如下：

const arr = [
  { id: 1, name: 'parent', parentId: null },
  { id: 2, name: 'child1', parentId: 1 },
  { id: 3, name: 'child2', parentId: 1 },
  { id: 4, name: 'grandchild1', parentId: 2 },
  { id: 5, name: 'grandchild2', parentId: 2 },
  { id: 6, name: 'grandchild3', parentId: 3 }
];

代码如下：

function arrayToTree(arr, parentId = null) {
  const result = [];
  const sortedArr = arr.sort((a, b) => a.parentId - b.parentId);
  for (const item of sortedArr) {
    if (item.parentId === parentId) {
      const children = arrayToTree(sortedArr, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
  }
  return result;
}

const tree = arrayToTree(arr);
console.log(tree);