JS數組Reduce方法詳解

reduce方法將會對數組元素從左到右依次執行reducer函數，然后返回一個累計的值。

reduce函數的參數

reduce函數接收兩個參數，第一個參數是回調函數reducer ,第二個參數是初始值。reducer

函數接收四個參數

• Accumulator：MDN上解釋為累計器，但我覺得不恰當，按我的理解它應該是截至當前元素，之前所有的數組元素被reducer函數處理累計的結果
• current:當前被執行的數組元素
• currentIndex 當前被執行數組元素的索引
• SourceArray，原數組，也就是被調用reduce 方法的數組

如果傳入第二個參數，reduce 會在這個參數的基礎上開始累計執行

const arr = [1, 2, 3, 4]const accumulator = (total, current, currentIndex, arr) => {console.log(total, current, currentIndex, arr);return total + current}console.log(arr.reduce(accumulator))

最終的結果是把所有的數組元素累加起來。值得注意的是，他將數組的第一個元素作為累加的初始值，然后再依次對后面的元素執行reducer 函數。

總共執行了三次，得出最終結果。那如果傳入初始值，是怎樣的執行順序？

console.log(arr.reduce(accumulator, 3))

很明顯這次是以傳入的初始值作為累加的起點，然后依次對數組執行reducer.

reduce的一些用法：

1.數據扁平化

const array = [[0, 1], [2, 3], [4, 5]] const flatten = arr => {return arr.reduce((a, b) => {return a.concat(b)}, []) } console.log(flatten(array)); // [0, 1, 2, 3, 4, 5]

執行過程

• 第一執行傳入初始值[] ,走到reduce的回調函數里參數a就是[] ,參數b就是數組的第一項[0,1]回調函數內就是[].concat([0,1])
• 第二次執行，reduce的回調函數參數a就是上次執行的結果[0,1],本次繼續用它concat數組的第二項[2,3],得到結果[0,1,2,3]作為回調函數的參數a繼續執行下去
• 依次類推

那么假設數組是這樣呢？[[0, [111, 222], 1], [2, [333, [444, 555]], 3], [4, 5]]，其實加個遞歸調用就可以

const array = [[0, [111, 222], 1], [2, [333, [444, 555]], 3], [4, 5]]const flatten = arr => {return arr.reduce((a, b) => {if (b instanceof Array) {return a.concat(flatten(b))}return a.concat(b)}, []) } console.log(flatten(array)); // [0, 111, 222, 1, 2, 333, 444, 555, 3, 4, 5]

2.統計字符串中某個字符出現的次數

每次回調函數執行的時候，都會給對象加一個key值，value為出現次數的鍵值，如果存入字符串value就加1

const str = 'adefrfdnnfhdueassjfkdiskcddfjds' const arr = str.split('') const strObj = arr.reduce((all, current) => {if (current in all) {// 檢測對象里是否包含某個鍵名的方法一般有三種all[current]++} else {all[current] = 1}return all }, {})console.log(strObj) // {"a":2,"d":7,"e":2,"f":5,"r":1,"n":2,"h":1,"u":1,"s":4,"j":2,"k":2,"i":1,"c":1}

3.數組去重

const arr = ['1', 'a', 'c', 'd', 'a', 'c', '1'] const afterUnique = arr.reduce((all, current) => {if (!all.includes(current)) {all.push(current)}return all }, []) console.log(afterUnique); // ["1", "a", "c", "d"]

4 按順序調用promise

這種方式實際上就是處理promise的value,將上一個promise的value 作為下一哥promise的value進行處理

const prom1 = a => {return new Promise((resolve => {resolve(a)})) } const prom2 = a => {return new Promise((resolve => {resolve(a * 2)})) } const prom3 = a => {return new Promise((resolve => {resolve(a * 3)})) }const arr = [prom1, prom2, prom3] const result = arr.reduce((all, current) => {return all.then(current) }, Promise.resolve(10))result.then(res => {console.log(res); })

5 reduce 方法的實現

通過上面的用法，可以總結出來reduce的特點：

• 接收兩個參數，第一個為函數，函數內會接收四個參數：Accumulator Current CurrentIndex SourceArray，第二個參數為初始值。
• 返回值為一個所有Accumulator累計執行的結果

Array.prototype.myReduce = function(fn, base) {if (this.length === 0 && !base) {throw new Error('Reduce of empty array with no initial value')}for (let i = 0; i < this.length; i++) {if (!base) {base = fn(this[i], this[i + 1], i, this)i++} else {base = fn(base, this[i], i, this)}}return base}

總結

以上是生活随笔為你收集整理的delphi7存储过程传入数组_js数组方法reduce的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。