首页 > web前端 > js教程 > JavaScript中的reduce()如何使用

JavaScript中的reduce()如何使用

不言
发布: 2019-01-08 16:48:07
原创
5493 人浏览过

reduce()是将数组数据的每个元素累积为一个值的最佳方法,所以本篇文章我们就来详细介绍一下JavaScript中reduce()的使用方法。

JavaScript中的reduce()如何使用

下面我们来看具体的内容。

假设我们有一个这样的数组:

var numbers = [1,2,3,4,5,6,7,8,9];

var strings = ['苹果','香蕉','梨子','葡萄','荔枝'];
登录后复制

在这个例子中,我们准备了一个存储数字数据的数组和一个存储字符串数据的数组。

使用reduce()最明显的方法是计算存储在这种数组中的所有值的值。

如果是数值,则可以计算求和值,如果是字符,则可以将单个字符串连接在一起。

下面我们来看如何使用reduce()?

reduce()可以在目标数组上执行任意函数。

数组.reduce(function(累积值, 元素) { })
登录后复制

第一个参数的“累积值”表示通过按顺序处理数组元素获得的值。

第二个参数“元素”表示当前处理的数组元素。

在该函数中使用“return”,通过返回任意处理,结果保留在累积值中,最后可以获得一个值。

我们来看具体的示例

对数组的每个元素求和

代码如下

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {
  return a + b;
})
console.log(result);
登录后复制

运行结果如下

JavaScript中的reduce()如何使用

在此示例中,对存储1到9的数字的数组执行reduce()。

在函数中,您可以看到累加的值和每个元素都被简单地添加。

在第一次处理中变为“1 + 2”,将和存储在累积值中,并在下一次处理中执行“3 + 3”。

通过这样做,运行结果输出所有值相加为“45”。

最后我们需要说明一点:

reduce()的函数中使用“break”中断处理的方法是不可以的,因此作为替代方案,存在利用数组的索引号的中断方法,我们下面来简单看一下。

实际上,reduce()的函数中最多可以有四个参数。

配列.reduce(function(累积值, 元素, 索引号, 数组) { })
登录后复制

第三个参数“索引号”表示当前处理的数组的索引号。

第四个参数“数组”表示当前正在处理的数组本身。

利用这个参数,可以如下来实现中断过程!

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {
  if(index >= 3) arr.splice(1);
  return a + b;
});
console.log(result);
登录后复制

运行结果如下

JavaScript中的reduce()如何使用

请注意reduce()函数中的IF语句!

通过在条件表达式中描述 “index> = 3”,当它成为数组的第三个索引号时,可以执行任意处理。

该过程变为“arr.splice(1)”,并删除第三个索引之后的所有数组元素。

因此,reduce()的处理将结束,因此您可以执行与“break”相同的功能。

以上是JavaScript中的reduce()如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板