一维数组转多维数组

一维数组转多维数组

我们向后端获取数据，如果取到的数据是一维数组，但是前端却需要用到二维甚至多维数组。不建议直接在后端转换，而是放在前端转换，用前端的算力，内存去运算，从而减轻后端的压力…

一维数组（转换前）

[{
        name: '首页',
        id: 1,
        pid: null,
        isan: false,
        icon: 'layui-icon-home'
    }, {
        name: '系统设置',
        id: 2,
        pid: null,
        isan: false,
        icon: 'layui-icon-set'
    }, {
        name: '模块管理',
        id: 3,
        pid: 2,
        isan: false
    }, {
        name: '用户列表',
        id: 4,
        pid: null,
        isan: false,
        icon: 'layui-icon-user'
    }, {
        name: '用户列表',
        id: 5,
        pid: 4,
        isan: false
    }, {
        name: '微码列表',
        id: 6,
        pid: 4,
        isan: false
    }, {
        name: '专辑列表',
        id: 7,
        pid: 4,
        isan: false
    }, {
        name: '场景管理',
        id: 8,
        pid: null,
        isan: false,
        icon: 'layui-icon-app'
    }, {
        name: '系统场景',
        id: 9,
        pid: 8,
        isan: false
    }, {
        name: '我的场景',
        id: 9,
        pid: 8,
        isan: false
    }, {
        name: '收藏场景',
        id: 10,
        pid: 8,
        isan: false
    }
]

多维数组（转换后）

[
	{
		"name": "首页",
		"id": 1,
		"pid": null,
		"isan": false,
		"icon": "layui-icon-home"
	},
	{
		"name": "系统设置",
		"id": 2,
		"pid": null,
		"isan": false,
		"icon": "layui-icon-set",
		"childs": [
			{
				"name": "模块管理",
				"id": 3,
				"pid": 2,
				"isan": false
			}
		]
	},
	{
		"name": "用户列表",
		"id": 4,
		"pid": null,
		"isan": false,
		"icon": "layui-icon-user",
		"childs": [
			{
				"name": "用户列表",
				"id": 5,
				"pid": 4,
				"isan": false
			},
			{
				"name": "微码列表",
				"id": 6,
				"pid": 4,
				"isan": false
			},
			{
				"name": "专辑列表",
				"id": 7,
				"pid": 4,
				"isan": false
			}
		]
	},
	{
		"name": "场景管理",
		"id": 8,
		"pid": null,
		"isan": false,
		"icon": "layui-icon-app",
		"childs": [
			{
				"name": "我的场景",
				"id": 9,
				"pid": 8,
				"isan": false
			},
			{
				"name": "收藏场景",
				"id": 10,
				"pid": 8,
				"isan": false
			}
		]
	}
]

封装好的方法（一维数组转二维甚至多维数组）

/**
 * @param {Array} Arr
 * @param {String} id
 * @param {String} pid
 * @param {String} childs
 * @description 一维数组根据id，pid转多维数组
 */
export const buildTree = (arr, id = 'id', pid = 'pid', childs = 'childs') => {
  let temp = {}
  let tree = {}
  arr.forEach(item => {
    temp[item[id]] = item
  })
  let tempKeys = Object.keys(temp)
  tempKeys.forEach(key => {
    let item = temp[key]
    let _itemPId = item[pid]
    let parentItemByPid = temp[_itemPId]
    if (parentItemByPid) {
      if (!parentItemByPid[childs]) {
        parentItemByPid[childs] = []
      }
      parentItemByPid[childs].push(item)
    } else {
      tree[item[id]] = item
    }
  })
  return Object.keys(tree).map(key => tree[key])
}

如何使用

arr = buildTree(arr )