reduce作為ES5新增的常規(guī)數(shù)組方法之一，是一個強(qiáng)大的方法。本篇文章給大家介紹一下25個數(shù)組reduce高級用法。

reduce作為ES5新增的常規(guī)數(shù)組方法之一，對比forEach、filter和map，在實(shí)際使用上好像有些被忽略，發(fā)現(xiàn)身邊的人極少使用它，導(dǎo)致這個如此強(qiáng)大的方法被逐漸埋沒。

如果經(jīng)常使用reduce，怎么可能放過如此好用的它呢！我還是得把他從塵土中取出來擦干凈，奉上它的高級用法給大家。一個如此好用的方法不應(yīng)該被大眾埋沒。

下面對reduce的語法進(jìn)行簡單說明，詳情可查看MDN的reduce()的相關(guān)說明。

• 定義：對數(shù)組中的每個元素執(zhí)行一個自定義的累計(jì)器，將其結(jié)果匯總為單個返回值
• 形式：array.reduce((t, v, i, a) => {}, initValue)
• 參數(shù)
  • callback：回調(diào)函數(shù)(必選)
  • initValue：初始值(可選)
• 回調(diào)函數(shù)的參數(shù)
  • total(t)：累計(jì)器完成計(jì)算的返回值(必選)
  • value(v)：當(dāng)前元素(必選)
  • index(i)：當(dāng)前元素的索引(可選)
  • array(a)：當(dāng)前元素所屬的數(shù)組對象(可選)
• 過程
  • 以t作為累計(jì)結(jié)果的初始值，不設(shè)置t則以數(shù)組第一個元素為初始值
  • 開始遍歷，使用累計(jì)器處理v，將v的映射結(jié)果累計(jì)到t上，結(jié)束此次循環(huán)，返回t
  • 進(jìn)入下一次循環(huán)，重復(fù)上述操作，直至數(shù)組最后一個元素
  • 結(jié)束遍歷，返回最終的t

reduce的精華所在是將累計(jì)器逐個作用于數(shù)組成員上，把上一次輸出的值作為下一次輸入的值。下面舉個簡單的栗子，看看reduce的計(jì)算結(jié)果。

const arr = [3, 5, 1, 4, 2]; const a = arr.reduce((t, v) => t + v); // 等同于 const b = arr.reduce((t, v) => t + v, 0);

reduce實(shí)質(zhì)上是一個累計(jì)器函數(shù)，通過用戶自定義的累計(jì)器對數(shù)組成員進(jìn)行自定義累計(jì)，得出一個由累計(jì)器生成的值。另外reduce還有一個胞弟reduceRight，兩個方法的功能其實(shí)是一樣的，只不過reduce是升序執(zhí)行，reduceRight是降序執(zhí)行。

對空數(shù)組調(diào)用reduce()和reduceRight()是不會執(zhí)行其回調(diào)函數(shù)的，可認(rèn)為reduce()對空數(shù)組無效

高級用法

單憑以上一個簡單栗子不足以說明reduce是個什么。為了展示reduce的魅力，我為大家提供25種場景來應(yīng)用reduce的高級用法。有部分高級用法可能需要結(jié)合其他方法來實(shí)現(xiàn)，這樣為reduce的多元化提供了