js 數組方法reduce奇技淫巧

前言

最近讀《JavaScript高級程序設計》，裏面有一章介紹數組類型，有一個方法是以前沒怎麼見過，也是我沒有系統的掌握，發現這個方法大有可用，還有可能提升你編程的B格，因此就記錄下來

書裏面的內容介紹

能夠看到函數的兼容性仍是很好的。

先介紹一下參數，reduce和reduceRight都接受兩個參數，一個是函數，一個可選參數，只是一個從左遍歷，一個從右

arr.reduce(callback,[initialValue])

那個這個callback又能接受4個參數，都爲可選

一、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
    二、currentValue （數組中當前被處理的元素）
    三、index （當前元素在數組中的索引）
    四、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