首页 > 其他分享 >ES6 中的reduce 方法的使用

ES6 中的reduce 方法的使用

时间:2023-10-22 15:36:37浏览次数:30  
标签:ES6 const 累加器 reduce accumulator 数组 array 方法

reduce() 方法在 JavaScript 中是一个非常有用的数组方法,它对数组中的每个元素应用一个函数,从而将该数组“缩减”为单个值。

reduce() 方法的工作原理是维护一个“累加器”,这是一个值,将在每次迭代中通过返回值被更新。然后,这个函数在每次迭代时都会被调用,并且接收四个参数:累加器,当前元素,当前索引,以及被调用 reduce() 的数组。

这是一个 reduce() 方法的简单示例,它将数组中的所有数字累加起来:

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(total); // 输出 15

这个例子明显可见 reduce() 的工作原理:它开始于一个累加器值为 0 的情况(这是 reduce() 方法的第二个参数为 0 的原因),然后遍历数组中的每个元素。对于每个元素,它将累加器和当前值相加,并将结果作为新的累加器返回。然后,对于数组中的下一个元素,这个过程会再次重复,直到遍历完整个数组。

reduce() 提供了一种非常强大的处理数组的方式,你可以将它用于从数组元素创建新对象,计算数值总和,或者实现其他种类的数组转换和操作。

 

使用 Array.prototype.reduce() 可以将数组转为对象

const arr = ['a', 'b', 'c'];
const obj = arr.reduce((acc, cur, i) => {
    acc[i] = cur;
    return acc;
}, {});

// 在这个例子中,obj 将是 {0: 'a', 1: 'b', 2: 'c'}

在这个例子中,我们使用 reduce 方法从一个累加器(这里是一个空对象)开始,然后迭代数组的每个元素,在累加器对象上创建一个新的属性(属性名是当前索引,属性值是当前项)。

 

Array.prototype.reduce() 是一个内置的 JavaScript 方法,我们不能直接重写它,但我们可以创建一个函数模拟它的行为。以下是一个简单的模拟实现:

function reduce(array, reducer, initialValue) {
    let accumulator = initialValue === undefined ? array[0] : initialValue;
    let startIndex = initialValue === undefined ? 1 : 0;

    for (let i = startIndex; i < array.length; i++) {
        accumulator = reducer(accumulator, array[i], i, array);
    }

    return accumulator;
}

// 使用上述函数
const arr = [1, 2, 3, 4, 5];
const sum = reduce(arr, (accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15

在上述代码中,reduce 函数接受三个参数:

  • array:要迭代的数组。
  • reducer:函数,它接受一个累积量和当前值,以及当前索引和原数组,然后返回更新的累积量。
  • initialValue:可选,它将被作为第一次调用回调函数时的第一个参数(即累积器的初始值)。如果没有提供 initialValue,则将使用数组的第一个元素作为起始值,并从数组的第二个元素开始迭代。

注意,这只是一个基础实现,并未包含所有原生 reduce 方法功能的细节,例如异常处理和某些边缘情况。

我建议在可以使用原生 reduce 方法时,尽可能使用原生方法,因为它已被优化且高度可靠。

标签:ES6,const,累加器,reduce,accumulator,数组,array,方法
From: https://www.cnblogs.com/coodeshark/p/17780489.html

相关文章

  • 将标删除线的文字批量删除,两种方法拯救你的发际线!
    1职场实例小伙伴们大家好,今天我们来解决一个群里提出的“烧脑”问题:如何将标删除线的文字批量删除?如下图所示:A列为一列水果名称,每个单元格内的水果名称有部分名称文字标记上了“删除线”,现在我们想要将标记“删除线”的文字内容批量删除,形成C列删除完成后的效果。“删除线”是如何......
  • java-01-方法
     1、简单的方法2、带参数的       ......
  • js实现大文件分片上传的方法
    借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData对象的使用Blob对象的使用以下是实现代码,本例中后端代码使用php来实现,只是演示基本功能,具体一些文件验证逻辑先忽略。前段代码:<!DOCTYPEhtml><htmlla......
  • oom异常处理方法
    OOM(OutOfMemory)是指应用程序在运行过程中,由于申请的内存超出了JVM堆空间的限制而导致程序崩溃的异常。遇到OOM异常时,可以尝试以下几种方法来解决问题:增加JVM堆空间大小:通过修改JVM参数,增加JVM堆空间的大小,来提高系统所能支持的内存上限,从而解决OOM异常。具体而言,可以通过修改-Xmx......
  • 10-22|处理脏话其他方法
    当然,除了基本的词汇列表过滤方法,还有其他几种处理脏话的方法:1.**机器学习**: 使用机器学习模型进行文本分类,将文本分为"有毒"和"无毒"。这需要大量标注的数据,即已经被标记为有毒或无毒的文本。你可以使用开源数据集,例如Jigsaw的有毒评论分类挑战数据集。然后,可以使用模型如BER......
  • nodejs 安装升级解决导入es6语法兼容性问题??=
    nodejs无法识别??==的问题是因为nodejs的版本太老,而引入的模块中包含了新的语法,例如空值运算符??=。这样nodejs就会报错。解决方法大概有三个1,找到对应老版本的模块使用。2,修改模块中不兼容的语法。3,更新nodejs。三个方法中前两个显然会面临大量工作。作为懒人的我,选择了方......
  • could not chdir to home directory /home/user:permission denied /bin/bash:Permiss
    今天在vm上登录一个user的时候,发现正确输入用户名和密码后弹出了这样的信息,登陆不上.发现给出的信息中,permissiondenied而binpermiss;这种情况表明自己给该用户赋予的权限不足导致问题通过在/home目录下用ll检查到该用户的user权限是---通过chmod7user指令修改后仍......
  • antd G6中建立图表时,让赋值速度慢于建图速度的一个解决方法
    通过异步加载的方式将数据加载和图表建立过程分离,一个简单的例子:import{Chart}from'@antv/g6'//创建一个空的图表容器constcontainer=document.getElementById('chart-container');constchart=newChart({container,//其他配置项...});//异步加......
  • 论文:Ultra Fast Deep Lane Detection with Hybrid Anchor Driven Ordinal Classificat
    论文名:UltraFastDeepLaneDetectionwithHybridAnchorDrivenOrdinalClassification混合Anchor驱动顺序分类的超快深车道检测研究问题:研究方法:主要结论:模型:问题:行文结构梳理:Abstrct:现有方法主要集中在(像素分割)+缺陷(复杂场景)+(通过观察)提出一种高效方......
  • Arrays.asList()把数组转换成集合时,不能使用其修改集合相关的方法
    Arrays.asList()把数组转换成集合时,不能使用其修改集合相关的方法,此处测试代码如下,这里使用add方法:1publicclassmain{2publicstaticvoidmain(String[]args){3int[]num={1,2,3};4Listlist=Arrays.asList(num);5list.add(4);......