js中reduce的用法

i_garfileo 發(fā)布于2019-08-22 11:19 / 2109人閱讀

摘要：第一天寫文章，心里難免有些小激動，希望能堅持下去，有輸出才有更好的輸入。用戶選擇完之后，我會得到一個時間戳的數(shù)組這里呢我們先需要看一下的語法。

第一天寫文章，心里難免有些小激動，希望能堅持下去，有輸出才有更好的輸入。

reduce這個方法最初我是在面試題里看見的
有一個長度為100的數(shù)組，請以優(yōu)雅的方式求出該數(shù)組的前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

基礎(chǔ)的用法
就如面試一樣，把一個函數(shù)作用在a數(shù)組上，這個函數(shù)必須接收兩個參數(shù):

pre: 數(shù)組里的第一個值或者上一次疊加的結(jié)果值。

current:代表這當前參與運算的值

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

我在項目中的使用

在項目中有個這樣的頁面

用戶選擇所要預(yù)定的時間，當然可以隨便的選擇，比如說選擇了四個時間段
11：00~11：30，11：30~12：00，
12：00~12：30，18：00~18：30
我需要判斷一下如果選擇的時間段中有連續(xù)的時間，那么就要合并成一項，如上說的四個時間段，我需要合并成11：00~12:30,18:00~18:30,在把這個時間傳給后臺，生成兩個訂單。
用戶選擇完之后，我會得到一個時間戳的數(shù)組timeList,這里呢我們先需要看一下reduce的語法。

arr.reduce(callback,initialValue)

callback （執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)，上面的面試題里已經(jīng)看了兩個）

   pre （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
   current （數(shù)組中當前被處理的元素）
   index （當前元素在數(shù)組中的索引）
   array （調(diào)用 reduce 的數(shù)組）

initialValue （作為第一次調(diào)用 callback 的第一個參數(shù),這里呢也可以理解為最終返回值是什么類型）

//選擇好的時間
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方法了，既然我想結(jié)果返回一個數(shù)組，那么initial這個參數(shù)，我也要放一個數(shù)組進去


具體方法如下
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}]

合并完只有兩項