处理数据 根据 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);
相关推荐
IT_陈寒7 小时前
Vite快得离谱?揭秘它比Webpack快10倍的5个核心原理
前端·人工智能·后端
明月_清风8 小时前
性能级目录同步:IntersectionObserver 实战
前端·javascript
明月_清风8 小时前
告别暴力轮询:深度解锁浏览器“观察者家族”
前端·javascript
摸鱼的春哥8 小时前
Agent教程17:LangChain的持久化和人工干预
前端·javascript·后端
程序员爱钓鱼9 小时前
Go操作Excel实战详解:github.com/xuri/excelize/v2
前端·后端·go
子兮曰17 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭18 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路20 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒21 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
lemon_yyds1 天前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js