在ES6中如何使用reduce方法

這篇文章將為大家詳細講解有關在ES6中如何使用reduce方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

強大的reduce

數組的reduce方法用途很廣。它一般被用來把數組中每一項規約到單個值。但是你可以利用它做更多的事。

1 使用reduce同時實現map和filter

假設現在有一個數列，你希望更新它的每一項（map的功能）然后篩選出一部分（filter的功能）。如果是先使用map然后filter的話，你需要遍歷這個數組兩次。

在下面的代碼中，我們將數列中的值翻倍，然后挑選出那些大于50的數。有注意到我們是如何非常高效地使用reduce來同時完成map和filter方法的嗎？

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => { 
 num = num * 2;  
 if (num > 50) {
  finalList.push(num);
 } 
 return finalList;
}, []);
doubledOver50; // [60, 80]

2 使用reduce取代map和filter

如果你認真閱讀了上面的代碼，你應該能理解reduce是可以取代map和filter的。

3 使用reduce匹配圓括號

reduce的另外一個用途是能夠匹配給定字符串中的圓括號。對于一個含有圓括號的字符串，我們需要知道(和)的數量是否一致，并且(是否出現在)之前。

下面的代碼中我們使用reduce可以輕松地解決這個問題。我們只需要先聲明一個counter變量，初值為0。在遇到(時counter加一，遇到)時counter減一。如果左右括號數目匹配，那最終結果為0。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === '(') {
   return ++counter;
  } else if(char === ')') { 
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter}
isParensBalanced('(())') // 0 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced

4 統計數組中相同項的個數

很多時候，你希望統計數組中重復出現項的個數然后用一個對象表示。那么你可以使用reduce方法處理這個數組。

下面的代碼將統計每一種車的數目然后把總數用一個對象表示。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

關于“在ES6中如何使用reduce方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。