每日 30 秒 ? 對象數組分組

MycLambert 發布于2019-08-26 13:34 / 3359人閱讀

簡介

數組、對象、分組、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數組怎么分組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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