JavaScript數(shù)組reduce()方法?
更新時(shí)間：2022年01月12日 11:13:01 作者：frank201113?
這篇文章主要介紹了JavaScript數(shù)組reduce()方法，reduce()方法是處理數(shù)組的方法，它接收一個(gè)函數(shù)和一個(gè)初始值，然后將數(shù)組中的每個(gè)元素和初始值當(dāng)作參數(shù)傳入這個(gè)函數(shù)中進(jìn)行處理，最后返回和初始值相同類型的值,需要的朋友可以參考一下
將某個(gè)值減去數(shù)組中的每個(gè)元素：
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()簡(jiǎn)單的用法。reduce()是一個(gè)很強(qiáng)大的方法，我們還可以用它來(lái)處理更復(fù)雜的業(yè)務(wù)邏輯。
例如，求購(gòu)物車中商品的總價(jià)，購(gòu)物車數(shù)據(jù)如下：
var goodList = [
? ? {
? ? ? ? good: 'paper',
? ? ? ? price: 12
? ? },
? ? {
? ? ? ? good: 'book',
? ? ? ? price: 58
? ? },
? ? {
? ? ? ? good: 'CD',
? ? ? ? price: 15
? ? } ? ? ??
]然后運(yùn)用reduce()方法可以輕松的獲得所有商品的總價(jià)格：
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我們給例子增加一點(diǎn)難度，商城在搞促銷，對(duì)商品有一定的折扣，我們應(yīng)該如何求得商品的總價(jià)格呢？利用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中的精度問(wèn)題吧，因?yàn)檫@里主要講解reduce()方法的用法。
再舉一個(gè)例子，如何求得一串字符串中每個(gè)字母出現(xiàn)的次數(shù)？如果我們不用reduce()方法也可以實(shí)現(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()方法來(lái)處理的話，代碼是不是簡(jiǎn)單了很多？
我們可以用reduce()方法來(lái)對(duì)數(shù)組中的每個(gè)元素來(lái)做各種處理，將一種類型的數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript中reduce()方法的使用詳解
- js中的reduce()函數(shù)講解
- 詳解JS數(shù)組Reduce()方法詳解及高級(jí)技巧
- JavaScript中array.reduce()數(shù)組方法的四種使用實(shí)例
- JavaScript中自帶的 reduce()方法使用示例詳解
- JS使用reduce()方法處理樹(shù)形結(jié)構(gòu)數(shù)據(jù)
- JavaScript中reduce()的5個(gè)基本用法示例
- JS數(shù)組reduce()方法原理及使用技巧解析
- JS中的reduce()方法使用小結(jié)
- JavaScript中reduce()詳解及使用方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)磚頭在頁(yè)面拖拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javascript實(shí)時(shí)獲取鼠標(biāo)坐標(biāo)值并顯示的方法
這篇文章主要介紹了javascript實(shí)時(shí)獲取鼠標(biāo)坐標(biāo)值并顯示的方法,涉及javascript操作鼠標(biāo)事件的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實(shí)現(xiàn)對(duì)不同集合進(jìn)行統(tǒng)一遍歷操作的一種機(jī)制，只要給需要遍歷的數(shù)據(jù)結(jié)構(gòu)部署Iterator接口，通過(guò)調(diào)用該接口，或者使用消耗該接口的API實(shí)現(xiàn)遍歷操作。,需要的朋友可以參考下2019-06-06
Javascript?Object對(duì)象類型使用詳解
面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過(guò)對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬，這篇文章主要介紹了Javascript?Object對(duì)象類型使用詳解2022-10-10
本篇文章只要是對(duì)JS判斷兩個(gè)時(shí)間大小的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
循環(huán)處理是最常見(jiàn)的編程模式之一，也是提升性能必須關(guān)注的要點(diǎn)之一。本文將對(duì)此進(jìn)行介紹。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要給大家總結(jié)介紹了關(guān)于在JS中如何輕松遍歷對(duì)象屬性的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
在項(xiàng)目中經(jīng)常會(huì)用到動(dòng)態(tài)加載js,下面這篇文章主要給大家介紹了關(guān)于js腳本加載失敗問(wèn)題的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06