手寫redux方法以及陣列reduce方法

在了解reduce的好處之前，我們先知道reduce是什麼？ reduce是陣列的乙個方法，函式接受的引數有四個，函式上一次的結果，當前的結果，索引，當前執行的陣列；在尾巴處也可以加乙個初始的值。每乙個引數都有很大的用處，運用好的話，可以幻化出各種變化。

let r =  [1,2,3].reduce(('上一次返回的值','當前的值','當前索引','執行的陣列') =>,'第一次的初始值')

這個函式執行倆次，第一次a = 1，b = 2,。a+b的結果賦予下一次的a 。第二次a = 3，b = 3。運算結束，放回總結果。

//
求和let r = [1, 2, 3].reduce((a, b) =>)
console.log(r)
//r = 6

這個是遍歷後台傳過來的**和數量，有時候結構是比較複雜的。這裡我們看看第乙個，這樣是不對的。第一次 100*2+100*2 . 將結果賦予a 那下一次執行， a.price 和 a.number 都找不到了，都為undefined。所以我們需要乙個初始值，將所有的結果累加在初始值上。這裡我們看看第二個

函式，給a加個初始值0，也就是在reduce的尾巴加個0，這樣每次b的結果累加在a上。那麼**就可以計算出來了。

//
算**let k = [, , , ].reduce((a, b) =>)
console.log(k)
//k = nan

//
算**let k = [, , , ].reduce((a, b) =>, 0)
console.log(k)
//k = 800

這裡的是將key和value和為乙個物件，遍歷key陣列，給乙個初始值{}，往初始值{}賦值。這樣做到了合併資料

//
合併多個資料 
let keys = ['name', 'age'];
let value = ['王少', '20'];
let obj = keys.reduce((a, b, index, curent) =>, {});
console.log(obj);
//obj =

首先先創造3個方法，第乙個將倆個字串拼起來，第二給轉化大寫，第三個前後加***

function
sum(a, b) 
function
toupper(str) 
function
add(str) ***`
}

正常執行三個方法是這樣的，一層套著一層，我們現在有倆種方法實現優化，一種是用reduceright,從右向左邊執行。一種是reduce，從左到右執行。

sum(toupper(add('111','asd')))

我們先來看reduceright方法，我們先來看看執行的** compose(add,toupper,sum)('wangshao','666') 這裡是執行倆個函式，是乙個函式套著乙個函式。外層接受函式陣列fns，內層接受實參『wangsaho』,『666』。用pop方法取函式陣列最後一位賦值給lastfn，lastfn 作為reducright的初始值

然後開始從右向左遍歷。此時的a是初始值，也就是最後一位add函式。b是第二位，toupper函式。所以返回值就是b（a）。下一次a的值即為 toupper(add()) ,b的值為sum（）。這樣就實現完成了。

function
compose(...fns) , lastfn(...args))
}};

let r = compose(add, toupper, sum)('wangshao', '666');

然後，我們將上面的函式用箭頭函式優化一下，箭頭函式可以將return和{}去掉。就簡化為下面的**。效果是一樣的。

let compose = (...fns) => (...args) => ;

最後我們來看看redcue方法，這個我們往淺的思考，就是第乙個函式巢狀第二個函式。將結果再次巢狀第三個函式。首先最外層還是接受函式陣列fns，遍歷這個陣列將結果返回，這裡的a,b是和上面一樣的。我們返回乙個函式，這個函式是內層函式，引數有實參。第二次a的值即為toupper(add(..args)) 。

function
compose(...fns) 
})}

將上面的函式用箭頭函式優化一下，這個更加簡短了

let compose = (...fns) => fns.reduce((a, b) => (...args) => a(b(...args)));

我們看到的這倆個方法，第乙個是一年前redux的compose方法，第二個是現在redux的compose方法

然後我們繼續手寫reduce方法，這裡在陣列的原型上新增乙個方法reduce 。接受倆個引數，乙個是**，乙個是初始值prev。然後開始遍歷，次數是陣列的長度，這裡我們在原型上可以用this指向呼叫自身的陣列。首先我們做乙個判斷，判斷初始值是否為空，是的話則callback的引數a為第一位，b為第二位，index = i+1,第四個引數則為陣列本身。將返回的值賦給prev，並且讓i++; 執行第二次函式，第二次走下面，callback的a是上一次放回的結果prev，b是現在的元素，index是i，第四個引數是陣列本身不變。總的結果放回prev。可以看到，我這裡想用foreach來實現。但是好像是改變不了遍歷次數和索引的。所以最原生還是用for迴圈吧。

array.prototype.reduce = function
(callback, prev) 
else
} i) => else 
//})
return
prev;
};let r = [1, 2, 3].reduce((a, b, index, current) =>)

手寫redux方法以及陣列reduce方法

手寫陣列去重，多種方法

什麼是陣列以及陣列常用的方法

陣列遍歷的方法以及區別

手寫redux方法以及陣列reduce方法

手寫陣列去重，多種方法

什麼是陣列以及陣列常用的方法

陣列遍歷的方法以及區別

相關推薦