zoukankan      html  css  js  c++  java
  • 两个数组取交集 vs 多个数组取交集 => js reduce函数的妙用

    两个数组取交集 vs 多个数组取交集 => js 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>
  • 相关阅读:
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven
    Maven教程
    SASS
  • 原文地址:https://www.cnblogs.com/layaling/p/12896184.html
Copyright © 2011-2022 走看看