js树形数据结构与一维数组相互转换

最新推荐文章于 2023-11-21 17:08:12 发布

原创最新推荐文章于 2023-11-21 17:08:12 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据结构 #前端 #vue.js

文章介绍了如何使用JavaScript实现树形数据结构（如嵌套对象数组）与一维数组之间的转换，通过`flattenTree`函数将树形数据转换为一维数组，以及`arrayToTree`函数将一维数组重构为树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、树形数据转为一维数组


//   // 定义一个树形数据结构
const treeData = [
  {
    id: 1,
    label: 'Node 1',
    children: [
      {
        id: 2,
        label: 'Node 1.1',
        children: [
          {
            id: 4,
            label: 'Node 1.1.1',
          },
          {
            id: 5,
            label: 'Node 1.1.2',
          },
        ],
      },
      {
        id: 3,
        label: 'Node 1.2',
      },
    ],
  },
];

// 定义一个函数来将树形数据结构转换为一维数组
function flattenTree(treeData) {
  const result = [];
  const flatten = (node) => {
    result.push(node);
    if (node.children) {
      for (const child of node.children) {
        flatten(child);
      }
    }
  }
  for (const node of treeData) {
    flatten(node);
  }
  return result;
}

const flatArray = flattenTree(treeData);
console.log('树形数据转换成一维数组的数据-----------',flatArray);

二、一维数组转成树形数据结构

function arrayToTree(array) {
  const map = {};
  const result = [];
  // 构建一个映射，以便快速查找每个节点
  array.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });

  // 将节点添加到树结构中
  array.forEach(item => {
    if (item.parentId) {
      // 如果有 parentId，则将当前节点添加到父节点的 children 数组中
      if (map[item.parentId]) {
        map[item.parentId].children.push(map[item.id]);
      }
    } else {
      // 没有 parentId 的节点将被视为根节点
      result.push(map[item.id]);
    }
  });

  return result;
}

// 示例数据
const flatArray = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 2', parentId: null },
  { id: 3, name: 'Node 3', parentId: null},
  { id: 6, name: 'Node 1.1.1', parentId: 1 },
  { id: 7, name: 'Node 1.1.2', parentId: 1 },
  { id: 4, name: 'Node 2.1.1', parentId: 2 },
  { id: 5, name: 'Node 2.1.2', parentId: 2 },
];

const treeData = arrayToTree(flatArray);
console.log('一维数组转成树形数据-----------',treeData)