你應該知道的JS reduce的n種應用

reduce是es5中新引入的乙個api。

假如你還不知道reduce的用法，請先閱讀下mdn文件中關於reduce的介紹。（不得不說，mdn文件太強大了，裡面列舉了很多有用的方法）

本文將介紹借助reduce函式，利用其能夠遍歷到陣列的每乙個元素，並且次遍歷都可以使用上次遍歷結果的特性，實現的一些功能。

let arr = [1, 2, 3, 4, 5]
console.log(arr.reduce((prev, cur) => prev + cur)) // 15
// 可以實現另類的階乘
console.log(arr.reduce((prev, cur) => prev * cur)) // 120
複製**

let arr = [1, 2, 3, 4, 5]
console.log(arr.reduce((prev, cur) => math.max(prev, cur))); // 5
console.log(arr.reduce((prev, cur) => math.min(prev, cur))); // 1
複製**

當reduce接收兩個引數時，即reduce(fn, init),init將作為fn的第乙個引數prev傳入。

這裡，將乙個空陣列作為去重後的新陣列，通過做判斷，如果該容器內已經存在某元素，就啥也不做；反之，如果該容器內還沒有乙個元素，就將其推入容器。

let arr = [1, 2, 3, 1, 1, 2, 3, 3, 4, 3, 4, 5]
let res = arr.reduce((prev, cur)=>, )
console.log(res) // [ 1, 2, 3, 4, 5 ]
複製**

map函式接收乙個函式作為引數，作為引數的函式接收三個引數值，分別是遍歷陣列的每一項元素，元素的索引和陣列本身。這三個引數剛好和reduce函式接收的第乙個函式引數的第2、3、4個引數是對應的。

實現思路是，將每次遍歷的元素，作為傳入的函式的引數，並將函式執行的結果放入新的陣列中。

let arr = [1, 2, 3]
array.prototype._map = function(cb) , )
} else 
}let res = arr._map(n => n*2)
console.log(res) // [ 2, 4, 6 ]
複製**

實現filter的思路和實現map是一致的，只不過後者是一股腦的把執行結果全放入陣列中，而filter需要做乙個判斷：如果filter函式傳入的引數(引數是乙個函式)執行後有返回值，即經過了檢驗，才將遍歷的當前元素放入陣列中，如果沒有返回值，就忽略。

let arr = [1, 2, 3, 4, 5];
array.prototype._filter = function(cb) , )
} else 
}let res = arr._filter(n => n>2)
console.log(res) // [ 3, 4, 5 ]
複製**

compose是函式式程式設計的核心思想，簡單說就是將若干個函式組合成乙個函式來執行，並且每個函式執行的結果都能作為下乙個函式的引數。這也是使用reduce實現compose的思路。

假設有兩個函式，作用分別是將字串轉為大寫，在字串末尾追加感嘆號：

function touppercase(str) 
function add(str) 
複製**

一般情況下，會這樣使用：

var str = 'hello world'
var res = touppercase(str)
res = add(res)
console.log(res); // hello world!
複製**

使用compose後，效果是這樣的，執行fn，相當於依次執行了touppercase和add:

var fn = compose(add, touppercase)
console.log(fn(str));// hello world!
複製**

接下來實現一下compose:

function compose() , x)
}}複製**

陣列扁平化，針對的是多維陣列，將其扁平、展開，成為一維陣列。

let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], , [13, 14]], ''];
function flatten(arr) , )
} else 
}console.log(flatten(arr));
複製**

當然，除了以上幾種，reduce還有更多種神奇的應用，等待著各位小夥伴的發現和使用。

你應該知道的JS reduce的n種應用

你應該知道的 RPC 原理

Vertical Align，你應該知道的一切

你應該知道git rebase

你應該知道的JS reduce的n種應用

你應該知道的 RPC 原理

Vertical Align，你應該知道的一切

你應該知道git rebase

相關推薦