reduce()方法详解

这篇具有很好参考价值的文章主要介绍了reduce()方法详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

定义和用法
reduce() 方法将数组缩减为单个值。
reduce() 方法为数组的每个值(从左到右)执行提供的函数。
函数的返回值存储在累加器中(结果/总计)。

注释:对没有值的数组元素,不执行 reduce() 方法。
注释:reduce() 方法不会改变原始数组。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数值

参数 描述
function(total, currentValue, index, arr) 必需。为数组中的每个元素运行的函数。
函数参数:
参数 描述
total 必需。initialValue,或函数先前返回的值。
currentValue 必需。当前元素的值。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象
initialValue 可选。作为初始值传递给函数的值。

1、实例解析 initialValue 参数

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);


VM6252:3 1 2 1
VM6252:3 3 3 2
VM6252:3 6 4 3
VM6252:6 (4) [1, 2, 3, 4] 10

这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

再来看一个

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0);
console.log(arr, sum);


VM282:3 0 1 0
VM282:3 1 2 1
VM282:3 3 3 2
VM282:3 6 4 3
VM282:6 (4) [1, 2, 3, 4] 10

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

2、reduce的简单用法

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24

3、reduce的高级用法

(1)计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

(2)数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

(3)将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

(4)将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(5)对象里的属性求和文章来源地址https://www.toymoban.com/news/detail-418829.html

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

到了这里,关于reduce()方法详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6 reduce方法:示例与详解、应用场景

    还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。 No. 内容链接 1 Openlayers 【入门教

    2024年04月13日
    浏览(38)
  • js中reduce()函数的用法

    😁 作者简介:一名大三的学生,致力学习前端开发技术 ⭐️个人主页:夜宵饽饽的主页 ❔ 系列专栏:JavaScript小贴士 👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气 ​🔥​前言: 这是我自己有关array.prototype.reduce()函数的用法的总结,如有不足

    2024年02月07日
    浏览(42)
  • JS操作数组神器——reduce(求和、出现次数、去重、分类)

    reduce() 对数组每个元素执行一次由您提供的reduce函数(升序执行),将其结果汇总为单个返回值。 循环遍历能做的,reduce都可以做。比如数组根据元素某个属性求和、数组元素出现次数、数组去重、数组根据某个元素属性分类等等。 参数介绍 prev 必需。累计器累计回调的返回值

    2023年04月26日
    浏览(35)
  • 【C++入门】学习使用二维数组基本知识及用法详解

    🧛‍♂️iecne个人主页: : iecne的学习日志 💡每天 关注 iecne的作品,一起进步 💪一起学习,必看iecne 🐳希望大家多多支持🥰一起进步呀! 二维数组就是在一维数组上多加一个维度。 建议:以下三种定义方式,利用第二种更加直观,提高代码可读性 第二种就是在定义一

    2024年01月25日
    浏览(53)
  • JAVA的sort用法详解(二维数组排序,List<>排序,lambada表达式,自定义类型排序)

    目录 前言: 一维数组降序: 方法1.Comparator接口: 代码实现: 方法2.Collections.reverseOrder(): 代码实现:  二维数组排序: 代码如下: List排序: 代码如下: 自定义类型比较排序: 按照年龄逆序排序: 按照姓名升序排序: lambada表达式简写: 一维数组逆序代码: 二维数组排

    2024年04月09日
    浏览(62)
  • python 中的 setdefault 方法详解、底层原理和用法

    setdefault是Python中字典的一个方法, 它用于在字典中查找指定键 如果键存在, 则返回对应的值; 如果键不存在,则在字典中添加该键,并将其值设置为指定的默认值 其中,key为要查找或添加的键,default_value为键不存在时设置的默认值。 如果省略default_value,则默认为None。

    2024年02月03日
    浏览(57)
  • JS判断数组类型的方法详解

    判断 JavaScript 变量是否为数组类型可以使用以下方法: 使用 Array.isArray() 方法:这是一种确定变量是否为数组的最简单、最可靠的方法。该方法返回一个布尔值,如果变量是数组,则返回 true;否则返回 false。 使用 instanceof 运算符:该运算符用于判断一个变量是否为某个类型

    2024年02月16日
    浏览(32)
  • JavaScript 之 常用迭代方法forEach、filter()、map()、reduce()

    代码如下: 如下: 代码简洁很多,如下: 简介 : filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。 语法 : 参数、返回值 描述 参考官网: 官网——Array.prototype.filter(). 代码如下: 代码如下: 下例使用 filter() 根据搜索条件来过滤数

    2024年02月09日
    浏览(41)
  • ES6 - promise.all和race方法的用法详解

    一、前言 谈谈你对Promise的理解? 答 :Promise用来解决异步回调问题,由于js是单线程的,很多异步操作都是依靠回调方法实现的,这种做法在逻辑比较复杂的回调嵌套中会相当复杂;也叫做回调地狱; promise用来将这种繁杂的做法简化,让程序更具备可读性,可维护性;pro

    2024年02月15日
    浏览(33)
  • Python cv.StereoSGBM_create方法参数与用法详解

    创建StereoSGBM(semi-global block matching)对象。该对象实现了半全局匹配算法。 cv.StereoSGBM_create([, minDisparity[, numDisparities[, blockSize[, P1[, P2[, disp12MaxDiff[, preFilterCap[, uniquenessRatio[, speckleWindowSize[, speckleRange[, mode]]]]]]]]]]]) - retval minDisparity:最小可能的差异值。正常情况下,它为零,但

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包