js中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数组上,这个函数必须接收两个参数:

  1. pre: 数组里的第一个值或者上一次叠加的结果值。
  2. current:代表这当前参与运算的值

打印一下每一次pre,current可以看到,一共遍历了9次,return 返回的是下一次遍历的pre的值。


1 2
3 3
6 4
10 5
15 6
21 7
28 8
36 9
45 10

我在项目中的使用

在项目中有个这样的页面
图片描述

用户选择所要预定的时间,当然可以随便的选择,比如说选择了四个时间段
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}]

合并完只有两项


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值