JavaScript 原生 groupBy 减少

2023-12-13

我正在使用 JavaScript 原生reduce,但是我想稍微改变一下分组以获得我想要的结果。 我有一个数组如下:

const people = [
  {name: "John", age: 23, city: "Seattle", state: "WA"},
  {name: "Mark", age: 25, city: "Houston", state: "TX"},
  {name: "Luke", age: 26, city: "Seattle", state: "WA"},
  {name: "Paul", age: 28, city: "Portland", state: "OR"},
  {name: "Matt", age: 21, city: "Oakland", state: "CA"},
  {name: "Sam", age: 24, city: "Oakland", state: "CA"}
]

我想将其分组并更改为:

const arranged = [
  {
    city: "Seattle",
    state: "WA",
    persons: [
      { name: "John", age: 23 },
      {name: "Luke", age: 26}
    ]
  },
    {
    city: "Houston",
    state: "TX",
    persons: [
      {name: "Mark", age: 25}
    ]
  },
  {
    city: "Portland",
    state: "OR",
    persons : [
      {name: "Paul", age: 28}
    ]
  },
  {
    city: "Oakland",
    state: "CA",
    persons: [
      {name: "Matt", age: 21},
      {name: "Sam", age: 24}
    ]
  }
]

你可以使用Map和一个字符串化对象作为分组的键。

稍后使用键和分组人员的对象渲染所需的数组。

var people = [{ name: "John", age: 23, city: "Seattle", state: "WA" }, { name: "Mark", age: 25, city: "Houston", state: "TX" }, { name: "Luke", age: 26, city: "Seattle", state: "WA" }, { name: "Paul", age: 28, city: "Portland", state: "OR" }, { name: "Matt", age: 21, city: "Oakland", state: "CA" }, { name: "Sam", age: 24, city: "Oakland", state: "CA" }],
    arranged = Array.from(
        people.reduce((m, o) => {
            var key = JSON.stringify(Object.assign(...['city', 'state'].map(k => ({ [k]: o[k] }))));
            return m.set(key, (m.get(key) || []).concat({ name: o.name, age: o.age }));
        }, new Map),
        ([key, persons]) => Object.assign(JSON.parse(key), { persons })
    );

console.log(arranged);
.as-console-wrapper { max-height: 100% !important; top: 0; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 原生 groupBy 减少 的相关文章

随机推荐

  • 当软件包已安装时,Conda 需要 20 多分钟来解决环境问题

    当我输入时尝试运行conda update n base conda conda 在 解决环境 上挂了大约 20 分钟 然后返回了一个不包含 conda 更新版本的软件包计划 下面提供了退回的包裹计划 NOTE conda update a
  • 使用 C# 以编程方式检测 Windows 登录尝试

    我想开发一个 Windows 窗体应用程序来监视我的网络计算机登录 注销和登录尝试详细信息 并根据检测执行某些操作 例如向管理员发送一些通知 我尝试过的 我读到了有关 Windows 服务 Windows 任务计划程序和使用任务计划程序进行
  • 如何在 Java 中打开 equals 语句以接受多个参数?

    我有一个梦想 在这个梦中 我可以替换这样的结构 if aLongVariableName equals classInstance aPropertyOfThatInstance aLongVariableName equals class
  • 如何使用 swift 4 在 iOS 11 上播放声音?我把 mp3 文件放在哪里?

    我看了很多教程 但是当我单击按钮 激活功能播放声音 时 声音不播放 我看到了 stackoverflow 推荐的代码 但什么也没有 我把mp3文件信息asset xcasset 这是正确的 SWIFT 4 Xcode 9 1 import
  • 自动将 Excel 文件转换为 Google Sheets

    我有一个使用保存电子邮件和附件插件的谷歌帐户 https chrome google com webstore detail save emails and attachmen nflmnfjphdbeagnilbihcodcopheceb
  • Pandas 无法计算具有重复轴的 isin

    我的数据框是这样的 userid codeassigned timestamp 15 553938 M1 1499371200000 15390 527638 M2 1599731200000 15389 521638 M2 1399901
  • 一个类只有 5 个实例 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我希望在整个应用程序生命周期中只有 5 个类的实例 我怎样才能实现这个目标 如果
  • 此版本的应用程序未配置为通过 Google Play 计费[重复]

    这个问题在这里已经有答案了 可能的重复 此版本的应用程序未配置为通过 Google Play 计费 我已经在 Android 市场上有一个应用程序 带有应用程序内购买 我的问题是应用内购买功能无法正常工作 我再次重写了代码 现在我想运行该应
  • 如何在 Hibernate 应用程序中处理数据库空值?

    由于数据库表中的空值 我收到 org hibernate PropertyAccessException 异常如何处理 我的文件是 获取测试 java package com raj java hiberanteDemos import o
  • 是否可以将 NFC 信号从 NFC 读/写器发送到 Iphone

    我正在创建一个移动应用程序 它根据 PC 上生成的 ID 获取数据 我想将此 ID 作为文本字符串从我的 NFC 设备传递 当用户触摸 NFC 设备时 该设备支持读取和写入 iPhone 设备 这可能吗 我使用 Acr 122u 作为 NF
  • 在android中设置listview滚动动画

    我想为一个设置动画ListView当用户滚动ListView 我正在设置动画ListView加载时 但我想设置滚动动画 这是我在 eclipse 中的动画文件
  • Linkedin v2 API 图片上传出现错误 400 Bad Request

    当我每次尝试使用 LinkedIn v2 API 上传图像时 都会收到 400 Bad request 错误 参考资料取自这里 Link 我在邮递员中执行的步骤 步骤1 应用程序编程接口 https api linkedin com v2
  • MySql修改预购树创建url

    这个问题是基于我之前的问题堆栈溢出 这次我尝试使用修改后的预购树方法为页面表中的所有行生成 url 以下是 MySql 表 注意 我添加了 父 列 只是为了让查看者了解类别表中的父子关系 实际的Modified Preorder Tree方
  • 是否可以镜像 ActiveMQ 中的单个队列?

    我在生产系统中运行 ActiveMQ 我们的一些队列数量非常多 有些队列数量非常少 我有兴趣镜像低容量队列之一 以便我可以围绕收到的消息构建非正式的监视服务 很遗憾 我能找到的唯一文档似乎暗示镜像队列是全有或全无 您要么为您拥有的每个队列创
  • 如何将日期时间选择器添加到 contenteditable

    如何使用 jquery 在可编辑的内容中添加日期和时间选择器 这是我的 td td class dq1 row dq1 td 这是我的脚本 datepicker datepicker dateFormat yyyy mm dd showOn
  • 使用 Direct X 和 VS2012

    我拥有适用于桌面版和适用于 Windows 8 的 Visual Studio 2012 Express 并且我想创建 Direct X 应用程序和游戏 我知道现在有一个Windows SDK 并且在win8的VS 2012 exp中IDE
  • “提交”审核按钮变灰 - Xcode 6 [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 目前不接受答案 我正在尝试提交我的第一个 iOS 8 应用程序 并且正在执行 Apple iTunes 连接的新程序 我已经上传了我的二进制文件 填写了所有详细信息并上传了所有屏幕截图 然后
  • 匹配 [g]awk 中的数字

    我被难住了 尝试编写 awk 正则表达式来将字符串与 11 位数字进行匹配 我试过了 if var 0 9 11 if var 0 9 11 if var 0 9 11 if var 0 9 11 altho I really do nee
  • Qt 调整轴不会调整图表本身

    我目前正在尝试了解 Qt 中的折线图 由于某种原因 我的图表似乎显示出非常奇怪的行为 当我使用 createDefaultAxis 时 它将根据图表后面系列的最小值和最大值设置最小值和最大值 虽然乍一看这似乎没问题 但它已经与中的行为不同了
  • JavaScript 原生 groupBy 减少

    我正在使用 JavaScript 原生reduce 但是我想稍微改变一下分组以获得我想要的结果 我有一个数组如下 const people name John age 23 city Seattle state WA name Mark a