資訊專欄INFORMATION COLUMN
簡(jiǎn)介
數(shù)組、對(duì)象、唯一、只出現(xiàn)一次、差集
取出兩個(gè)對(duì)象數(shù)組中唯一的數(shù)據(jù)集，即差集。
// 該源碼來(lái)自于 https://30secondsofcode.org const filterNonUniqueBy = (arr, fn) => arr.filter((v, i) => arr.every((x, j) => (i === j) === fn(v, x, i, j)));代碼分析
代碼使用了 Array.prototype.filter 來(lái)進(jìn)行遍歷數(shù)組并獲取過(guò)濾，通過(guò) Array.prototype.every 和 fn 來(lái)對(duì)數(shù)據(jù)項(xiàng)進(jìn)行判斷是否重復(fù)出現(xiàn)過(guò)。
使用場(chǎng)景從后端或者數(shù)據(jù)庫(kù)分別獲取到參加不同馬拉松的用戶并對(duì)這些用戶做歸集，通過(guò) filterNonUniqueBy 來(lái)尋找只參加過(guò)一次馬拉松的用戶。
// 查詢到參加 2019廈門(mén)馬拉松的數(shù)據(jù)
const join2019 = [
{ id: 1, name: "xiaoer", join: ["2019廈門(mén)馬拉松", "2018廈門(mén)馬拉松"] },
{ id: 2, name: "xiaosi", join: ["2019廈門(mén)馬拉松"] },
]
// 查詢到參加 2018年馬拉松的數(shù)據(jù)
const join2018 = [
{ id: 1, name: "xiaoer", join: ["2019廈門(mén)馬拉松", "2018廈門(mén)馬拉松"] },
{ id: 3, name: "menty", join: ["2018廈門(mén)馬拉松"] },
]
// 合并數(shù)據(jù)
const users = [...join2019, ...join2018]
// 獲取只參加過(guò)一次的用戶
// 輸出:
// [
// {id: 2, name: "xiaosi", sales: 50000},
// {id: 3, name: "menty", sales: 150000}
// ]
const joinOnce = filterNonUniqueBy(users, (a, b) => a.id === b.id)
相似代碼
取出數(shù)組中唯一的數(shù)據(jù)集。
// 該源碼來(lái)自于 https://30secondsofcode.org const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i))一起成長(zhǎng)
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。
如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。
如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來(lái)自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109070.html
showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡(jiǎn)介 分頁(yè)、優(yōu)化、可視區(qū)域、無(wú)限加載 寫(xiě)前端頁(yè)面時(shí)最經(jīng)常遇到的開(kāi)發(fā)需求之一就是 渲染后端數(shù)據(jù)返回的數(shù)據(jù)對(duì)象，當(dāng)數(shù)據(jù)對(duì)象數(shù)量極多的時(shí)候便需要進(jìn)行分頁(yè)。 常見(jiàn)的分頁(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ì)說(shuō)：使用 Array.prototype.map 把需要導(dǎo)出的字段先遍歷取出，再使用 arrayToCSV 將其導(dǎo)出為 CSV 數(shù)據(jù)表格。 可是你有沒(méi)有想過(guò)如果一個(gè)對(duì)象數(shù)組數(shù)據(jù)非常之大時(shí)，使用 Array.p...
showImg(https://segmentfault.com/img/remote/1460000018770987?w=900&h=500); 簡(jiǎn)介 數(shù)組、every、any 判斷一個(gè)數(shù)組中是否都滿足特定的條件，如果滿足則返回 true 否則返回 false。 // 該源碼來(lái)自于 https://30secondsofcode.org const all = (arr, fn = Boole...
簡(jiǎn)介 可視區(qū)域、頁(yè)面優(yōu)化、DOM節(jié)點(diǎn)多、圖片懶加載、性能 可視區(qū)域是一個(gè)前端優(yōu)化經(jīng)常出現(xiàn)的名詞，不管是顯示器、手機(jī)、平板它們的可視區(qū)域范圍都是有限。在這個(gè) 有限可視區(qū)域 區(qū)域里做到完美顯示和響應(yīng)，而在這個(gè)區(qū)域外少做一些操作來(lái)減少渲染的壓力、網(wǎng)絡(luò)請(qǐng)求壓力。在 每日 30 秒之 對(duì)海量數(shù)據(jù)進(jìn)行切割 中的使用場(chǎng)景，我們就是利用了 有限可視區(qū)域 只渲染一部分 DOM 節(jié)點(diǎn)來(lái)減少頁(yè)面卡頓。 既然 可視區(qū)域 ...
簡(jiǎn)介 數(shù)組、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我們之前的兩期 數(shù)組轉(zhuǎn) CSV 表格數(shù)據(jù) 和 JSON 對(duì)象數(shù)組轉(zhuǎn)換 CSV 表格數(shù)據(jù) 中學(xué)習(xí)了轉(zhuǎn)化為 CSV 表格數(shù)據(jù)的代碼片段，今天就講講 如何把 CSV 表格數(shù)據(jù)轉(zhuǎn)換為 JSON 對(duì)象： // 該源碼來(lái)自于 https://30secondso...
閱讀 3605·2023-04-25 23:25
閱讀 2296·2021-11-12 10:36
閱讀 2930·2019-08-30 12:47
閱讀 2203·2019-08-29 18:45
閱讀 578·2019-08-29 17:28
閱讀 1916·2019-08-29 17:15
閱讀 1841·2019-08-29 16:05
閱讀 1565·2019-08-29 14:17
