JS将数组转化为树（已封装成函数，拿来即用）

前端小端长

于 2021-06-23 15:04:58 发布

阅读量915

点赞数

分类专栏：前端常用轮子实现及封装

本文链接：https://blog.youkuaiyun.com/zhang1339435196/article/details/118153600

版权

前端常用轮子实现及封装专栏收录该内容

13 篇文章

订阅专栏

这是一个用于将列表数据转换为树形结构的JavaScript函数`listToTree`，通过指定元素的`id`和`parentId`字段进行转换。函数遍历列表，查找每个元素的父节点，并将其添加到父节点的`children`数组中，最终返回树形结构的数据。

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

/**
 * listToTree.js
 *
 * @param {*} list  将要变成树的列表
 * @param {*} id    元素id字段名称
 * @param {*} parentId 元素父id名称
 * @return {*} tree
 * 张志光 2021/6/23
 */
const listToTree = function(list, id, parentId) {
  let tree = [];
  tree = list.filter(
    item1 =>
      !list.find((item2, index) => {
        // 如果有父节点
        if (item1[parentId] === item2[id]) {
          // 放进它父节点的children数组中；如果children不存在，初始化为空数组
          list[index].children = list[index].children || [];
          list[index].children.push(item1);
        }
        // find返回第一个符合条件的元素，找到后，剩余的元素不再判断
        return item1[parentId] === item2[id];
      })
  );
  return tree;
};

export default listToTree;