一维数组根据父id转为嵌套树结构

做菜单管理的时候，后端返回的数据结构是一维数组时，自己需要把它处理成嵌套的格式，用于菜单页面的展示，效果如下。

未处理前数据格式：

let aa = [{
	"id": 6,
	"name": "首页",
	"parent_id": 1,
	"path": "/text/xx",
	"status": true,
	"sep": 1
}, {
	"id": 8,
	"name": "资产管理",
	"parent_id": 1,
	"path": "/text/xx",
	"status": true,
	"sep": 1
}, {
	"id": 10,
	"name": "数据分析",
	"parent_id": 1,
	"path": "/text/xx",
	"status": true,
	"sep": 3
}, {
	"id": 15,
	"name": "监控大屏",
	"parent_id": 10,
	"path": "/text/xx",
	"status": true,
	"sep": 11
}, {
	"id": 16,
	"name": "用户报表",
	"parent_id": 10,
	"path": "/text/xx",
	"status": true,
	"sep": 22
}, {
	"id": 17,
	"name": "主机列表",
	"parent_id": 8,
	"path": "/text/xx",
	"status": true,
	"sep": 1
}, {
	"id": 18,
	"name": "均衡列表",
	"parent_id": 8,
	"path": "/text/xx",
	"status": true,
	"sep": 2
}, {
	"id": 23,
	"name": "快照",
	"parent_id": 8,
	"path": "/text/xx",
	"status": true,
	"sep": 5
}, {
	"id": 24,
	"name": "快照管理",
	"parent_id": 23,
	"path": "/text/xx",
	"status": true,
	"sep": 1
}, {
	"id": 25,
	"name": "快照链管理",
	"parent_id": 23,
	"path": "/text/xx",
	"status": true,
	"sep": 2
}, {
	"id": 37,
	"name": "域名管理",
	"parent_id": 1,
	"path": "/text/xx",
	"status": true,
	"sep": 2
}]

处理方法如下：

/**
 *一维数组改成children多维数组
 */
function listToTree (data) {
  let arr = JSON.parse(JSON.stringify(data))
  const listChildren = (obj, filter) => {
    [arr, obj.children] = arr.reduce((res, val) => {
      if (filter(val)) { res[1].push(val) } else { res[0].push(val) }
      return res
    }, [[], []])
    obj.children.forEach(val => {
      if (arr.length) { listChildren(val, obj => obj.parent_id === val.id) }
    })
    if (!obj.children.length) {
      delete obj.children
    }
  }
  const tree = {}
  listChildren(tree, val => arr.findIndex(i => i.id === val.parent_id) === -1)
  return tree.children
}

打印输出的代码格式：

[{
		"id": 6,
		"name": "首页",
		"parent_id": 1,
		"path": "/text/xx",
		"status": true,
		"sep": 1
	},
	{
		"id": 8,
		"name": "资产管理",
		"parent_id": 1,
		"path": "/text/xx",
		"status": true,
		"sep": 1,
		"children": [{
				"id": 17,
				"name": "主机列表",
				"parent_id": 8,
				"path": "/text/xx",
				"status": true,
				"sep": 1
			},
			{
				"id": 18,
				"name": "均衡列表",
				"parent_id": 8,
				"path": "/text/xx",
				"status": true,
				"sep": 2
			}, {
				"id": 23,
				"name": "快照",
				"parent_id": 8,
				"path": "/text/xx",
				"status": true,
				"sep": 5,
				"children": [{
					"id": 24,
					"name": "快照管理",
					"parent_id": 23,
					"path": "/text/xx",
					"status": true,
					"sep": 1
				}, {
					"id": 25,
					"name": "快照链管理",
					"parent_id": 23,
					"path": "/text/xx",
					"status": true,
					"sep": 2
				}]
			}
		]
	},
	{
		"id": 10,
		"name": "数据分析",
		"parent_id": 1,
		"path": "/text/xx",
		"status": true,
		"sep": 3,
		"children": [{
			"id": 15,
			"name": "监控大屏",
			"parent_id": 10,
			"path": "/text/xx",
			"status": true,
			"sep": 11
		}, {
			"id": 16,
			"name": "用户报表",
			"parent_id": 10,
			"path": "/text/xx",
			"status": true,
			"sep": 22
		}]
	},
	{
		"id": 37,
		"name": "域名管理",
		"parent_id": 1,
		"path": "/text/xx",
		"status": true,
		"sep": 2
	}
]

 

 其他相关联的数据格式处理：

一维数组根据父id转为嵌套树结构

多维数组转成一维数组

children嵌套的多维数组关键字排序

* 喜欢可点赞/ 收藏/ 评论，给我动力持续更新哒！\‘▽′/