JS数组reduce()方法简介

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"]

参考

JS进阶篇–JS数组reduce()方法详解及高级技巧

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在JavaScript中,数组reduce()方法用于对数组中的元素进行累积操作。它接受一个回调函数和一个初始值作为参数。该回调函数用于对数组中的每个元素执行操作,并返回累积结果。如果没有提供初始值,则从索引1开始执行回调函数,跳过第一个索引;如果提供了初始值,则从索引0开始执行回调函数。下面是reduce()方法的几个简单用法。 1. 求和、求乘积等等: 可以使用reduce()方法数组中的元素进行求和、求乘积等操作。例如,给定一个数组arr = [1, 2, 3, 4, 5,可以使用reduce()方法求出数组元素的和、乘积、差和商。,可以使用reduce()方法求出数组元素的累加和和累乘积。,可以使用reduce()方法将重复的元素去除,返回一个新的数组。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [JS数组reduce()方法详解](https://blog.csdn.net/weixin_47619284/article/details/125921346)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [JS 数组中的 reduce 方法](https://blog.csdn.net/a15220216758/article/details/125029602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值