資訊專欄INFORMATION COLUMN
簡介
數(shù)組、對象、分組、map、reduce
把對象數(shù)組進行分組可能是日常開發(fā)中最經(jīng)常使用到的功能了，除了殺雞用牛刀引入lodash外也可以自己實現(xiàn)一個短小精悍的數(shù)組分組。
// 該源碼來自于 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 來對需要分組的數(shù)據(jù)進行提取，再使用 Array.prototype.reduce 來遍歷提取后的數(shù)據(jù)并做歸集。點睛之筆是 fn 為函數(shù)時可以進行復(fù)雜的操作和判斷，不為函數(shù)時直接從對象屬性中讀取使得易用和實用性都得到了增強。
小技巧：使用 || 來進行數(shù)據(jù)的初始化。使用場景
把用戶購買過的物品按照品類進行分組，并生成標簽方便用戶快速查詢對應(yīng)種類的商品。
// 原始數(shù)據(jù)
const items = [
{ name: "Apple iPhone X", category: "手機數(shù)碼" },
{ name: "索尼 NW-A55 音樂播放器", category: "手機數(shù)碼" },
{ name: "舒克 海洋之風牙膏", category: "日常用品" },
{ name: "潔麗雅 純棉強吸水毛巾", category: "日常用品" },
]
// 分類后的商品數(shù)據(jù)
const categoryItems = groupBy(items, "category")
// 分類種類
const categoryKeys = Object.keys(categoryItems)
一起成長
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109075.html
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/chunk/poster.png); 簡介 數(shù)據(jù)分割、分頁、異步操作、DOM優(yōu)化 把數(shù)組按指定大小進行分組，可以用于分頁、數(shù)據(jù)切割、異步操作數(shù)據(jù)。 // 該源碼來自于 https://30secondsofcode....
簡介 數(shù)組、拆分 根據(jù)條件將數(shù)組分成兩個集合。 // 該源碼來自于 https://30secondsofcode.org const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]) 代碼分析 這個代碼主要是利用了 Array.p...
showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介 分頁、優(yōu)化、可視區(qū)域、無限加載 寫前端頁面時最經(jīng)常遇到的開發(fā)需求之一就是 渲染后端數(shù)據(jù)返回的數(shù)據(jù)對象，當數(shù)據(jù)對象數(shù)量極多的時候便需要進行分頁。 常見的分頁方式有三種： 在頁面底部生成 上一頁、下一頁、頁面列表 按鈕。 用戶可以很直接的選擇...
簡介 數(shù)組、對象、CSV、表格、工具 我們在 每日 30 秒之 arrayToCSV 中一起學(xué)習了將數(shù)組數(shù)據(jù)轉(zhuǎn)化為 csv 表格數(shù)據(jù)并導(dǎo)出，那如果是對象數(shù)組怎么辦呢？小腦袋瓜轉(zhuǎn)得快的同學(xué)肯定會說：使用 Array.prototype.map 把需要導(dǎo)出的字段先遍歷取出，再使用 arrayToCSV 將其導(dǎo)出為 CSV 數(shù)據(jù)表格。 可是你有沒有想過如果一個對象數(shù)組數(shù)據(jù)非常之大時，使用 Array.p...
簡介 數(shù)組、差集、函數(shù) 根據(jù)給出的函數(shù)找出兩個數(shù)組中的差集。 const differenceBy = (a, b, fn) => { const s = new Set(b.map(fn)); return a.filter(el => !s.has(fn(el))); }; 代碼分析 這段代碼使用了ES2015中定義的 Set 對象。Set 對象的值的特點是不含有重復(fù)的值，這個特性可以...
閱讀 4000·2021-11-24 09:38
閱讀 1465·2021-11-19 09:40
閱讀 2798·2021-11-18 10:02
閱讀 3736·2021-11-09 09:46
閱讀 1806·2021-09-22 15:27
閱讀 3139·2019-08-29 15:24
閱讀 1027·2019-08-29 12:40
閱讀 1707·2019-08-28 18:24
