#LearnedToday:ObjectgroupBy()

#learnedtoday:objectgroupby()

?终于出来了!不再需要编写丑陋的代码来按字段的特定值对对象数组进行分组!

自 2023 年底以来,对象有一个名为 groupby() 的官方静态方法,可以为我们做到这一点!
它接受一个 iterable(例如数组)和一个函数,该函数针对每个元素执行,并且必须返回该特定元素的“类别”。
该方法返回一个新对象,其中每个键都是一个不同的类别,其中包含属于该特定类别的对象数组。

注意:返回的对象和原始可迭代对象中的元素是相同的(不是深拷贝!)。更改元素的内部结构将反映在原始可迭代对象和返回的对象中。

例子

让我们举一个实际的例子来看看按年龄对所有忍者神龟角色进行分组是多么容易

初始数组

const ninjaturtlescharacters = [  { age: 16, name: 'michelangelo' },  { age: 16, name: 'raffaello' },  { age: 16, name: 'donatello' },  { age: 16, name: 'leonardo' },  { age: 91, name: 'splinter' },  { age: 25, name: 'casey jones' },  { age: 25, name: 'april o'neil' }];

好的老方法(使用reduce)

const ninjaturtlescharactersbyage = ninjaturtlescharacters.reduce(  (groupedpeople, item) => ({    ...groupedpeople,    [item.age]: groupedpeople[item.age]      ? [...groupedpeople[item.age], item]      : [item],  }),  {});

现代方式

const ninjaturtlescharactersbyagenew = object.groupby(  ninjaturtlescharacters,  ({ age }) => age);

提示:如果您想返回 map 而不是 object,请使用 map.groupby()

结果

{  "16": [    { age: 16, name: 'Michelangelo' },    { age: 16, name: 'Raffaello' },    { age: 16, name: 'Donatello' },    { age: 16, name: 'Leonardo' }  ],  "25": [    { age: 25, name: 'Casey Jones' },    { age: 25, name: 'April O'Neil' }  ],  "91": [    { age: 91, name: 'Splinter' }  ]}

演示

??‍? 像往常一样,我创建了一个简单的 stackblitz 项目来使用代码。

? 文档:https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/object/groupby

ℹ 浏览器支持:https://caniuse.com/mdn-javascript_builtins_object_groupby

以上就是#LearnedToday:ObjectgroupBy()的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1490898.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 13:32:04
下一篇 2025年12月19日 13:32:21

相关推荐

  • js 如何用values获取数组元素的迭代器

    javascript数组迭代器与传统遍历方式的核心区别在于惰性求值与显式控制,传统方式如for循环和foreach会立即遍历所有元素,而values()返回的迭代器通过next()按需返回值,节省资源;2. 除了values(),还可使用keys()获取索引迭代器,entries()获取索引-值对迭…

    2025年12月20日
    000
  • js 如何使用fill填充数组的某部分内容

    fill 方法会直接修改原数组,若要避免修改原数组,应先使用 slice 方法创建副本再调用 fill;当填充对象时,由于填充的是引用,修改其中一个元素会影响所有元素,因此需注意使用独立对象;fill 可结合 array.from 生成特定数组,且能填充稀疏数组的空槽,但不支持老浏览器时需引入 po…

    2025年12月20日
    000
  • JS如何实现迭代协议?可迭代对象

    JavaScript迭代协议通过Symbol.iterator让对象可迭代,实现该方法并返回带next()的迭代器对象,即可用for…of或展开运算符遍历;生成器函数(function*)配合yield能更简洁地创建迭代器,自动管理状态与next()逻辑,提升代码可读性与灵活性。 Jav…

    好文分享 2025年12月20日
    000
  • JS如何实现Promise?Promise的原理

    promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),状态只能从pending变为fulfilled或rejected,且一旦改变不可逆转;当调用resolve时,状态由pending转为fulfilled,调用reject时转为rejecte…

    2025年12月20日
    000
  • js怎么获取原型链上的迭代器方法

    获取原型链上的迭代器方法需遍历对象及其原型链查找symbol.iterator属性,返回对应的函数;2. 需要获取该方法以实现对不同可迭代对象的统一遍历,支持编写通用迭代逻辑;3. 对于无迭代器方法的对象,函数返回undefined,应先检查返回值再使用,避免错误;4. 调用获取到的迭代器方法时必须…

    2025年12月20日 好文分享
    000
  • javascript字符串怎么转换为数组

    最直接的方法是使用split(),它根据指定分隔符将字符串切分为数组;2. 若需按字符拆分且正确处理unicode字符(如表情符号),应优先使用array.from()或扩展运算符(…),因为它们能准确识别代理对;3. split(”)在处理多码元字符时可能出错,且对连续空白…

    2025年12月20日 好文分享
    000
  • JavaScript数组对象合并策略:避免常见陷阱与高效实践

    本文深入探讨JavaScript中根据特定键合并数组中对象的多种策略。首先分析了for…in循环与Object.keys()结合使用时常见的陷阱,并提供了正确的修复方案。随后,介绍了利用Map和Object.assign实现高效、简洁合并的推荐方法,旨在帮助开发者编写更健壮、性能更优的代…

    2025年12月20日
    000
  • JS如何实现生成器协程?协程的调度

    JavaScript通过生成器函数function*和yield实现协程,调用生成器函数返回生成器对象,执行时遇到yield暂停并返回值,通过next()方法恢复执行且可传参,实现双向通信;生成器保持内部状态,支持惰性求值和分步执行,常用于异步流程控制;为调度生成器协程,需编写执行器函数run,其递…

    2025年12月20日
    000
  • JS数组如何创建和操作

    javascript数组是前端开发中处理有序数据的核心工具,它通过数字索引存储元素,支持丰富的增删改查操作,而普通对象则用于存储键值对形式的结构化数据;在处理大量数据时,unshift、shift和splice等导致元素位移的操作可能引发性能问题,可通过优先使用push/pop、合并高阶函数调用或改…

    2025年12月20日
    000
  • js如何实现数组填充

    填充javascript数组的常用方法有:1. 使用array.prototype.fill()可快速用单一值填充整个或部分数组,但需注意引用类型共享问题;2. 使用for或foreach循环可精确控制填充过程,适合复杂逻辑;3. array.from()结合映射函数能创建并动态填充新数组,尤其适合…

    2025年12月20日
    000
  • JavaScript递归函数中数组引用陷阱解析与浅拷贝实践

    本文深入探讨JavaScript递归函数中处理数组时常见的引用陷阱。当在递归过程中将一个动态变化的数组直接推入结果集时,由于JavaScript的对象引用特性,最终可能得到空数组或不符合预期的结果。文章通过一个经典的子集生成问题为例,详细解释了为何需要使用Array.prototype.slice(…

    2025年12月20日
    000
  • 优化 JavaScript 中嵌套对象的数据提取

    本文旨在提供一种高效的方法,用于从嵌套的 JavaScript 对象中提取数据,并生成包含唯一值的扁平化结构。通过使用 reduce 和辅助函数,我们可以避免多重循环,从而显著提高性能。本文将提供详细的代码示例和解释,帮助开发者理解和应用这种优化技术。 在处理复杂的数据结构时,尤其是在前端开发中,经…

    2025年12月20日
    000
  • JS如何实现迭代器?迭代器协议

    JavaScript中实现迭代器需遵循可迭代协议和迭代器协议,通过定义[Symbol.iterator]方法返回具备next()方法的迭代器对象,从而支持for…of和展开运算符;该机制统一了数据结构的遍历接口,实现惰性求值,适用于自定义对象、树、图及无限序列等复杂场景,提升代码通用性与…

    2025年12月20日
    000
  • js怎么合并两个数组不去重

    合并两个数组且不去除重复项最直接的方法是使用concat()或展开运算符。1. 使用array.prototype.concat()方法可创建新数组,不修改原数组,支持多个数组或值的合并。2. 使用展开运算符(…)语法更简洁,灵活性高,适合现代javascript开发,在可读性和代码简洁…

    2025年12月20日
    000
  • js 如何使用range生成指定范围的数组

    循环方式通过for循环逐个添加元素,代码直观但冗长;2. array.from结合长度和映射函数生成数组,现代且可读性强;3. 扩展运算符配合array.keys()利用索引映射生成数组,写法巧妙但性能略低;4. 递归方式不推荐,因效率低且有栈溢出风险;对于步长和倒序需求,可在array.from基…

    2025年12月20日
    000
  • JS如何实现迭代器模式

    javascript中需要迭代器模式以提供统一遍历接口,解决数据结构多样性与遍历方式统一性的矛盾,通过实现symbol.iterator方法返回具有next()方法的迭代器对象,实现遍历逻辑与集合解耦,支持for…of循环和惰性求值,提升代码模块化与可维护性,推荐使用生成器函数简化实现,…

    2025年12月20日
    000
  • javascript怎么检测稀疏数组

    检测javascript稀疏数组的核心是判断数组中是否存在未被显式赋值的“空洞”索引。1. 使用 in 操作符可检查索引是否存在,若某索引不在数组中则说明存在空洞,返回true;2. 利用 hasownproperty 方法同样能判断数组是否拥有某索引,适用于检测空洞;3. 直接统计实际元素数量并与…

    2025年12月20日 好文分享
    000
  • JavaScript 中从数组创建迭代器的实用指南

    本文旨在介绍如何在 JavaScript 中从数组创建迭代器,以便在 for…of 循环等场景中更灵活地处理数组数据。我们将探讨使用 values() 方法以及实现自定义 zip 迭代器的方法,并通过代码示例详细说明其用法和原理。 使用 values() 方法创建迭代器 JavaScri…

    2025年12月20日
    000
  • javascript怎么拼接多个数组

    最直接且推荐的方式是使用扩展运算符(…)或concat()方法。1. 扩展运算符能将多个数组展开并合并为一个新数组,语法简洁且支持插入非数组元素,同时保持原数组不变;2. concat()方法可连接两个或多个数组并返回新数组,还能直接接收非数组参数将其作为元素添加。两者均不修改原数组,符…

    2025年12月20日 好文分享
    000
  • javascript如何扁平化嵌套数组

    javascript中扁平化嵌套数组的核心是将多层结构转为一维数组,1. 使用array.prototype.flat()可指定层数或用infinity扁平化所有层级;2. 使用reduce结合递归能手动实现深度扁平化,逻辑清晰且通用;3. 使用扩展运算符结合while循环的迭代法可避免递归栈溢出风…

    2025年12月20日 好文分享
    000

发表回复

登录后才能评论
关注微信