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()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-01-11

详解JS数组Reduce()方法详解及高级技巧

基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

JS数组reduce()方法原理及使用技巧解析

1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. callback (执行数组中每个值的函数,包含四个参数) 1.previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2.currentValue (数组中当前被处理的元素)

JavaScript数组reduce()方法的语法与实例解析

前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪

JS数组Reduce方法功能与用法实例详解

本文实例讲述了JS数组Reduce方法功能与用法.分享给大家供大家参考,具体如下: 概述 一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一. reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值.举个形象的例子:你要组装一台电脑,买了主板.CPU.显卡.内存.硬盘.电源...这些零件是组装电脑的必要条件. 装的过程可以简单概括为拆掉每个零件的包装,再装到一起.类比一下reduce函数就可以明白了,那些零件

JavaScript中reduce()方法的使用详解

JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准; 因此它可能不存在在标准的其他实现.为了使它工作,你需要添加

javascript数组去重方法分析

本文实例讲述了javascript数组去重方法.分享给大家供大家参考,具体如下: 方法一. 思路:创建一个新的空数组,循环遍历旧数组,用indexOf()方法,可以取得元素在数组中的位置,如果值为-1表示不存在.那么新数组用indexOf去获取老数组的每一个元素,如果值为-1表示不存在,就把他push到新数组里,最后输出新数组即去重后的数组 var arr=[24,56,74,89,24,56,78,09,24]; var new_arr=[]; for(var i=0;i<arr.length

JavaScript数组push方法使用注意事项

js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意: 引自 MDN 返回值 当调用该方法时,新的 length 属性值将被返回. var sports = ["soccer", "baseball"]; var total = sports.push("football", "swimming"); console.log(sports); // ["soccer",

javaScript数组迭代方法详解

本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下 每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身. forEach()  对数组中的每一项运行 给定函数.该方法没有返回值. every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true. some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回tr

javascript数组去重方法汇总

javascript数组去重方法汇总 Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; }; Array.pro

javascript数组去重方法总结(推荐)

 第一种--对象键值去重 Array.prototype.unique1 = function () { var r = {}, temp = [] for (var i = 0; i < this.length; i++) { if (!r[this[i]]) { r[this[i]] = 1 temp.push(this[i]) } } return temp } 第二种--splice删除去重 Array.prototype.unique2 = function () { for (var

JavaScript正则表达式校验与递归函数实际应用实例解析

JS递归函数(菲波那切数列) 实例解析: 一组数字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; }else if(i==1){ return 1; }else{ return sl(i-1)+sl(i-2); } } 正则表达式检验 //校验是否全由数字组成 function isDigit(