处理数据 根据 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);
相关推荐
用户17592342150286 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu622 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047923 分钟前
useDateFormat源码解析
前端·源码
Mintopia23 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52024 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖24 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia24 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司25 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam27 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
MariaH27 分钟前
Sequelize模型初探
前端·后端