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

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

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

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

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

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的實(shí)現(xiàn)

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

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ù)一個(gè)反過來的reducer，來生成一系列的值。此時(shí)這個(gè)如果說原來的reducer實(shí)現(xiàn)類似于(a, b) -> c,那反過來就是c -> [a, b], 生成序列是一個(gè)很基本的操作，但就是這個(gè)基本的操作，也有很多實(shí)現(xiàn)的思路，在介紹unfold之前，看一下實(shí)現(xiàn)序列的其他方法，最后來做一個(gè)對(duì)比。

序列的實(shí)現(xiàn)

range(0, 100, 5)

期待結(jié)果

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

這個(gè)就不多說了，大家應(yīng)該都知道。

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

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

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

兩者相比，generator更注重生成的過程，Array注重?cái)?shù)據(jù)變化的過程。

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

0 -> [0, 5]

5 -> [5, 10]

10 -> [10, 15]

15 -> [15, 20]

...

90 -> [90, 95]

95 -> [95, 100]

可以看出過程恰恰是fold反過來，符合c -> [a, b]因?yàn)槌跏贾悼隙橐粋€(gè)數(shù)組，所以u(píng)nfold只需要兩個(gè)參數(shù)，實(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)總結(jié)

以上就是結(jié)合reduce和一個(gè)生成序列的例子簡單介紹了一下fold和unfold這兩個(gè)在fp編程中很重要的概念，當(dāng)然他們功能不只是生成序列，還有很多很強(qiáng)大的功能

以上就是詳解JS中的reduce fold unfold用法的詳細(xì)內(nèi)容，更多關(guān)于JS的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！