詳解陣列中的reduce方法

這幾天面試被問到了陣列的方法有哪些，回答得簡直一塌糊塗，面試官說reduce的功能很強大，於是想對這個方法進行總結，在紅寶書中對這個方法的描述並不算多，我也是參考了其他文章才進行總結的，下面就開始吧~

在紅寶書中，將這個方法定義為陣列的歸併方法，這個方法和迭代方法（map,foreach,filter...）一樣，都會對陣列進行遍歷，reduce與他們不同的是函式的第乙個引數得到的是迭代計算後的效果（看不懂沒關係，繼續往下看就會懂了）

這個方法接收兩個引數：

函式迭代的初始值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) )
console.log(arr, sum);

執行結果：

分析：我們可以看到，在這裡reduce的作用就是對這個陣列進行求和，迭代了3次，函式迭代的初始值是1，也就是預設值（陣列的第一項），prev的值是每次計算後的值，現在理解了吧！

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) ,5)
console.log(arr, sum);

執行結果：

分析：這裡我們新增了乙個初始的迭代值，也就是讓prev從5開始計算，可以看到，這裡迭代了4次，結果也加上了初始值。

最常見的應用一般就是求和以及求乘積了，比如說下面的例子：

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

計算陣列中每個元素出現的次數

let arr = ['name','age','long','short','long','name','name'] 
let arrresult = arr.reduce((pre,cur) =>else
return pre
},{})
console.log(arrresult)//結果：

執行結果：（第乙個console.log）

分析：大概的解釋一下，執行過程是這樣的：

由於設定了迭代初始值，pre的第乙個值是乙個空物件，此時cur為name，然後進行判斷，發現在pre中沒有name屬性，所以就將name對應的屬性值賦為1；

後面沒有重複的是一樣的道理，如果碰到重複值，就會將該屬性值加1，這樣就能計算元素重複的次數了。（有沒有覺得很神奇呀~）

去除陣列中重複的元素

let arrresult = arr.reduce((pre,cur) =>
return pre;
},)console.log(arrresult)//結果：["name", "age", "long", "short"]

分析：

這裡主要是借助迭代功能實現陣列的擴充套件，判斷當前元素是否已經新增到陣列中，如果不存在就從尾部新增，這個方法在去重方法中應該算比較簡單高效的。

對物件的屬性求和

let person = [
,,]let result = person.reduce((a,b) =>,0)
console.log(result)//結果：54

分析：

這裡主要就是利用reduce第乙個引數是迭代，可以通過初始化這個引數的資料型別，達到想實現的效果。

使用reduce運算元組時，最重要的就是理解第乙個引數是怎麼迭代的，可以好好利用初始化這個引數的資料型別來減少很多不必要的**。上面舉的三個高階應用的例子都是利用了這個優點，當然，reduce還有更多的應用，後面碰到還會進行補充的。

如果覺得有用就給個贊吧~

詳解陣列中的reduce方法

詳解陣列中的reduce方法

詳解陣列reduce方法以及用法

陣列reduce 方法

詳解陣列中的reduce方法

詳解陣列中的reduce方法

詳解陣列reduce方法以及用法

陣列reduce 方法

相關推薦