mapreduce 与 sql 语句的优劣势比较

前言

今天遇到了一个数据处理的问题，虽然解决了，但过程看起来很繁琐，代码不优雅而且逻辑非常繁琐。用了reduce能轻松解决而且美观。我们先来学习reduce，再来举例如何使用reduce以及与map的区别

一.reduce的使用

1、语法

arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

2、实例解析 initialValue 参数

第一个例子：

var arr = [2, 1, 4, 5];
var sum = arr.reduce((prev, cur, index, arr)=>{
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

打印结果：
2 1 1
3 4 2
7 5 3
[2, 1, 4, 5] 12

这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

看第二个例子：

var arr = [2, 1, 4, 5];
var sum = arr.reduce((prev, cur, index, arr)=> {
    console.log(prev, cur, index);
    return prev + cur;
},0) //注意设置了初始值
console.log(arr, sum);

打印结果：
0 2 0
2 1 1
3 4 2
7 5 3
[2,1,4,5] 12

这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

3、reduce的简单用法

3.1 求和与累积

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

3.2 计算数组中每个元素出现的次数

let names = ['1', '1', '2', '2', '3','1'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{"1":3,"2":2,"3":1}

3.3 数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

3.4 将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

3.5 将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

3.6 对象里的属性求和(reduce最适用的业务)

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

二.Map类型

1.Map 的基本概念

Map 保存一个键值对, 任何值或键都作为一个键或者值。和 Set 中元素的 [value,value] 形式不同，Map 中元素的形式是 [key,value]

注：要是用引用类型的数据作为键名，则要注意获取该键值对时，需要传递同地址的引用类型的数据，而非简单的同值数据。

2.Map 的属性

• map.size: map中的元素的数量

3.Map 的方法

3.1创建和增加

• 构造函数传入数组创建
• 使用 Set 对象创建 Map 对象
• map.set(key, value) 新增一条键值对记录，然后返回该map对象

3.2 删除

• map.delete(key) 如果存在该 key 删除后则返回 true，要是没有该元素则返回 false
• map.clear() 移除Map对象的所有键/值对

3.3 查询和遍历

• map.has(key) 如果存在该 key 则返回 true，否则则返回 false
• map.get(key) 如果存在该 key 则返回 key 对应的 value，否则则返回 undefined
• map.entries() 返回一个新的迭代器对象，按照插入顺序包含的元素形式是[key, value] 的数组
• map.keys() 返回一个新的可迭代的对象，包含了按照插入顺序的 map 的 各个键
• map.values() 返回一个新的可迭代的对象，包含了按照插入顺序的 map 的 各个值
• map.forEach((value,key,map)=>{}) 其中 value 是当前元素的值，key 是当前元素的键名，map是当前正在遍历的 map 对象

三.实例见解

原来的数据是这样的(由于太长，只贴了部分数据)
目的：将同年级的value相加，并按照月份和等级筛选出来

const data = {
  "visionList": [
    {
      "gradeId": "1",
      "checkResult": "A",
      "quarter": "9",
      "value": "14"
    },
    {
      "gradeId": "1",
      "checkResult": "B",
      "quarter": "9",
      "value": "7"
    },
   ]
  }

处理方法

const getData=(data,firstGradeId,lastGradeId,checkResult)=>{
   const midData =  data.visionList.filter(item=>{
        return item.quarter>=firstGradeId||item.quarter<=lastGradeId
    }).filter(i =>{
        return i.checkResult == checkResult
    })

    let gradeArr =[...new Set(data.visionList.map(item=>{
        return item.gradeId
    }))]

    let gradeObject={}

    gradeArr.map(item =>{
        midData.map(i =>{
            if(i.gradeId ==item){
                gradeObject={
                    ...gradeObject,
                    [item]:gradeObject?.[item]?.length>0?[...gradeObject[item],i]:[i]
                }
            }
        })
    })
}

这样处理之后，虽然能达到目的，但是由于太繁重，不仅到达目的还差一步，而且代码非常的不美观。再看看用了reduce方法之后的。

1.使用reduce处理数据

使用reduce和Map类型相结合处理数据

let res = new Map()
  
  const midData = data.reduce((pre=[],item) =>{
      if(res.has(item.gradeId)){
          res.get(item.gradeId).value =String(+res.get(item.gradeId).value + +item.value)
      }else{
          let a = {...item}
          pre.push(a)
          res.set(item.gradeId,a)
      }
      return pre
  },[])

  console.log(midData)

打印后的结果：

2、使用map方法处理上面的数据

let res1 = new Map()
let list =[]
const result = data.map(item=>{
  if(res1.has(item.gradeId)){
          res1.get(item.gradeId).value =String(+res1.get(item.gradeId).value + +item.value)
    }else{
          let a = {...item}
          list=[...list,a]
          res1.set(item.gradeId,a)
    }
})
console.log(list)

总结：两者的结果一模一样，代码只是略微的不同，map需要先定义list再去接收返回，而reduce已经有了pre参数，而且在reduce的第二个参数可以随时定义pre的类型。当然，一般用reduce能解决的map都能解决，通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高…