处理数据 根据 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);
相关推荐
风度前端20 分钟前
用了都说好的 uniapp 路由框架
前端
冴羽21 分钟前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
码银29 分钟前
ruoyi的前端(vue)新增的时候给字典设置默认值 但不能正常
前端
五仁火烧1 小时前
Vue3 项目的默认端口行为
服务器·vue.js·nginx·容器·vue
fengbizhe1 小时前
bootstrapTable转DataTables,并给有着tfoot的DataTables加滚动条
javascript·bootstrap
刘一说1 小时前
TypeScript 与 JavaScript:现代前端开发的双子星
javascript·ubuntu·typescript
凌览1 小时前
别再死磕 Nginx!http-proxy-middleware 低配置起飞
前端·后端
EndingCoder2 小时前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569152 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥2 小时前
前端开发,一句话生成网站
前端