点亮繁杂数据之美：扁平数组巧变树形结构的艺术

前端

2023-09-17 00:11:40

前端开发中，我们经常会遇到这样的场景：后端返回的菜单数据是扁平化的，没有层次结构。但前端需要渲染出具有层次结构的菜单，这时就需要将扁平化数组转换为树形数据。

本篇文章将介绍如何使用JavaScript中的reduce函数来实现扁平化数组到树形数据的转换，让开发者们掌握数据转换的艺术，在繁杂的数据中理出清晰脉络，让信息在结构之美中绽放光芒。

扁平化数组概述

扁平化数组，顾名思义，就是将一个多维数组或者具有层次结构的数据结构，转换成一维数组，元素之间没有层级关系。这在某些情况下非常有用，比如在需要将数据存储到数据库中时。

树形数据概述

树形数据是一种常见的数据结构，它可以用来表示具有层次结构的数据。树形数据的每个节点都可以有多个子节点，子节点又可以有自己的子节点，以此类推。

JavaScript中的reduce函数

reduce函数是JavaScript中内置的一个高阶函数，它可以对数组中的元素进行累积操作，并返回一个累积后的值。reduce函数接受两个参数，一个是累积函数，另一个是初始值。

扁平化数组到树形数据的转换

使用reduce函数来将扁平化数组转换为树形数据，我们可以按照以下步骤进行：

定义一个累积函数，该函数接受两个参数：累积值和当前元素。
在累积函数中，将当前元素作为子节点添加到累积值中。
在累积函数中，返回累积值。
使用reduce函数来累积数组中的元素，并生成树形数据。

以下是一个示例代码，展示如何使用reduce函数将扁平化数组转换为树形数据：

const flattenArray = [{ id: 1, parentId: null }, { id: 2, parentId: 1 }, { id: 3, parentId: 1 }, { id: 4, parentId: 2 }, { id: 5, parentId: 2 }, { id: 6, parentId: 3 }, { id: 7, parentId: 3 }];

const treeData = flattenArray.reduce((acc, cur) => {
  if (cur.parentId === null) {
    acc.push({ id: cur.id, children: [] });
  } else {
    const parentNode = acc.find(node => node.id === cur.parentId);
    parentNode.children.push({ id: cur.id, children: [] });
  }

  return acc;
}, []);

console.log(treeData);