Skip to content

JS 数组对象转换为树状数据

Published: at 01:28 PMSuggest Changes

看到一段代码,它的这种方式,有点类似于操作数据引用,而不是暴力递归,这是我想要但是不敢用的。 就好像玩链表玩 c 的指针一样。太强了。

// 发布订阅模式
// 转换前:
let source = [
  {
    id: 1,
    pid: 0,
    name: 'body',
  },
  {
    id: 2,
    pid: 1,
    name: 'title',
  },
  {
    id: 3,
    pid: 2,
    name: 'div',
  },
];
// 转换为:
let tree = [
  {
    id: 1,
    pid: 0,
    name: 'body',
    children: [
      {
        id: 2,
        pid: 1,
        name: 'title',
        children: [
          {
            id: 3,
            pid: 1,
            name: 'div',
          },
        ],
      },
    ],
  },
];

function jsonToTree(data) {
  debugger;
  // 初始化结果数组,并判断输入数据的格式
  let result = [];
  if (!Array.isArray(data)) {
    return result;
  }
  // 使用 map,将当前对象的 id 与当前对象对应存储起来
  let map = {};
  data.forEach((item) => {
    map[item.id] = item;
  });
  //
  data.forEach((item) => {
    let parent = map[item.pid];
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      result.push(item);
    }
  });
  return result;
}

console.log('jsonToTree :>> ', jsonToTree(source));

如果是我(用笨办法去暴力递归,效率低)

我会先遍历一遍,查找 id,如果找到 id 了 push 到 children,遍历的过程中碰到 children,进去暴力递归,找到对应 id = pid,然后再 push 进去。

不说了,我先用笨办法写一个。

function arrayToTree(params) {
  let newArray = [];
  for (let index = 0; index < params.length; index++) {
    const element = params[index];
    newArray = deepAdd(newArray,element)
  }
  return newArray;
}

function deepAdd(array, add) {
  let newArray = array;
  if (array && array.length == 0) {
    return [add]
  }
  let { pid } = add;
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    let { id, children } = element;
    if (id == pid) {
      newArray[index].children
        ? newArray[index].children.push(add)
        : (newArray[index].children = [add]);
      break;
    }
    if (children) {
      newArray[index].children = deepAdd(children, add);
    }
  }
  return newArray
}

console.log('jsonToTree :>> ', arrayToTree(source));

类似的场景

{% post_link js-tree-array-to-object JS Tree 树状数据 Object Array 互转 %}


Previous Post
JavaScript 随机排序数组
Next Post
JS 字符串比较