JavaScript數組reduce()方法
將某個值減去數組中的每個元素:
var items = [5, 10, 15]; var reducer = function minus(minusSum, item) { return minusSum - item; } var total = items.reduce(reducer, 61); console.log(total); // 31
上例中初始值為number
類型,所以返回的結果也是number
類型的,如果我們想返回object類型的值,也可以傳入object類型的初始值。
var items = [5, 10, 15]; var reducer = function minus(minusSum, item) { minusSum.sum = minusSum.sum - item; return minusSum; } var total = items.reduce(reducer, {sum: 61}); console.log(total); // {sum: 31}
以上兩例都是reduce()
簡單的用法。reduce()
是一個很強大的方法,我們還可以用它來處理更復雜的業務邏輯。
例如,求購物車中商品的總價,購物車數據如下:
var goodList = [ { good: 'paper', price: 12 }, { good: 'book', price: 58 }, { good: 'CD', price: 15 } ]
然後運用reduce()
方法可以輕松的獲得所有商品的總價格:
var count = goodList.reduce(function(prev, cur) { return cur.price + prev; }, 0); console.log(count); // 85
如果用戶有10元的優惠券的話,我們隻需要將 -10作為初始值傳入reduce()
方法中就可以瞭。
var count = goodList.reduce(function(prev, cur) { return cur.price + prev; }, -10); console.log(count); // 75
我們給例子增加一點難度,商城在搞促銷,對商品有一定的折扣,我們應該如何求得商品的總價格呢?利用reduce
方法也可以很容易解決的。
var goodList = [ { good: 'paper', price: 12 }, { good: 'book', price: 58 }, { good: 'CD', price: 15 } ]; var dis = { paper: 0.5, book: 0.8, CD: 0.2 } var count = goodList.reduce(function(prev, cur) { return cur.price + prev; }, -10); var qcount = goodList.reduce(function(prev, cur) { return cur.price * dis[cur.good] + prev; }, 0); console.log(count, qcount); // 75 55.400000000000006
我們這裡就忽略JS中的精度問題吧,因為這裡主要講解reduce()
方法的用法。
再舉一個例子,如何求得一串字符串中每個字母出現的次數?如果我們不用reduce()
方法也可以實現的,
代碼如下:
var arrString = 'fghffgaga'; var strArr = arrString.split(''); var rel = {}; var count = 1; for (var i = 0; i < strArr.length; i++) { for (var j = i + 1; j < strArr.length; j++) { if (strArr[i] == strArr[j]) { count++; strArr.splice(j, 1); j = j - 1; } } var qcount = count; count = 1; rel[strArr[i]] = qcount; } console.log(rel); // {f: 3, g: 3, h: 1, a: 2}
利用reduce()方法的代碼如下:
var arrString = 'fghffgaga'; var rel = arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res; }, {}) console.log(rel); // {f: 3, g: 3, h: 1, a: 2}
哈哈,利用reduce()
方法來處理的話,代碼是不是簡單瞭很多?
我們可以用reduce()
方法來對數組中的每個元素來做各種處理,將一種類型的數組轉換成另一種類型的數組。
var arr = [1, 2].reduce(function(res, cur) { res.push(cur + ''); return res; }, []); console.log(arr); // ["1", "2"]
到此這篇關於JavaScript數組reduce()方法 的文章就介紹到這瞭,更多相關JS數組reduce()內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript中reduce()的用法實例
- 關於reduce的介紹及用法說明
- JS使用reduce()方法處理樹形結構數據
- JavaScript數組reduce常見實例方法
- Vue實現簡易購物車案例