平铺数据、树形数据结构转换

1 树形结构转为平铺结构

1.1 示例数据

const dataTree = [{
	"name": "a1-name",
	"id": "a1",
	"parentId": "root",
	"children": [{
		"name": "a2-name",
		"id": "a2",
		"parentId": "a1",
		"children": [{
			"name": "a3-name",
			"id": "a3",
			"parentId": "a2",
			"children": [{
				"name": "a4-name",
				"id": "a4",
				"parentId": "a3"
			}]
		}]
	}]
}, {
	"name": "b1-name",
	"id": "b1",
	"parentId": "root"
}]

1.2 正向平铺

结果的顺序按照 树形结果的顺序，从上到下排

1.2.1 方法

/**
  * 过滤数组 将树状结构转换为平铺数组
  * @param data 树形结构的数据
  */
function treeToArray<T>(data:T[]) {
  const arr:T[] = [];
  const expanded = (datas:T[]) => {
    if (datas && datas.length > 0) {
      datas.forEach((item:any) => {
        arr.push(item);
        if (item.children) {
          expanded(item.children);
          // eslint-disable-next-line no-param-reassign
          delete item.children;
        }
      });
    }
  };
  expanded(data);
  return arr;
}

1.2.2 调用及结果

// 调用
console.log(filterArray(dataTree));

// 结果展示
[{
	"name": "a1-name",
	"id": "a1",
	"parentId": "root"
}, {
	"name": "a2-name",
	"id": "a2",
	"parentId": "a1"
}, {
	"name": "a3-name",
	"id": "a3",
	"parentId": "a2"
}, {
	"name": "a4-name",
	"id": "a4",
	"parentId": "a3"
}, {
	"name": "b1-name",
	"id": "b1",
	"parentId": "root"
}]

1.3 反向平铺

结果的顺序按照 树形结果的顺序，从里到外，先子子级再子级再父级，然后再 先子子级再子级再父级

1.3.1 方法

/**
  * 过滤数组 将树状结构转换为平铺数组
  * @param data 树形结构的数据
  */
function treeToArray<T>(data:T[]) {
  const arr:T[] = [];
  const expanded = (datas:T[]) => {
    if (datas && datas.length > 0) {
      datas.forEach((item:any) => {
        if (item.children) {
          expanded(item.children);
          // eslint-disable-next-line no-param-reassign
          delete item.children;
        }
        arr.push(item);
      });
    }
  };
  expanded(data);
  return arr;
}

1.3.2 调用及结果

// 调用
console.log(filterArray(dataList, 'root'));

// 结果展示
[{
	"name": "a4-name",
	"id": "a4",
	"parentId": "a3"
}, {
	"name": "a3-name",
	"id": "a3",
	"parentId": "a2"
}, {
	"name": "a2-name",
	"id": "a2",
	"parentId": "a1"
}, {
	"name": "a1-name",
	"id": "a1",
	"parentId": "root"
}, {
	"name": "b1-name",
	"id": "b1",
	"parentId": "root"
}]

2 平铺结构转为树形结构

说明：根节点的 ID 为 root ，子节点根据 parentId 字段去对应父节点

2.1 示例数据

const dataList = [
  {
    name: 'a1-name',
    id: 'a1',
    parentId: 'root',
  }, {
    name: 'a2-name',
    id: 'a2',
    parentId: 'a1',
  }, {
    name: 'a3-name',
    id: 'a3',
    parentId: 'a2',
  }, {
    name: 'a4-name',
    id: 'a4',
    parentId: 'a3',
  }, {
    name: 'b1-name',
    id: 'b1',
    parentId: 'root',
  },
];

2.2 方法

/**
  * 过滤数组 将数据转换为树状结构
  * @param data 数据列表
  * @param parent 父节点的 id
  */
function filterArray(data, parent) {
  const tree = [];
  if (!data.length) {
    return [];
  }
  let temp;
  for (let i = 0; i < data.length; i++) {
    if (data[i].parentId === parent) {
      const obj = data[i];
      temp = filterArray(data, data[i].id);
      if (temp.length > 0) {
        obj.children = temp;
      }
      tree.push(obj);
    }
  }
  return tree;
}

2.3 调用及结果

// 调用
console.log(filterArray(dataList, 'root'));

// 结果展示
[{
	"name": "a1-name",
	"id": "a1",
	"parentId": "root",
	"children": [{
		"name": "a2-name",
		"id": "a2",
		"parentId": "a1",
		"children": [{
			"name": "a3-name",
			"id": "a3",
			"parentId": "a2",
			"children": [{
				"name": "a4-name",
				"id": "a4",
				"parentId": "a3"
			}]
		}]
	}]
}, {
	"name": "b1-name",
	"id": "b1",
	"parentId": "root"
}]