js-数组方法reduce奇技淫巧

前言

最近读《JavaScript 高级程序设计》，里面有一章介绍数组类型，有一个方法是之前没怎么见过，也是我没有系统的掌握，发现这个方法大有可用，还有可能提高你编程的 B 格，所以就记录下来

书里面的内容介绍

可以看到函数的兼容性还是很好的。

先介绍一下参数，reduce 和 reduceRight 都接受两个参数，一个是函数，一个可选参数，只是一个从左遍历，一个从右

arr.reduce(callback,[initialValue])

那个这个 callback 又能接受 4 个参数，都为可选

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

返回值：第一个参数 -> 也就是函数，返回的任何值都会作为第一个参数传给下一项（previousValue），这个过程会把数组的每一项都遍历，最后函数的返回直作为 reduce 的返回值

解释：如果有第二个参数 initialValue，则 initialValue 作为函数的第一个参数 previousValue，如果没有，则数组的第一项 [0] 作为 previousValue, 第二项[0], 作为 currentValue，也就是说当没有第二个参数时，数组遍历 length- 1 次，因为从第二项开始。

书中给出一个实例 求和，我之前的求和就是 for 循环累加，但是书里面的写法好像逼格更高了一点，但写程序不能纯装逼，我们来看看还能有什么其他用法。

简单的示例

求和

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);// 第一次 (1, 2, 1)，第二次 (3, 3, 2)，第三次 (6, 4, 3)
    return prev + cur;
})
console.log(arr, sum);// [1, 2, 3, 4],10

设置一个初始值 0

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);// 第一次 (0, 1, 0)，第二次 (1, 2, 2)，第三次 (3, 3, 3), 第四次 (6, 4, 4)
    return prev + cur;
}, 0)
console.log(arr, sum);// [1, 2, 3, 4],10

警惕：当 reduce 没有第二个参数 initialValue 的时候，且数组为空[], 若函数有参数 prev，则会报错，因为找不到第一项。

这样的话我们可以做数组的其他运算，求积，幂次方等等

高级用法

数组去重

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

对象去重

var arr = [{id: 0, name: "小明"},
    {id: 1, name: "小张"},
    {id: 2, name: "小李"},
    {id: 3, name: "小孙"},
    {id: 1, name: "小周"},
    {id: 2, name: "小陈"}
]
var obj = {}
var newArr = arr.reduce((pre, cur) => {obj[cur.id] ? '' : obj[cur.id] = true && pre.push(cur);
    return pre
}, [])
console.log(newArr)
// 0: {id: 0, name: "小明"}
// 1: {id: 1, name: "小张"}
// 2: {id: 2, name: "小李"}
// 3: {id: 3, name: "小孙"}

es6 如何去重

let arr = [1, 2, 3, 3, 4, 2]
let newArr = Array.from(new Set(arr))
console.log(newArr)// [1, 2, 3, 4]

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

let arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let arrNum = arr.reduce((prev,cur)=>{if(cur in prev){prev[cur]++
  }else{prev[cur] = 1 
  }
  return prev
},{})
console.log(arrNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

将二维数组转化为一维

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]

将多维数组转化为一维

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]

对象属性求和

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