js 一维数组转多维数组,多维数组转一维数组

js 一维数组转多维数组

假数据

let list = [
    {
        pid: '0',
        currentId: "1",
        text: '0-1'
    },
    {
        pid: '1',
        currentId: "1-2",
        text: '0-1-2'
    },
    {
        pid: '1',
        currentId: "1-3",
        text: '0-1-3'
    },
    {
        pid: '1',
        currentId: "1-4",
        text: '0-1-4'
    }, {
        pid: '1-2',
        currentId: "1-2-1",
        text: '0-1-2-1'
    },
    {
        pid: '1-3',
        currentId: "1-3-1",
        text: "0-1-3-1"
    },
    {
        pid: '1-2-1',
        currentId: "1-2-1-0",
        text: '0-1-2-1-0'
    },
    {
        pid: '1-3-1',
        currentId: "1-3-1-0",
        text: "0-1-3-1-0"
    }
]

处理代码

function oneToMore(list,pid,currentId,children){
// list 传入的数组 pid 父级id名称 currentId 当前id children 子集元素集合名
    let tree = []
    for (let i = 0; i < list.length; i++) {
        let item = list[i]
        if (item[pid] == "0") {
            let item = list[i]
            item[children] = []
            tree.push(item)
            list.splice(i, 1)
            i--
        }
    }
    setChild(tree)
    function setChild(tree) {
        if (list.length > 0) {
            for (let i = 0; i < tree.length; i++) {
                for (let j = 0; j < list.length; j++) {
                    if (list[j].pid == tree[i][currentId]) {
                        let item = list[j]
                        item[children] = []
                        tree[i][children].push(item)
                        list.splice(j, 1)
                        j--
                    }
                }
                setChild(tree[i][children],pid,currentId,children)
            }
        }
    }
    return tree
}

调用

let res = oneToMore(list,'pid','currentId','children')

多维数组转一维数组

假数据

let list = [
  {
    name: "张三",
    age: "18",
    children: [
      {
        name: "张三-1",
        age: "18-1",
      },
      {
        name: "张三-2",
        age: "18-2",
      },
      {
        name: "张三-3",
        age: "18-3",
        children: [
          {
            name: "张三-3-1",
            age: "18-3-1",
          },
        ],
      },
      {
        name: "张三-4",
        age: "18-4",
      },
    ],
  },
  {
    name: "李四",
    age: "18",
    children: [
      {
        name: "李四-1",
        age: "18-1",
      },
      {
        name: "李四-2",
        age: "18-2",
        children: [
          {
            name: "李四-2-1",
            age: "18-2-1",
            children: [
              {
                name: "李四-2-1-1",
                age: "18-2-1-1",
              },
            ],
          },
        ],
      },
      {
        name: "李四-3",
        age: "18-3",
        children: [
          {
            name: "李四-3-1",
            age: "18-3-1",
          },
        ],
      },
      {
        name: "李四-4",
        age: "18-4",
      },
    ],
  },
];

处理代码

使用 es6 的  map 结合递归 处理

function initData(arr,key) {
  let newArr = [];
  arr.map((ele) => {
    if (ele[key] && ele[key].length > 0) {
      newArr = newArr.concat(initData(ele[key],key));
    } else {
      newArr.push(ele);
    }
  });
  return newArr;
}

调用

let res = initData(list,'children')

list 是源数据,children 是子集集合字段

使用 es6的 reduce 结合递归处理

function  flatList(list,childrenKey){
   let res =  list.reduce((pre,cur)=>{
        return pre.concat(
           cur.children&&cur.children.length>0?flatList(cur.children,childrenKey):cur
        )
    },[])
    return res
}

调用

let res = initData1(list,"children")

使用forEach 结合 递归处理

function flatData(list,children){
    let resList = []
    list.forEach(ele => {
        if(ele[children]&&ele[children].length>0){
          resList=resList.concat(flatData(ele[children]))  
        }else {
            resList.push(ele)
        }
    });
    return resList
}

调用

let result = flatData(list,"children")

 

  • 0
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

丰的传说

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值