淺談JS中 reduce() 的用法

gplane 發(fā)布于2019-08-23 16:41 / 436人閱讀

摘要：一語法其中，表示將要原數(shù)組表示上一次調用回調時的返回值，或者初始值表示當前正在處理的數(shù)組元素表示當前正在處理的數(shù)組元素的索引，若提供值，則索引為，否則索引為表示初始值。

一、語法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示將要原數(shù)組；
prev 表示上一次調用回調時的返回值，或者初始值 init;
cur 表示當前正在處理的數(shù)組元素；
index 表示當前正在處理的數(shù)組元素的索引，若提供 init 值，則索引為0，否則索引為1；
init 表示初始值。
看上去是不是感覺很復雜？沒關系，只是看起來而已，其實常用的參數(shù)只有兩個：prev 和 cur。接下來我們跟著實例來看看具體用法吧~

二、實例

先提供一個原始數(shù)組：
var arr = [3,9,4,3,6,0,9];

實現(xiàn)以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是實現(xiàn)起來比較簡潔的一種吧。

求數(shù)組項之和

var sum = arr.reduce(function (prev, cur) {

return prev + cur;

},0);## 標題文字 ##

由于傳入了初始值0，所以開始時prev的值為0，cur的值為數(shù)組第一項3，相加之后返回值為3作為下一輪回調的prev值，然后再繼續(xù)與下一個數(shù)組項相加，以此類推，直至完成所有數(shù)組項的和并返回。

求數(shù)組項最大值

==========

var max = arr.reduce(function (prev, cur) {

return Math.max(prev,cur);

});

由于未傳入初始值，所以開始時prev的值為數(shù)組第一項3，cur的值為數(shù)組第二項9，取兩值最大值后繼續(xù)進入下一輪回調。

數(shù)組去重

var newArr = arr.reduce(function (prev, cur) {

prev.indexOf(cur) === -1 && prev.push(cur);
return prev;

},[]);

實現(xiàn)的基本原理如下：
① 初始化一個空數(shù)組
② 將需要去重處理的數(shù)組中的第1項在初始化數(shù)組中查找，如果找不到（空數(shù)組中肯定找不到），就將該項添加到初始化數(shù)組中
③ 將需要去重處理的數(shù)組中的第2項在初始化數(shù)組中查找，如果找不到，就將該項繼續(xù)添加到初始化數(shù)組中
④ ……
⑤ 將需要去重處理的數(shù)組中的第n項在初始化數(shù)組中查找，如果找不到，就將該項繼續(xù)添加到初始化數(shù)組中
⑥ 將這個初始化數(shù)組返回

三、其他相關方法

reduceRight()

該方法用法與reduce()其實是相同的，只是遍歷的順序相反，它是從數(shù)組的最后一項開始，向前遍歷到第一項。

forEach()、map()、every()、some()和filter()

重點總結：

reduce() 是數(shù)組的歸并方法，與forEach()、map()、filter()等迭代方法一樣都會對數(shù)組每一項進行遍歷，但是reduce() 可同時將前面數(shù)組項遍歷產生的結果與當前遍歷項進行運算，這一點是其他迭代方法無法企及的

云服務器 GPU云服務器 js中split的用法 reduce用法 js中json數(shù)據(jù)封裝用法 java中枚舉的用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103151.html

淺談js中reduce方法

摘要：介紹方法接收一個函數(shù)作為累加器為數(shù)組中的每一個元素依次執(zhí)行回調函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個參數(shù)初始值上一次回調的返回值，當前元素值，當前索引，原數(shù)組。介紹reduce reduce() 方法接收一個函數(shù)作為累加器,reduce 為數(shù)組中的每一個元素依次執(zhí)行回調函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個參數(shù)：初始值（上一次回調的返回值），當前元素值，當...

mingzhong 2019-08-26 10:40 評論0 收藏0
淺談js中的遍歷

摘要：這幾個方法會完整地遍歷數(shù)組，即使在滿足條件后，循環(huán)依舊進行。如果要同時遍歷索引和項上述都是遍歷數(shù)組的方法，這個是遍歷對象的方法，并且最好不要混用遍歷是程序中必不可少的一環(huán)，在所有語言中都存在，因為它可以簡化人們的規(guī)律性操作，本文將一一道來。 for++ 這是最基礎的for循環(huán)語句，格式如下： var arr = [1, 2, 3, 4, 5] for (var i =...

X1nFLY 2019-08-23 12:14 評論0 收藏0
淺談vuex

摘要：概念淺談是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。更改的中的狀態(tài)的唯一方法，類似。允許我們將分割成模塊。通過購物車的一個案列，把vuex學習了一篇。 vuex概念淺談 Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以...

chaos_G 2019-08-23 13:50 評論0 收藏0
由 sort 中 key 的用法淺談 python

摘要：但是實際寫程序中，我們經常會寫出許多繁雜的丑陋的代碼。特別推薦，許多代碼讓我獲益匪淺，比如這里對的使用。用可以寫出很簡單直觀的代碼，如下當然，上面不考慮效率，這里有一個利用分治法思想的高效的方法。更多文章更多閱讀中參數(shù)的用法高級編程技巧用 Python 時間也算不短了，但總感覺自己在用寫 C++ 代碼的思維寫 Python，沒有真正用到其作為腳本語言的優(yōu)勢。之前刷 LeetCode ...

keke 2019-07-25 10:19 評論0 收藏0
2019年8月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，樹狀結構數(shù)據(jù)獲取二，富文本編輯器插件三，插件庫集合四，和的區(qū)別五，子元素高度撐滿父級父級未設置高度，同時子元素內文字垂直居中六，畫半圓七， *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一， json樹狀結構數(shù)據(jù)獲取二， vue2.0富文...

morgan 2019-08-30 15:44 評論0 收藏0