Javascript reduce函數查重詳解

reduce函數，是ECMAScript5規格中出現的陣列方法.以下透過本文給大家分享Javascript面試經典套路reduce函數查重，需要的朋友參考下吧

今天在偶然間查看到了一段程式碼，程式碼使用了很短的篇幅完成了字串統計相同字元次數這個經典面試題，其中用到了reduce這個方法，網路上查了查，沒有查到什麼有價值的東西，導致浪費了我一些時間才看懂，現將我的思路整理如下：

原代碼：

var arr="qweqrq"
var info= arr.split('').reduce((a,b)=>
 (a[b]++ || (a[b]=1),a)
,{})
console.log(info)

代碼思路是這樣的，先將字符串arr通過split方法切割成數組,然後使用reduce，這個方法乾了什麼呢，分為這幾步：

1.首先reduce會接收一個callback來對數組裡的每一個元素執行，如果有第二個參數如上例： {}。 ，那麼callback將會使用這個{}作為參數來和數組中的第一個元素一同傳入callback；

2.傳入參數之後，會進行一個與門短路操作，也可以叫默認值操作，當a[b]++成真，則回傳a[b]。而這裡的a為{}，b為"q",很明顯a中並沒有b，執行a[b]=1，那麼就會給a[b]賦值為1，後面是一個逗號表達式，所以會回傳有了a[b]:1這樣屬性的a物件;

與閘短路運算:如果第一個運算元的值為true，進行短路操作，直接產生第一個操作數的值。如果為false，則產生第二個操作數的值。

逗號表達式:逗號表達式的一般形式是：表達式1，表達式2，表達式3…表達式n。逗號表達式的求解過程是：先計算表達式1的值，再計算表達式2的值，…一直計算到表達式n的值。最後整個逗號表達式的值是表達式n的值。

3.之後要說下reduce函數，它可以將之前一次執行後返回的結果作為參數繼續和之後的元素一同傳入callback執行，相當於fn(fn(fn(fn(a, b),c),d),e)，fn即為callback；

4.在本例中，因為有第二個參數{}傳入，所以callback執行了6次。相當於對數組中每一個元素都進行了錄入和查重操作，例如當callback運行到第四次，這時的a是{q:1,w:1,e:1}，執行callback，a[ b]即a['q']存在，執行a['q']++，a['q']值為2，以此類推，最後得到的就是一個以數組每個元素為屬性名，出現次數為屬性值的物件。

要注意的是，reduce是es5推出的方法，ie8以下都不相容。

以上是Javascript reduce函數查重詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！