【JavaScript】数组转树形结构

数组转树形结构方法

/**
* arr: 数组
* idStr：数组中每条数据的ID的key
* pidStr：数组中每条数据的父ID 的key
* chindrenStr：生成的树形结构链接key
* */
const transTreeData = function (arr, idStr, pidStr, chindrenStr) {
  let r = [],
    hash = {},
    id = idStr,
    pid = pidStr,
    children = chindrenStr,
    len = arr.length;
  for (let i = 0; i < len; i++) {
    hash[arr[i][id]] = arr[i];
  }
  for (let j = 0; j < len; j++) {
    let aVal = arr[j],
      hashVP = hash[aVal[pid]];
    if (hashVP) {
      !hashVP[children] && (hashVP[children] = []);
      hashVP[children].push(aVal);
    } else {
      r.push(aVal);
    }
  }
  return r;
}

步骤讲解

1、传入参数：
arr：数组；
idStr：数组中每条数据的ID的key；
pidStr：数组中每条数据的父ID 的key；
chindrenStr：生成的树形结构链接key；

2、方法逻辑详解
【1】定义中间参数
r：最后的树型结构的结果；
hash：数组转对象，以 id 为key；
id ：转存idStr；
pid 转存pidStr；
children：转存 chindrenStr；
len：循环数组的长度，为传入数组的长度；
【2】把数组转成对象，以id为key，存入hash中；
【3】【1】把数组循环的当前项存入变量aVal 中；
【3】【2】从hash中取出当前循环的数组当前项的父类id的value；
【3】【3】判断是否存在父类，如果存在则将当前数组存入父类的子类；
【3】【4】如果不存在父类，则直接将数据存入返回数组r中；

知识点

浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；
区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；
以上数组转树结构，因为是浅拷贝，所以可以实现两个循环就生成无限级树形结构的数组。