黑马程序员技术交流社区

标题: 一维数组转多维数组，多维数组转一维数组(树形结构) [打印本页]

---

作者: JoyZhang    时间: 2021-5-5 17:56
标题: 一维数组转多维数组，多维数组转一维数组(树形结构)
### 1. 一维数组转多维数组
```
let arr = [
  {
    id: 1,
    p_id: 0,
    name: '首页',
  },
  {
    id: 2,
    p_id: 0,
    name: '菜单管理',
  },
  {
    id: 3,
    p_id: 0,
    name: '菜单列表',
  },
  {
    id: 4,
    p_id: 1,
    name: '权限管理',
  },
  {
    id: 5,
    p_id: 6,
    name: '管理员列表',
  },
  {
    id: 6,
    p_id: 4,
    name: '角色列表',
  },
]
// 1、先拿p_id为0的
// function newArrFn(arr, rootValue = 0) {
//   return arr.reduce((acc, cur) => {
//     if (cur.p_id === rootValue) {
//       acc.push(cur) // 返回值 新数组的长度
//       // 2、先拿p_id为1的
//       const children = newArrFn(arr, cur.id)
//       // 加到children
//       cur.children = children
//     }
//     return acc
//   }, [])
// }

function newArrFn(arr, rootValue = 0) {
    return arr.reduce((acc, cur) => {
      if (cur.p_id === rootValue) {
        const children = newArrFn(arr, cur.id)
        cur.children = children
        acc.push(cur) // 返回值 新数组的长度
      }
      return acc
    }, [])
}
console.log(newArrFn(arr))
```
### 2.1 二维转一维数组
```
const arr = [[1, 2], [3, 4], [5, 6], 7]
// function newArrFn(arr) {
//   return arr.reduce((acc, cur) => {
//     // return acc.concat(cur)
//     acc.concat(cur) // 错误
//     return acc // 错误
//   }, [])
// }
function newArrFn(arr) {
  return arr.reduce((acc, cur) => acc.concat(cur), [])
}
console.log(newArrFn(arr))
```
### 2.2 多维转一维数组
```
const arr = [[1, 2, [1, 2, [1, 2]]], [3, 4], [5, 6], 7]
// function newArrFn(arr) {
//   return arr.reduce((acc, cur) => {
//     if (Array.isArray(cur)) {
//       return acc.concat(newArrFn(cur))
//     } else {
//       return acc.concat(cur)
//     }
//   }, [])
// }
function newArrFn(arr) {
    return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? newArrFn(cur) : cur), [])
}
console.log(newArrFn(arr))

```
### 2.3 多维转一维数组(内含对象)
```
const arr = [
    {
      id: 1,
      p_id: 0,
      name: '首页',
      children: [
        {
          id: 4,
          p_id: 1,
          name: '权限管理',
          children: [
            {
              id: 6,
              p_id: 4,
              name: '角色列表',
              children: [
                {
                  id: 5,
                  p_id: 6,
                  name: '管理员列表',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      id: 2,
      p_id: 0,
      name: '菜单管理'
    },
    {
      id: 3,
      p_id: 0,
      name: '菜单列表'
    }
]
// function newArrFn(arr) {
//   return arr.reduce((acc, cur) => {
//     if (Array.isArray(cur.children)) {
//       // acc = acc.concat(cur)
//       // return acc.concat(newArrFn(cur.children))
//       return acc.concat(cur, newArrFn(cur.children))
//     } else {
//       return acc.concat(cur)
//     }
//   }, [])
// }
function newArrFn(arr) {
    return arr.reduce((acc, cur) => acc.concat(cur, Array.isArray(cur.children) ? newArrFn(cur.children) : []), [])
}
console.log(newArrFn(arr))
```

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2