js中reduce的用法（二） 详解与注意事项
reduce()是将数组数据的每个元素累积为一个值的最佳方法，所以本篇文章我们就来详细介绍一下JavaScript中reduce()的使用方法。
reduce这个方法最初我是在面试题里看见的
有一个长度为100的数组，请以优雅的方式求出该数组的前10个元素之和？
答案如下
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
sum = 0;
sum = a.slice(0, 10).reduce(function(pre, current) {
console.log(pre,current);
return pre + current;
});
console.log(sum); //55基础的用法 就如面试一样，把一个函数作用在a数组上，这个函数必须接收两个参数:
- pre: 数组里的第一个值或者上一次叠加的结果值。
- current:代表这当前参与运算的值
打印一下每一次pre,current可以看到，一共遍历了9次，return 返回的是下一次遍历的pre的值。
1 2
3 3
6 4
10 5
15 6
21 7
28 8
36 9
45 10假设我们有一个这样的数组：
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); //45在此示例中，对存储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); //10请注意reduce()函数中的IF语句！
通过在条件表达式中描述 “index> = 3”，当它成为数组的第三个索引号时，可以执行任意处理。
该过程变为“arr.splice（1）”，并删除第三个索引之后的所有数组元素。
因此，reduce()的处理将结束，因此您可以执行与“break”相同的功能。
我在项目中的使用
在项目中有个这样的页面
用户选择所要预定的时间，当然可以随便的选择，比如说选择了四个时间段 11：00~11：30，11：30~12：00， 12：00~12：30，18：00~18：30
我需要判断一下如果选择的时间段中有连续的时间，那么就要合并成一项，如上说的四个时间段，我需要合并成11：00~12:30,18:00~18:30,在把这个时间传给后台，生成两个订单。
用户选择完之后，我会得到一个时间戳的数组timeList,这里呢我们先需要看一下reduce的语法。
arr.reduce(callback,initialValue)- callback （执行数组中每个值的函数，包含四个参数，上面的面试题里已经看了两个） pre （上一次调用回调返回的值，或者是提供的初始值（initialValue）） current （数组中当前被处理的元素） index （当前元素在数组中的索引） array （调用 reduce 的数组）
- initialValue （作为第一次调用 callback 的第一个参数,这里呢也可以理解为最终返回值是什么类型）
//选择好的时间
let timeList=[
{startTime:1513393200000,endTime:1513395000000},
{startTime:1513395000000,endTime:1513396800000},
{startTime:1513396800000,endTime:1513398600000},
{startTime:1513418400000,endTime:1513420200000},
]
//基本逻辑呢就是如果某一项的endTime==另一项的startTime，那么我就需要将这两项合并为一项，再与其他的作比较
//首先用户呢不会按照一定的顺序去选，人家怎么开心怎么来，所以呢最开始我需要按照startTime的大小进行排序
timeList.sort((val1,val2)=> val1.startTime-val2.startTime);
//接下来就要用到reduce方法了，既然我想结果返回一个数组，那么initial这个参数，我也要放一个数组进去
具体方法如下
var a=timeList.reduce((prev,cur)=>{
if(prev.length!=0&&prev[prev.length-1].endTime==cur.startTime){
prev.splice(prev.length-1,1,{ "startTime": prev[prev.length-1].startTime, "endTime": cur.endTime })
}
else{
prev.push(cur)
}
return prev
},[])
console.log(a)
//[{startTime:1513393200000,endTime:1513396800000},{startTime:1513418400000,endTime:1513420200000}]
合并完只有两项本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。