广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组reduce()方法
  • 546
分享到

JavaScript数组reduce()方法

2024-04-02 19:04:59 546人浏览 八月长安
摘要

将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {    

将某个值减去数组中的每个元素:

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

--结束END--

本文标题: JavaScript数组reduce()方法

本文链接: https://www.lsjlt.com/news/162295.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组reduce()方法
    将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {    ...
    99+
    2022-11-12
  • JavaScript 数组方法filter与reduce
    目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter...
    99+
    2022-11-13
  • Javascript数组方法reduce怎么用
    这篇文章主要为大家展示了“Javascript数组方法reduce怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript数组方法reduce怎...
    99+
    2022-10-19
  • JavaScript数组reduce()方法怎么用
    本篇内容主要讲解“JavaScript数组reduce()方法怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法怎么用”吧!将某个值减去数组中的每个...
    99+
    2023-06-26
  • javascript数组中的reduce方法和pop方法
    目录一、reduce方法1直接vs打开2代码部分3运行结果二、pop方1直接vs打开2代码部分3运行结果前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说fo...
    99+
    2022-11-13
  • JavaScript数组reduce方法如何使用
    今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。redu...
    99+
    2023-07-05
  • JavaScript数组reduce()方法怎么使用
    这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...
    99+
    2022-10-19
  • JavaScript数组reduce常见实例方法
    目录前言一、 reduce定义和用法语法:二、reduce浏览器支持情况三、reduce累加带初始值不带初始值四、reduce数组去重五、reduce求数组项最大值六、reduce将...
    99+
    2022-11-13
  • JavaScript数组reduce()方法的语法和应用
    本篇内容主要讲解“JavaScript数组reduce()方法的语法和应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法的语法和应用”吧!前言redu...
    99+
    2023-06-20
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2022-11-13
  • javascript数组中reduce方法和pop方法怎么用
    这篇文章给大家分享的是有关javascript数组中reduce方法和pop方法怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、reduce方法1直接vs打开2代码部分var geyao=[1,...
    99+
    2023-06-29
  • javascript数组includes、reduce的基本使用方法
    这篇文章主要讲解了“javascript数组includes、reduce的基本使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript数组includes、reduce的...
    99+
    2023-06-20
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2022-11-13
  • JavaScript数组reduce()方法的语法与实例解析
    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数...
    99+
    2022-11-12
  • JavaScript如何使用reduce实现数组filter方法
    这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何...
    99+
    2022-10-19
  • 详解JavaScript数组reduce()方法的高级技巧
    目录1、语法2、实例解析 initialValue 参数3、reduce的简单用法4、reduce的高级用法reduce()方法可以搞定的东西,for循环,或者forEach方法有时...
    99+
    2023-03-24
    JavaScript reduce()方法用法 JavaScript reduce()方法 JavaScript reduce
  • JavaScript中如何使用reduce实现数组map方法
    这篇文章主要介绍了JavaScript中如何使用reduce实现数组map方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家...
    99+
    2022-10-19
  • JavaScript如何使用reduce实现数组的flat方法
    这篇文章主要介绍了JavaScript如何使用reduce实现数组的flat方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大...
    99+
    2022-10-19
  • 怎么使用javascript数组求和中的reduce()方法
    这篇文章将为大家详细讲解有关怎么使用javascript数组求和中的reduce()方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝...
    99+
    2023-06-14
  • js数组方法reduce怎么用
    这篇文章给大家分享的是有关js数组方法reduce怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。javascript数组那么多方法,为什么我要单挑reduce方法,一个原因...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作