av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

詳解JS中的reduce fold unfold用法

瀏覽:153日期:2024-03-27 16:32:06
fold(reduce)

說說reduce吧, 很喜歡這個函數(shù),節(jié)省了不少代碼量,而且有一些聲明式的雛形了,一些常見的工具函數(shù),flatten,deepCopy,mergeDeep等用reduce實現(xiàn)的很優(yōu)雅簡潔。reduce也稱為fold,本質上就是一個折疊數(shù)組的過程,把數(shù)組中的多個值經(jīng)過運算變成一個值,每次運算都會有一個函數(shù)處理,這個函數(shù)就是reduce的核心元素,稱之為reducer,reducer函數(shù)是個2元函數(shù),返回1個單值,常見的add函數(shù)就是reducer

const addReducer = (x, y) => x + y;

這個add函數(shù)就是一個reducer,最常見的用法就是結合數(shù)組的reduce方法來用

[1, 2, 3, 4, 5].reduce(addReducer, 0) // 15

為了更好的理解reduce,下面用不同的思路實現(xiàn)一遍這個函數(shù)

使用for...of

const reduce = (f, init, arr) => { let acc = init; for (const item of arr) { acc = f(acc, item); } return acc}// 執(zhí)行reduceFor(addReducer, 0, [1, 2, 3, 4, 5]) // 15使用while循環(huán)

reduce = (f, init, arr) => { let acc = init; let current; let i = 0; while ((current = arr[i++])) { acc = f(acc, current); } return acc;}// 執(zhí)行reduceFor(addReducer, 0, [1, 2, 3, 4, 5]) // 15更像fold的實現(xiàn)

上面的實現(xiàn)也都好理解,但好像沒有體現(xiàn)出來折疊(fold)這個過程,折疊應該是對數(shù)組的層層擠壓操作,上面的實現(xiàn)數(shù)組和邏輯其實是分開了,而且也引入了比較多的中間變量,雖然是在內部沒有副作用吧。其實換個思路想一下,如果把狀態(tài)通過參數(shù)來傳遞,就可以更好的體現(xiàn)fold的過程,這里的參數(shù)是值是指逐漸變化的數(shù)組和計算值,并可以盡可能的做到無狀態(tài),真正純函數(shù)的實現(xiàn)是沒有表達式,只有語句的,這個可以用遞歸做到。下面的實現(xiàn)是用尾遞歸實現(xiàn)的reduce,可以在實現(xiàn)的過程中就看出數(shù)組和計算值是怎樣變化的。非常符合fold這個稱謂

function reduce(f, init, arr) { if (arr.length === 0) return init; const [head, ...rest] = arr; return reduceRecursion(f, f(init, head), rest);}// 執(zhí)行reduceFor(addReducer, 0, [1, 2, 3, 4, 5]) // 15unfold

fold反過來就是unfold,unfold顧名思義就是根據(jù)一個反過來的reducer,來生成一系列的值。此時這個如果說原來的reducer實現(xiàn)類似于(a, b) -> c,那反過來就是c -> [a, b], 生成序列是一個很基本的操作,但就是這個基本的操作,也有很多實現(xiàn)的思路,在介紹unfold之前,看一下實現(xiàn)序列的其他方法,最后來做一個對比。

序列的實現(xiàn)

range(0, 100, 5)

期待結果

[0, 5, 10, ... 95]

數(shù)組實現(xiàn)

這個就不多說了,大家應該都知道。

range = (first, last, step) => { const n = (last - first) / step + 1; return Array.from({ length: n - 1 }) .map((_, index) => first + index * step);}// 也可以使用from的第二個參數(shù)// Array.from({ length: n }, (_, i) => first + i * step);生成器實現(xiàn)

生成序列還有一個利器,那就是generator,生成器生成器,就是用來生成數(shù)據(jù)的。generator返回一個迭代器,也很容易生成序列

function* range(first, last, step) { let acc = first; while (acc < last) { yield acc; acc = acc + step; }}[...range(0, 100, 5)]

兩者相比,generator更注重生成的過程,Array注重數(shù)據(jù)變化的過程。

unfold實現(xiàn)

在實現(xiàn)unfold之前,首先梳理一下實現(xiàn)思路,和fold一樣,也是用遞歸,且要在實現(xiàn)的過程中看到對應數(shù)據(jù)的變化。大體過程如下

0 -> [0, 5]

5 -> [5, 10]

10 -> [10, 15]

15 -> [15, 20]

...

90 -> [90, 95]

95 -> [95, 100]

可以看出過程恰恰是fold反過來,符合c -> [a, b]因為初始值肯定為一個數(shù)組,所以unfold只需要兩個參數(shù),實現(xiàn)如下。

function unfold(f, init) { const g = (f, next, acc) => { const result = f(next); const [head, last] = result || []; console.log(last); return result ? g(f, last, acc.concat(head)) : acc; }; return g(f, init, []);}range = R.curry((first, last, step) => unfold(next => next < last && [next, next + step], 0))// 執(zhí)行range(0, 100, 5)總結

以上就是結合reduce和一個生成序列的例子簡單介紹了一下fold和unfold這兩個在fp編程中很重要的概念,當然他們功能不只是生成序列,還有很多很強大的功能

以上就是詳解JS中的reduce fold unfold用法的詳細內容,更多關于JS的資料請關注好吧啦網(wǎng)其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 超碰成人免费 | 极品一区 | 久热久草| 日本三级电影在线观看视频 | 国产三级在线观看播放 | 亚洲36d大奶网 | 毛片网络 | 亚洲一区在线免费观看 | 免费在线观看成人 | 成年人网站国产 | 精品国产1区2区3区 在线国产视频 | 欧美福利久久 | 国产成人免费视频 | 毛片一区二区三区 | 欧美日韩精品一区二区天天拍 | 精品国产乱码久久久久久牛牛 | 好姑娘影视在线观看高清 | 亚洲成人第一页 | 天天综合干 | 日韩不卡视频在线观看 | 综合久久综合久久 | 国产精品久久久久久久久动漫 | 欧美精品一区在线发布 | 久久精品无码一区二区三区 | 视频一区在线观看 | 中文在线а√在线8 | 日日摸日日添日日躁av | 日韩欧美一区在线 | 欧美一级片黄色 | 久久久久久久久久久久久久国产 | a免费视频| 亚洲天堂网站 | 国产精品1区2区3区 中文字幕一区二区三区四区 | 91在线视频网址 | 国产成人综合久久 | h片在线免费看 | 亚洲国产一 | 精品一级 | 欧美视频1区 | 99久久精品免费看国产免费软件 | 麻豆国产一区二区三区四区 |