JS 原生支持最新分组方法(译)

大家好,这里是大家的林语冰。

数组元素(item)分组可能是您已经反复实践的事情之一。您每次都会手写一个分组函数,或者复制粘贴 lodash 的 groupBy 函数。

好消息是: JS(JavaScript)现在支持分组方法,所以您不必再做"代码搬运工"了。Object.groupByMap.groupBy 是全新的方法,更易于分组,解放双手且降本增效。

免责声明

本文属于是语冰的直男翻译了属于是,略有删改,仅供粉丝参考,英文原味版请临幸 JAVASCRIPT IS GETTING ARRAY GROUPING METHODS

直到现在的分组

假设您有一个代表人物的对象数组,并且您希望按年龄对它们进行分组。您可以使用 forEach 循环,如下所示:

js 复制代码
const people = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 30 },
  { name: 'Eve', age: 28 }
]

const peopleByAge = {}

people.forEach(person => {
  const age = person.age
  if (!peopleByAge[age]) {
    peopleByAge[age] = []
  }
  peopleByAge[age].push(person)
})
console.log(peopleByAge)
/*
{
  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],
  "30": [{"name":"Bob","age":30}]
}
*/

或者您可以使用 reduce,如下所示:

js 复制代码
const peopleByAge = people.reduce((acc, person) => {
  const age = person.age
  if (!acc[age]) {
    acc[age] = []
  }
  acc[age].push(person)
  return acc
}, {})

无论哪种方式,代码都有点猪头。您始终必须检查对象,查看分组键是否存在,如果不存在,那么就使用空数组创建它。然后,您可以将该元素推送到数组中。

使用 Object.groupBy 分组

使用全新的 Object.groupBy 方法,您可以一行搞定:

js 复制代码
const peopleByAge = Object.groupBy(people, person => person.age)

草履虫都能学会!虽然有若干注意事项。

Object.groupBy 返回一个 null-prototype 对象(空原型对象)。这意味着,该对象不会从 Object.prototype 继承任何属性。这很美滋滋,因为这意味着,您不会意外覆盖 Object.prototype 的任何属性,但这也意味着,该对象没有您可能需要的任何方法,比如 hasOwnPropertytoString

js 复制代码
const peopleByAge = Object.groupBy(people, person => person.age)
console.log(peopleByAge.hasOwnProperty('28'))
// TypeError: peopleByAge.hasOwnProperty 不是函数

传递给 Object.groupBy 的回调函数应返回 Symbolstring。如果它返回任何其他内容,它将被强制转换为 string

在我们的栗子中,我们始终将 age 作为 number 返回,但在结果中,它被强制为 string。尽管您仍然可以使用方括号表示法访问 number 属性,但也会将参数强制为 string

js 复制代码
console.log(peopleByAge[28])
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]
console.log(peopleByAge['28'])
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]

使用 Map.groupBy 分组

Map.groupBy 几乎与 Object.groupBy 一毛一样,除了它返回了 Map。这意味着,您可以使用所有常用的 Map 函数。这也意味着,您可以从回调函数返回任何类型的值。

js 复制代码
const ceo = { name: 'Jamie', age: 40, reportsTo: null }
const manager = { name: 'Alice', age: 28, reportsTo: ceo }

const people = [
  ceo,
  manager,
  { name: 'Bob', age: 30, reportsTo: manager },
  { name: 'Eve', age: 28, reportsTo: ceo }
]

const peopleByManager = Map.groupBy(people, person => person.reportsTo)

在本例中,我们按人员向其报告对象对人员进行分组。请注意,要通过对象从 Map 中检索元素,对象必须具有相同的标识。

js 复制代码
peopleByManager.get(ceo)
// => [{ name: "Alice", age: 28, reportsTo: ceo }, { name: "Eve", age: 28, reportsTo: ceo }]
peopleByManager.get({ name: 'Jamie', age: 40, reportsTo: null })
// => undefined

在上述栗子中,第二行使用一个看起来像 ceo 对象的对象,但它不是同一个对象,因此它不会从 Map 返回任何东东。若要从 Map 中成功检索元素,请确保保留要用作键的对象的引用。

何时可用?

这两种 groupBy 方法目前乃 TC39 提案 stage 3 的一部分。这意味着,它很有可能成为标准,因此,出现了若干实现。

Chrome 117 刚刚推行,支持这两种方法,Firefox 在 119 版本中发布了支持。Safari 以不同的名称实现了这些方法,我相信它们很快就会更新。由于这些方法在 Chrome 中,这意味着,它们已在 V8 中实现,因此下次 V8 更新时将在 Node 中可用。

为什么设计为静态方法?

您可能想知道为什么将其实现为 Object.groupBy 而不是 Array.prototype.groupBy。根据该提案,有一个库对 Array.prototype 使用了不兼容 groupBy 的方法的"猴子补丁"(monkey patch)。在考虑新的 Web API 时,向后兼容十分重要。几年前,在尝试实现 Array.prototype.flatten 时,在一个 SmooshGate 的事件中强调了这一点。

幸运的是,使用静态方法实际上似乎更适合将来的可扩展性。当 Records 和 Tuples 提案实现时,我们可以添加一个 Record.groupBy 将数组分组为不可变记录的方法。

JS 正在填补空白

将元素分组在一起显然是我们作为开发者的必由之路。lodash.groupBy 目前 npm 周下载量高达 1_500_0002_00_000。很高兴看到 JS 取而代之,让我们解放双手,降本增效。

现在,请到 Chrome 117 中亲自尝试这些新方法。语冰空谈终觉浅,极客撸码要宫刑。

您现在收看的是《前端翻译计划》,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript