当前位置:首页 > JavaScript

js实现根据pid实现分组

2026-02-02 12:57:40JavaScript

根据PID实现分组的方法

在JavaScript中,可以根据对象的pid属性进行分组。以下是一种常见的实现方式:

使用reduce方法进行分组

const data = [
  { id: 1, pid: 0, name: 'A' },
  { id: 2, pid: 1, name: 'B' },
  { id: 3, pid: 1, name: 'C' },
  { id: 4, pid: 2, name: 'D' }
];

const groupedByPid = data.reduce((acc, item) => {
  const pid = item.pid;
  if (!acc[pid]) {
    acc[pid] = [];
  }
  acc[pid].push(item);
  return acc;
}, {});

使用Map对象进行分组

const map = new Map();
data.forEach(item => {
  const pid = item.pid;
  if (!map.has(pid)) {
    map.set(pid, []);
  }
  map.get(pid).push(item);
});
const groupedByPid = Object.fromEntries(map);

转换为树形结构

如果需要将扁平数据转换为树形结构:

function buildTree(items, pid = 0) {
  return items
    .filter(item => item.pid === pid)
    .map(item => ({
      ...item,
      children: buildTree(items, item.id)
    }));
}

const tree = buildTree(data);

处理大型数据集的分组

对于大型数据集,可以考虑以下优化方法:

使用对象引用提高性能

const itemMap = {};
data.forEach(item => {
  itemMap[item.id] = item;
});

const result = [];
data.forEach(item => {
  const parent = itemMap[item.pid];
  if (parent) {
    (parent.children || (parent.children = [])).push(item);
  } else {
    result.push(item);
  }
});

使用并行处理(适用于Node.js环境)

const { Worker } = require('worker_threads');

function parallelGroup(data, chunkSize) {
  // 实现略
  // 将数据分块,使用多个Worker线程处理
}

注意事项

分组操作前应确保数据中pid字段的有效性。对于循环引用的情况需要特殊处理:

js实现根据pid实现分组

function safeBuildTree(items, pid = 0, seen = new Set()) {
  if (seen.has(pid)) return [];
  seen.add(pid);

  return items
    .filter(item => item.pid === pid)
    .map(item => ({
      ...item,
      children: safeBuildTree(items, item.id, new Set(seen))
    }));
}

以上方法可以根据具体需求选择使用,reduce方法适合简单分组,树形结构转换适合层级数据展示。

标签: 根据js
分享给朋友:

相关文章

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…