当前位置:首页 > JavaScript

js实现根据pid实现分组

2026-04-07 06:29:55JavaScript

使用 reduce 方法分组

通过数组的 reduce 方法可以高效地根据 pid 进行分组。初始化一个空对象作为累加器,遍历数组时将当前项的 pid 作为键,将相同 pid 的项合并到同一组。

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

// 示例数据
const data = [
  { id: 1, pid: 'A', name: 'Item 1' },
  { id: 2, pid: 'B', name: 'Item 2' },
  { id: 3, pid: 'A', name: 'Item 3' }
];

console.log(groupByPid(data));
// 输出: { A: [{...}, {...}], B: [{...}] }

使用 forEach 方法分组

通过 forEach 遍历数组,动态构建以 pid 为键的分组对象。逻辑与 reduce 类似,但代码风格更直观。

const groupByPid = (data) => {
  const result = {};
  data.forEach(item => {
    const pid = item.pid;
    if (!result[pid]) {
      result[pid] = [];
    }
    result[pid].push(item);
  });
  return result;
};

使用 Map 数据结构分组

如果需要保留 pid 的顺序或处理非字符串键,可以使用 Map 对象。Map 的键可以是任意类型,适合复杂场景。

const groupByPid = (data) => {
  const map = new Map();
  data.forEach(item => {
    const pid = item.pid;
    if (!map.has(pid)) {
      map.set(pid, []);
    }
    map.get(pid).push(item);
  });
  return Object.fromEntries(map); // 转换为普通对象
};

分组后转换为数组格式

若需要将分组结果转换为数组形式(如 [{ pid: 'A', items: [...] }]),可在分组后通过 Object.entries 处理。

js实现根据pid实现分组

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

  return Object.entries(grouped).map(([pid, items]) => ({ pid, items }));
};

注意事项

  • 数据类型一致性:确保 pid 字段的值类型一致(如均为字符串或数字),避免因类型差异导致分组错误。
  • 空值处理:若 pid 可能为 nullundefined,需在代码中添加判空逻辑。
  • 性能考量:对于大数据量,reduceforEach 性能接近,但 Map 可能略慢于普通对象。

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

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现图片

js实现图片

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

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…