每日 30 秒 ⏱ 对象数组分组

MycLambert 发布于2019-08-26 13:34 / 3337人阅读

简介

数组、对象、分组、map、reduce

把对象数组进行分组可能是日常开发中最经常使用到的功能了，除了杀鸡用牛刀引入lodash外也可以自己实现一个短小精悍的数组分组。

// 该源码来自于 https://30secondsofcode.org
const groupBy = (arr, fn) =>
  arr.map(typeof fn === "function" ? fn : val => val[fn]).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(arr[i]);
    return acc;
  }, {});

代码分析

先利用 Array.prototype.map 来对需要分组的数据进行提取，再使用 Array.prototype.reduce 来遍历提取后的数据并做归集。点睛之笔是 fn 为函数时可以进行复杂的操作和判断，不为函数时直接从对象属性中读取使得易用和实用性都得到了增强。

小技巧：使用 || 来进行数据的初始化。

使用场景

把用户购买过的物品按照品类进行分组，并生成标签方便用户快速查询对应种类的商品。

// 原始数据
const items = [
    { name: "Apple iPhone X", category: "手机数码" },
    { name: "索尼 NW-A55 音乐播放器", category: "手机数码" },
    { name: "舒克 海洋之风牙膏", category: "日常用品" },
    { name: "洁丽雅 纯棉强吸水毛巾", category: "日常用品" },
]

// 分类后的商品数据
const categoryItems = groupBy(items, "category")

// 分类种类
const categoryKeys = Object.keys(categoryItems)

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

云服务器 GPU云服务器云服务器开机要开30秒二维数组分组数组分组php php数组怎么分组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109075.html

每日 30 秒 ⏱ 对海量数据进行切割

showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/chunk/poster.png); 简介数据分割、分页、异步操作、DOM优化把数组按指定大小进行分组，可以用于分页、数据切割、异步操作数据。 // 该源码来自于 https://30secondsofcode....

ShevaKuilin 2019-08-23 15:41 评论0 收藏0
每日 30 秒 ⏱ 根据条件将数组分成两个集合

简介数组、拆分根据条件将数组分成两个集合。 // 该源码来自于 https://30secondsofcode.org const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]) 代码分析这个代码主要是利用了 Array.p...

Dongjie_Liu 2019-08-23 15:43 评论0 收藏0
每日 30 秒 ⏱ 判断是否为页面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 简介分页、优化、可视区域、无限加载写前端页面时最经常遇到的开发需求之一就是渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。常见的分页方式有三种：在页面底部生成上一页、下一页、页面列表按钮。用户可以很直接的选择...

callmewhy 2019-08-26 13:36 评论0 收藏0
每日 30 秒 ⏱ JSON对象数组转换 CSV 表格数据

简介数组、对象、CSV、表格、工具我们在每日 30 秒之 arrayToCSV 中一起学习了将数组数据转化为 csv 表格数据并导出，那如果是对象数组怎么办呢？小脑袋瓜转得快的同学肯定会说：使用 Array.prototype.map 把需要导出的字段先遍历取出，再使用 arrayToCSV 将其导出为 CSV 数据表格。可是你有没有想过如果一个对象数组数据非常之大时，使用 Array.p...

Ajian 2019-08-26 13:35 评论0 收藏0
每日 30 秒 ⏱ 两个数组中的差集

简介数组、差集、函数根据给出的函数找出两个数组中的差集。 const differenceBy = (a, b, fn) => { const s = new Set(b.map(fn)); return a.filter(el => !s.has(fn(el))); }; 代码分析这段代码使用了ES2015中定义的 Set 对象。Set 对象的值的特点是不含有重复的值，这个特性可以...

JerryC 2019-08-26 13:33 评论0 收藏0