专栏首页视频播放js中reduce的用法(二) 详解与注意事项

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

  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

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

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}]

合并完只有两项

原文链接:https://segmentfault.com/a/1190000012454941

相关文章

  • js中reduce的用法

    reduce() 是数组的归并方法,reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算

    用户6973020
  • JavaScript array对象

    concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

    用户6973020
  • javaScript 循环遍历大全

    写下这篇文章的目的,主要是想总结一下关于JS对于集合对象遍历的方式方法,以及在实际应用场景中怎样去使用它们。本文会主要介绍:while,for,forEach,...

    用户6973020
  • 尝鲜 ES2019 的新功能 [每日前端夜话0x38]

    ECMAScript 每年都会发布一个新版本,其中的提案是已经正式通过的,并分发给开发者和用户。本文将讨论该语言的最新版本,以及它又具有了什么新功能。

    疯狂的技术宅
  • Python numpy的shape用法

    形状变化是基于数组元素不能改变的,变成的新形状中所包含的元素个数必须符合原来元素个数。如果数组元素发生变化的时候,就会报错:

    瑞新
  • Python第三十三课:NumPy统计函数

    有时候,我们想要知道一个数组中的统计信息,比如最大元素,最小元素,数组的平均值,方差等信息。这时候NumPy就给我提供了相关的函数 让我们方便观察数组的统计信息...

    HuangWeiAI
  • [jQuery学习系列二 ]2-JQuery学习二-数组操作

    一枝花算不算浪漫
  • Numpy 简介

    NumPy是Python中科学计算的基础软件包。 它是一个提供多了维数组对象,多种派生对象(如:掩码数组、矩阵)以及用于快速操作数组的函数及API, 它包括...

    iOSDevLog
  • 啃透JDK源码系列-Arrays核心源码解析

    此类包含用于操纵数组的各种方法(例如排序和搜索)。 此类还包含一个静态工厂,该工厂允许将数组视为列表。 如果指定的数组引用为null,则除非另有说明,否则此类...

    JavaEdge
  • 【C/C++教学】浅谈数组(上)

    在编程中,为了处理成批数据类型相同的数据,c语言提供了一个处理工具即数组,把具有相同类型的若干数据有序的组织起来。这些按序排列的同类数据元素的集合就是这种类型的...

    短短的路走走停停

扫码关注云+社区

领取腾讯云代金券