JavaScript數(shù)組reduce()方法?
將某個值減去數(shù)組中的每個元素:
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類型,所以返回的結(jié)果也是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()是一個很強大的方法,我們還可以用它來處理更復(fù)雜的業(yè)務(wù)邏輯。
例如,求購物車中商品的總價,購物車數(shù)據(jù)如下:
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元的優(yōu)惠券的話,我們只需要將 -10作為初始值傳入reduce()方法中就可以了。
var count = goodList.reduce(function(prev, cur) {
? ? return cur.price + prev;
}, -10);
console.log(count); // 75我們給例子增加一點難度,商城在搞促銷,對商品有一定的折扣,我們應(yīng)該如何求得商品的總價格呢?利用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()方法的用法。
再舉一個例子,如何求得一串字符串中每個字母出現(xiàn)的次數(shù)?如果我們不用reduce()方法也可以實現(xiàn)的,
代碼如下:
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()方法來對數(shù)組中的每個元素來做各種處理,將一種類型的數(shù)組轉(zhuǎn)換成另一種類型的數(shù)組。
var arr = [1, 2].reduce(function(res, cur) {?
? res.push(cur + '');?
? return res;?
}, []);
console.log(arr); // ["1", "2"]
到此這篇關(guān)于JavaScript數(shù)組reduce()方法 的文章就介紹到這了,更多相關(guān)JS數(shù)組reduce()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在標(biāo)題欄顯示新消息提示,很多公司項目中用到這個方法
在標(biāo)題欄顯示新消息提示,很多公司項目中用到這個方法,需要的朋友可以參考下。2011-11-11
javascript XML數(shù)據(jù)顯示為HTML一例
通過Javascript把xml轉(zhuǎn)換成html格式輸出一列2008-12-12
JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實例代碼和語法介紹,需要的朋友可以參考下2015-05-05
javascript設(shè)計模式 – 策略模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 策略模式,結(jié)合實例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
js 頁面刷新location.reload和location.replace的區(qū)別小結(jié)
在實際應(yīng)用的時候,重新刷新頁面的時候,我們通常使用: location.reload() 或者是 history.go(0) 來做。下面有一些相關(guān)的內(nèi)容,大家看完了就會有更多的收獲。2009-12-12

