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