Hello,大家好,我是 Sunday。
ES 2024增加了很多 JS 的新特性, 在这篇文章中 我们也提到过几个可能会大火的新方法。
其中 Object.groupBy 是最受大家关注的新方法之一:
Object.groupBy() 静态方法根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性,其中包含组中的元素的数组。
它的具体语法如下所示:
Object.groupBy(items, callbackFn)// array:需要分组的数组。// callback:对数组中的每个元素执行的回调函数。回调函数返回一个值,用作分组的键。
而这样方法在 Lodash 中也有过类似的实现,作用也与 Object.groupBy 类似(如果我们关注最近几年的 ES 新增特性,会发现很多的新增特性都在社区库中提前进行过实现):
图片
那么接下来就让我们通过 5 个场景,深入看一下 Object.groupBy 这个方法,对我们以后的开发会有什么帮助!
按照年龄为数据进行分组。
const users = [ { name: '张三', age: 21 }, { name: '李四', age: 25 }, { name: '王五', age: 21 }, { name: '赵六', age: 28 } ] const groupedByAge = Object.groupBy(users, (user) => user.age) console.log(groupedByAge) /* { "21": [ { "name": "张三", "age": 21 }, { "name": "王五", "age": 21 } ], "25": [ { "name": "李四", "age": 25 } ], "28": [ { "name": "赵六", "age": 28 } ]} */
const users = [ { name: '张三', age: 21, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 21, gender: '女' }, { name: '赵六', age: 25, gender: '女' }, { name: '孙七', age: 30, gender: '女' }, { name: '周八', age: 21, gender: '男' }]const groupedByAgeAndGender = Object.groupBy(users, (user) => { const ageGroup = user.age < 25 ? '25岁以下' : '25岁以上' return `${ageGroup}-${user.gender}`})console.log(groupedByAgeAndGender)/*{"25岁以下-男": [ { "name": "张三", "age": 21, "gender": "男" }, { "name": "周八", "age": 21, "gender": "男" }],"25岁以上-女": [ { "name": "李四", "age": 25, "gender": "女" }, { "name": "赵六", "age": 25, "gender": "女" }, { "name": "孙七", "age": 30, "gender": "女" }],"25岁以下-女": [ { "name": "王五", "age": 21, "gender": "女" }]} */
根据指定的结果对数据进行分组处理。
const students = [ { name: '张三', score: 85 }, { name: '李四', score: 92 }, { name: '王五', score: 70 }, { name: '赵六', score: 78 }, { name: '孙七', score: 88 }]const groupedByGrade = Object.groupBy(students, (student) => { if (student.score >= 90) return 'A' if (student.score >= 80) return 'B' if (student.score >= 70) return 'C' return 'D'})console.log(groupedByGrade)/*{"B": [ { "name": "张三", "score": 85 }, { "name": "孙七", "score": 88 }],"A": [ { "name": "李四", "score": 92 }],"C": [ { "name": "王五", "score": 70 }, { "name": "赵六", "score": 78 }]} */
假设我们有一个用户数据数组,并且想要按用户居住的城市对其进行分组,其中城市数据是从外部 API 获取的。
const users = [ { name: '张三', cityId: 1 }, { name: '李四', cityId: 2 }, { name: '王五', cityId: 1 }, { name: '赵六', cityId: 3 }, { name: '孙七', cityId: 2 }]// Simulate fetching city data from an external APIconst cityData = { 1: '北京', 2: '上海', 3: '深圳'}const groupedByCity = Object.groupBy(users, (user) => cityData[user.cityId])console.log(groupedByCity)/*{"北京": [ { "name": "张三", "cityId": 1 }, { "name": "王五", "cityId": 1 }],"上海": [ { "name": "李四", "cityId": 2 }, { "name": "孙七", "cityId": 2 }],"深圳": [ { "name": "赵六", "cityId": 3 }]}*/
根据日期进行数据划分。
const logs = [ { message: '时间1', date: '2024-01-01T10:00:00Z' }, { message: '时间2', date: '2024-01-01T12:00:00Z' }, { message: '时间3', date: '2024-01-02T10:00:00Z' }, { message: '时间4', date: '2024-01-02T14:00:00Z' }, { message: '时间5', date: '2024-01-03T10:00:00Z' }]const groupedByDate = Object.groupBy( logs, (log) => new Date(log.date).toISOString().split('T')[0])console.log(groupedByDate)/*{"2024-01-01": [ { "message": "时间1", "date": "2024-01-01T10:00:00Z" }, { "message": "时间2", "date": "2024-01-01T12:00:00Z" }],"2024-01-02": [ { "message": "时间3", "date": "2024-01-02T10:00:00Z" }, { "message": "时间4", "date": "2024-01-02T14:00:00Z" }],"2024-01-03": [ { "message": "时间5", "date": "2024-01-03T10:00:00Z" }]}*/
结合以上的 5 个场景,我们可以看出 Object.groupBy 主要用来处理 分组 相关的操作。预期对应的还有 Map.groupBy() 这个方法,他们的使用场景相差不大,这里就不去细说了。
所以,有了 Object.groupBy 之后,一旦遇到 分组 相关的场景,那就是用它吧~
本文链接:http://www.28at.com/showinfo-26-103164-0.htmlLodash 的又一方法被替代了,探索 JS 新特性 Object.groupBy
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com
上一篇: 面试官:网页太慢了怎么排查?
下一篇: 聊一聊 CSS 的十个技巧和窍门