js 高階函數reduce ——數組取交集、並集

兩個數組取交集 vs 多個數組取交集 => js reduce函數的妙用

1、reduce函數的用法及取數組交集

<script>
      // 值集數組
      let arr1 = [1,2]
      let arr2 = [2,3]
      let newArr1 = arr1.filter(val=>{
        return new Set(arr2).has(val)
      })
      console.log(newArr1) // [2]

      // 對象數組取某個對象元素相同的交集
      let arr3 = [{a:'1',b:'12'}, {a:'0', b:'12'}]
      let arr4 = [{a:'2',b:'23'}, {a:'0', b:'12'}]
      let arr5 = arr3.map(item=>item.a)
      let newArr2 = arr4.filter(info=>{
        return new Set(arr5).has(info.a)
      })
      console.log(newArr2) // [{a:'0', b:'12'}]
      
      // 多個數組取交集-reduce()方法對數組中的每個元素執行一個由自己提供的函數，將其結果匯總為單個返回值
      let arr6 = [1,2,3]
      let arr7 = [3,4,5]
      let arr8 = [{a:'2',b:'23'}, {a:'0', b:'12'}, {a:'3', b:'34'}]
      
      // 定義一個取交集的函數
      function intersection(getar1, geta2, key) {
        let arr = getar1.map(item=>item[key])
        let newArr3 = geta2.filter(info=>{
          return new Set(arr).has(info[key])
        })
        return newArr3
      }

      let getAllObjArr = [arr3,arr4,arr8]  // reduce()方法處理處理數組元素，現將所有的數組合並在一個數組中
      let getNewArr = getAllObjArr.reduce((a, b)=>{ 
        return intersection(a, b, 'a')
      })
      console.log(getNewArr) // [{a:'0', b:'12'}]

       
      // reduce函數方法
      // reducer 函數的返回值分配給累計器，該返回值在數組的每個迭代中被記住，並最后成為最終的單個結果值。
      // MDN上的栗子
      const array1 = [1, 2, 3, 4];
      const reducer = (accumulator, currentValue) => accumulator + currentValue;

      // 1 + 2 + 3 + 4
      console.log(array1.reduce(reducer));
      // 5 + 1 + 2 + 3 + 4
      console.log(array1.reduce(reducer, 5));

      // reducer 函數接收4個參數:

      // Accumulator (acc) (累計器)
      // Current Value (cur) (當前值)
      // Current Index (idx) (當前索引)
      // Source Array (src) (源數組)
    </script>

 2、使用reduce函數取並集即對象數組的去重

const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }]
      const arr2 = [{ name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }]
      let arr3 = arr1.concat(arr2)
      let result = []
      let obj = []
      result = arr3.reduce(function (prev, cur) {
        // console.log(prev, cur, index, arr, obj) // index-索引，arr-索引
        obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur)
        return prev
      }, [])
      console.log(result) //[{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]