js中reduce的用法

i_garfileo 发布于2019-08-22 11:19 / 1972人阅读

摘要：第一天写文章，心里难免有些小激动，希望能坚持下去，有输出才有更好的输入。用户选择完之后，我会得到一个时间戳的数组这里呢我们先需要看一下的语法。

第一天写文章，心里难免有些小激动，希望能坚持下去，有输出才有更好的输入。

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的值。

我在项目中的使用

在项目中有个这样的页面

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

合并完只有两项

服务器托管云服务器 js中split的用法 reduce用法 js中json数据封装用法 java中枚举的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92182.html

js中reduce的神奇用法

摘要：最近经常在项目中经常看到别人用处理数据，很是牛掰，很梦幻，不如自己琢磨琢磨。初始值或者计算结束后的返回值。当前元素所属的数组对象。传递给函数的初始值，相当于的初始值。 showImg(https://user-gold-cdn.xitu.io/2018/9/4/165a52f4bf93fbf4?w=6000&h=3000&f=jpeg&s=3043490); 最近经常在项目中经常看到别...

岳光 2019-08-23 11:43 评论0 收藏0
浅谈JS中 reduce() 的用法

摘要：一语法其中，表示将要原数组表示上一次调用回调时的返回值，或者初始值表示当前正在处理的数组元素表示当前正在处理的数组元素的索引，若提供值，则索引为，否则索引为表示初始值。一、语法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示将要原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 评论0 收藏0
js数组方法forEach、map、filter、reduce、every、some总结

摘要：不会改变原数组，它返回过滤后的新数组。打印到控制台成功的收集到里面错误的收集到里面。语法参数回调当前的当前的索引值这个数组对象回调的指向用法场景这个一般就用在，判断数组的每个元素是否符合条件。首先是函数概述：map():返回一个新的Array，每个元素为调用func的结果 filter():返回一个符合func条件的元素数组 some():返回一个boolean，判断是否有元素是否符...

CocoaChina 2019-08-26 12:11 评论0 收藏0
JS中ArrayAPI学习笔记

摘要：如果该函数的返回值大于，表示第一个成员排在第二个成员后面其他情况下，都是第一个元素排在第二个元素前面。第三次执行，为上一轮的返回值，为第四个成员。第四次执行，为上一轮返回值，为第五个成员。 JS中ArrayAPI学习笔记记博客,时常回顾.尤其是面试之先回顾阮一峰标准库Array对象 1 一些标准库回顾 showImg(https://segmentfault.com/img/remo...

tolerious 2019-08-22 17:32 评论0 收藏0
js数组用法

摘要：方法是方法的逆向操作，后者是将字符串分割成数组。不是所有的值都是偶数含有偶数和将数组元素进行组合，生成单个值数组求和数组求积求最大值函数需要两个函数，第一个是执行简化操作的函数，第二个是初始值。数组的添加和删除 push()方法在数组的尾部添加一个或者多个元素 a = []; a.push(zero) // a = [zero] a.push(on...

Harriet666 2019-08-26 11:50 评论0 收藏0