进阶JS-reduce用法

2023-09-14 23:37:07

reduce()

reduce()方法为循环遍历数组,将其结果汇总为单个返回值,最常用的场景有数组求和、数组求积、数组中元素出现的次数、数组去重等等。

语法:
arr.reduce(function(prev,cur,index,arr){
...
}, init);

参数:

    prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值,或者初始值 init;
    cur 必需。表示当前正在处理的数组元素;
    index 可选。表示当前正在处理的数组元素的索引,若提供 init 值,则起始索引为- 0,否则起始索引为1;
    arr 可选。表示原数组;
    init 可选。表示初始值。

prev,cur,index,arr:前一个值、当前项、项目的索引和数组对象

1.当reduce()方法的init为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值,init不为空时,第一次循环方法中的第一个参数(prev)为reduce的第二项值,第二个参数(cur)为数值的第三项值。

2.reduce()方法的第一个参数,就是每次遍历都会执行的匿名函数,当前函数的返回值就会传给下一次执行函数的第一个值(prev)。

案例1:init为空

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

sum值为15

案例2:init不为空

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

sum的值为20

reduce的应用

数组求和
let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b)) // 15
console.log(arr.reduce((a,b) => a * b))  // 120

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

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
  console.log(allNames,name);
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);//{Alice:2,Bob:3,Tiff:1,Bruce:1}

去除数组中重复的元素

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator;
}, []);
console.log(myOrderedArray);  //  ['a','b','c','d']
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //  [1,2,3,4,5]
      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];
 
      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);
 
      console.log(value);//[1, 2, 3, 5, null, 0, false, true]

按属性对Object分类(某属性的值相同的放在一个对象里)

var person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);
累加数组中对象的值
let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];
let result = people.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)
console.log(result) // 结果:61
将二维数组转为一维数组
      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];
 
      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);
 
      console.log(value); // [0, 1, 2, 3, 4, 5]

更多推荐

【MATLAB第75期】#源码分享 | 基于MATLAB的不规则数据插值实现时间序列数据扩充

【MATLAB第75期】#源码分享|基于MATLAB的不规则数据插值实现时间序列数据扩充如时间数据以单位1为间隔排序,可插间隔为0.5的数据。一、实现效果1.规则间隔数据2.非规则间隔数据二、主程序代码1.插值测试效果%%清空环境变量warningoff%关闭报警信息closeall%关闭开启的图窗clear%清空变量

MySQL(3)索引实践一

一、索引下推:对于辅助的联合索引(name,age),正常情况按照最左前缀原则,SELECT*FROMuserWHEREnamelike'xiao%'ANDage=22这种情况只会走name字段索引,因为根据name字段过滤完,得到的索引行里的age是无序的,无法很好的利用索引。在MySQL5.6之前的版本,这个查询只

Matlab之并行程序设计实战教程

在本教程中,我们将介绍如何使用Matlab进行并行程序设计。我们将通过一个简单的示例来演示如何将串行代码转换为并行代码,以提高程序的执行效率。示例:计算一个数组的平方和假设我们有一个包含10000个元素的数组,我们想计算该数组的平方和。首先,我们来看看如何使用串行代码实现这个任务。%%串行代码array=1:10000

javase javaee javame

1.JavaSEJavaSE(JavaPlatform,StandardEdition):Java平台标准版。它是JavaEE和JavaME的基础,之前称为J2SE,用来开发C/S架构软件,通俗来讲,就是开发电脑桌面的应用软件、电脑上运行的软件,例如,Java应用程序开发平台Eclipse。同时也是Java的基础,Ja

阿里云服务器租用费用价格表(2023新版报价)

租用阿里云服务器怎么收费?阿里云服务器配置不同一年价格也不同,阿里云2核2G3M带宽108元一年、2核4G4M带宽297.98元12个月,云服务器u1公网带宽可选1M到5M,系统盘为ESSD云盘40GB起,CPU内存配置可选2核2G、2核4G、4核8G、8核16G等配置,还有ECS计算型c7、通用型g7和内存型r7多C

Python子进程管理与进程信息获取

1.Python子进程模块subprocesssubprocess模块允许我们启动一个新进程,并连接到它们的输入/输出/错误管道,从而获取返回值。(1)run方法首先我们来看看run方法的使用,该方法的参数如下:args:表示要执行的命令。必须是一个字符串或字符串参数列表。stdin、stdout和stderr:子进程

【UE 粒子练习】05——创建光束类型粒子

效果步骤1.新建一个材质,这里命名为“Mat_Beam”设置材质域为表面,混合模式为半透明,着色模型为无光照材质节点如下:2.新建一个粒子系统,命名为“P_Beam”打开“P_Beam”,在发射器中新建一个光束数据在必需模块中将材质改为上一步创建的材质“Mat_Beam”在“光束数据”模块中,设置光束方法为“目标”,这

【Graph Net学习】DeepWalk/Node2Vec实现Graph Embedding

一、简介本文主要通过代码实战介绍基础的两种图嵌入方式DeepWalk、Node2Vec。DeepWalk(KDD2014):首个影响至今的图的Embedding算法,DeepWalk算法是一种用于学习节点表示的方法,常用于网络图中的节点的嵌入表示。模型目标输入输出Word2VecWordSentenceWordEmbe

Digger PRO - Voxel enhanced terrains

资源链接在文末DiggerPRO​​​是一个简单但强大的工具,可以直接从Unity编辑器或游戏中创建天然洞穴和悬岩。会让你感觉自己手中握有一个体素地形,且毫无瑕疵。它实际上保持着最新、最快且可靠的Unity地形系统,并在你需要的地方无缝创建洞穴/悬岩峭壁网格。Digger内部使用体素和MarchingCubes来创建网

(二)kafka从入门到精通之kafka的优势

学习传送门(一)kafka从入门到精通之初识kafka一、常用消息队列比较基于发布与订阅的消息系统那么多,为什么Kafka会是一个更好的选择呢?咱们先来简单的看看mq的一个对比图吧。特性ActiveMQRabbitMQRocketMQKafka生产者消费者模式支持支持支持支持发布订阅模式支持支持支持支持请求回应模式支持

基于卷积神经网络的手写字体识别(详细笔记)

主要参考博客:1、基于卷积神经网络的手写数字识别(附数据集+完整代码+操作说明)2、用PyTorch实现MNIST手写数字识别(最新,非常详细)基于卷积神经网络的手写字体识别——目录1前言1.1实现效果1.2学习背景1.3关于MNIST手写数据集2残差网络2.1深度学习中的退化问题2.2残差网络结构2.3残差块的网络模

热文推荐