处理数据 根据 pid 添加到父级 children

javascript 复制代码
let data = [
  { id: 1, name: "123", pid: 1 },
  { id: 2, name: "123", pid: 1 },
  { id: 3, name: "123", pid: 1 },
  { id: 4, name: "123", pid: 2 },
  { id: 5, name: "123", pid: 1 },
  { id: 6, name: "123", pid: 2 },
  { id: 7, name: "123", pid: 1 },
  { id: 8, name: "123", pid: 2 },
  { id: 9, name: "123", pid: 1 },
]
let result = [];  // 存储最终结果的数组

data.forEach(item => {
  // 获取到元素父级
  let parent = data.find(element => element.id === item.pid);

  let index = result.findIndex(i => i.id === parent.id);
  // 不存在就将父级 添加 进 result数组中
  if (index === -1) {
    result.push(parent);
  }

  // 判断当前元素是否和父级一致,一致就没必要再次添加
  if(item.id != parent.id){
    if (!parent.children) {
      parent.children = [];
    }
    parent.children.push(item);
  }
});

console.log(result);
相关推荐
kungggyoyoyo10 分钟前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah12 分钟前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
心随雨下22 分钟前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
自在极意功。27 分钟前
AJAX 深度详解:从基础原理到项目实战
前端·ajax·okhttp
s***45328 分钟前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
海上彼尚33 分钟前
[逆向] 1.本地登录爆破
前端·安全
什么时候吃饭37 分钟前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
2501_9409439138 分钟前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***064739 分钟前
SpringSecurity相关jar包的介绍
android·前端·后端
低保和光头哪个先来1 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架