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