js实现数组转树示例

下面是详细讲解“JS实现数组转树示例”的攻略：

什么是数组转树

数组转树是将一个平铺的数组转换成一颗树形结构，该过程通常用于前端渲染树形结构。通常一个具有父子关系的数据明显都有一个parent和children属性，通常这种结构主要应用于分类、目录等有层级结构的数据类型中，例如文件夹、部门机构等。对于这种关系型结构数据，前后端常用的数据传输包括json格式和xml格式。

数组转树的过程

数组转树的过程分为两个步骤：

1. 遍历数组，构造每个树节点的基本属性。
2. 把构造出来的节点组织成树节点结构。

其中，遍历为整个数组，在循环过程中，我们对于树节点进行实例化，每个树节点具有四类基本属性

• 节点编号
• 父节点编号
• 当前节点对象
• 孩子节点数组

接下来我们就来分别进行实现：

构造每个树节点的基本属性

我们要构造每个树节点的基本属性，于是我们遍历这个数组，并且进行以下操作：

• 把每个节点实例化为一个具有编号、自身对象、父亲节点、儿子节点属性的节点对象，并存入一个对象中。
• 利用每个节点自带的父亲节点编号，把该节点加进该节点的父亲的儿子节点数组中。
• 对于根节点，我们规定其父亲节点编号为0，通过分类来处理孩子节点，
  具体实现代码如下：

function arrayToTree(array) {
   var result = [];
   var map = {};
   for(var i=0;i<array.length;i++){
      var node = array[i];
      node.children = []; // 孩子节点数组
      map[node.id] = node; // 存储节点编号和节点对象映射
   }
   for(var i=0;i<array.length;i++){
      var node = array[i];
      if(node.parentId !== 0){
         var parent = map[node.parentId];
         if(parent){
            parent.children.push(node); // 给父亲节点的儿子节点数组添加每个节点
         }
      }else {
         result.push(node); // 根节点添加到结果中
      }
   }
   return result;
}

把构造的节点组织成树节点结构

构造完每个树节点的基本属性后，我们需要把每个节点按照其层级、节点编号、父节点编号等从底层到顶层依次组织成一个树结构：

function arrayToTree(array) {
   var result = [];
   var map = {};
   for(var i=0;i<array.length;i++){
      var node = array[i];
      node.children = []; // 孩子节点数组
      map[node.id] = node; // 存储节点编号和节点对象映射
   }
   for(var i=0;i<array.length;i++){
      var node = array[i];
      if(node.parentId !== 0){
         var parent = map[node.parentId];
         if(parent){
            parent.children.push(node); // 给父亲节点的儿子节点数组添加每个节点
         }
      }else {
         result.push(node); // 根节点添加到结果中
      }
   }
   return result;
}

示例说明

实例1：基于分类的数组转树

假设我们有如下申请单分类的数据结构，该结构为一个数组，每个子类对象有一个分类编号，一个父类编号和一个分类名称：

var data = [
   {id: 1, parentId: 0, name: '申请单'},
   {id: 2, parentId: 1, name: '条件'},
   {id: 3, parentId: 1, name: '图像'},
   {id: 4, parentId: 1, name: '文件'},
   {id: 5, parentId: 2, name: '数量'},
   {id: 6, parentId: 3, name: '分辨率'},
   {id: 7, parentId: 4, name: '大小'}
];

我们用上面的代码将该数组转换成树节点结构如下所示：

{
   id: 1,
   parentId: 0,
   name: '申请单',
   children: [
      {
         id: 2,
         parentId: 1,
         name: '条件',
         children: [
            {
               id: 5,
               parentId: 2,
               name: '数量',
               children: []
            }
         ]
      },
      {
         id: 3,
         parentId: 1,
         name: '图像',
         children: [
            {
               id: 6,
               parentId: 3,
               name: '分辨率',
               children: []
            }
         ]
      },
      {
         id: 4,
         parentId: 1,
         name: '文件',
         children: [
            {
               id: 7,
               parentId: 4,
               name: '大小',
               children: []
            }
         ]
      }
   ]
}

实例2：基于产品属性的数组转树

假设我们有如下颜色、尺寸、版本三种产品属性，该结构为一个数组，每个子类对象有一个分类编号、一个父类编号和一个分类名称：

var data = [
   {id: 1, parentId: 0, name: '产品'},
   {id: 2, parentId: 1, name: '免打孔'},
   {id: 3, parentId: 1, name: '挂钩'},
   {id: 4, parentId: 1, name: '鞋带'},
   {id: 5, parentId: 2, name: '颜色'},
   {id: 6, parentId: 2, name: '尺寸'},
   {id: 7, parentId: 2, name: '版本'},
   {id: 8, parentId: 5, name: '黑色'},
   {id: 9, parentId: 5, name: '白色'},
   {id: 10, parentId: 6, name: '35-36码'},
   {id: 11, parentId: 6, name: '37-38码'},
   {id: 12, parentId: 7, name: 'S'},
   {id: 13, parentId: 7, name: 'M'},
   {id: 14, parentId: 7, name: 'L'}
];

我们用上面的代码将该数组转换成树节点结构如下所示：

{
   id: 1,
   parentId: 0,
   name: '产品',
   children: [
      {
         id: 2,
         parentId: 1,
         name: '免打孔',
         children: [
            {
               id: 5,
               parentId: 2,
               name: '颜色',
               children: [
                  {
                     id: 8,
                     parentId: 5,
                     name: '黑色',
                     children: []
                  },
                  {
                     id: 9,
                     parentId: 5,
                     name: '白色',
                     children: []
                  }
               ]
            },
            {
               id: 6,
               parentId: 2,
               name: '尺寸',
               children: [
                  {
                     id: 10,
                     parentId: 6,
                     name: '35-36码',
                     children: []
                  },
                  {
                     id: 11,
                     parentId: 6,
                     name: '37-38码',
                     children: []
                  }
               ]
            },
            {
               id: 7,
               parentId: 2,
               name: '版本',
               children: [
                  {
                     id: 12,
                     parentId: 7,
                     name: 'S',
                     children: []
                  },
                  {
                     id: 13,
                     parentId: 7,
                     name: 'M',
                     children: []
                  },
                  {
                     id: 14,
                     parentId: 7,
                     name: 'L',
                     children: []
                  }
               ]
            }
         ]
      },
      {
         id: 3,
         parentId: 1,
         name: '挂钩',
         children: []
      },
      {
         id: 4,
         parentId: 1,
         name: '鞋带',
         children: []
      }
   ]
}

希望这些说明对你有所帮助。