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 }]

  

(0)

相关推荐

  • JS - 基础学习(6): reduce() 方法

    在前后端数据交互的过程中,为了能够减少ajax请求次数,减轻带宽压力,后端往往会将当前接口所需的参数以对象的形式集体返回.这样就导致一个问题:对象内字段属性过多,而有些小组件功能又压根不需要这么一个大 ...

  • JavaScript 函数用法实例

    JavaScript 函数用法实例

  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题.本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手"调戏"面试官的解决方案. 话不多说,上去就 ...

  • 基础复习1

    基础回顾1 查找元素位置 题目描述:找出元素 item 在给定数组 arr 中的位置 输出描述: 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1 function indexOf( ...

  • JavaScript数组的一些方法、数学对象、定时器

    <script>         // sort()方法会按照字符串的先后顺序对数组的每一个数组项目的字符顺序来进行排序的         // 如果数组的某个项目不是字符串, 那么会先把 ...

  • JS数组方法大全

    一.在使用数组的方法之前,需要先创建数组,创建数组有以下方式: 字面量方式(json方式) //demo1:不省略initial参数,回调函数没有返回值 var arr = [10,20,30,40, ...

  • 没有学不会的python--函数式编程以及高阶函数

    没有学不会的python 函数式编程 到现在为止,我们的没有学不会python系列文章已经讲了很多知识点了,如果是第一次刷到这篇文章的朋友可以去我主页看一下以前写的文章.前面讲了很多知识点,每个知识点 ...

  • Python高阶函数

    该篇中主要介绍什么是高阶函数,高阶函数的用法以及几个常见的内置的高阶函数. 什么是高阶函数? 高阶函数:一个函数可以作为参数传给另外一个函数,或者一个函数的返回值为另外一个函数(若返回值为该函数本身, ...

  • 安利5个Python高阶函数:lambda,Map,Filter,Itertools,Generat...

    任何编程语言的高级特征通常都是通过大量的使用经验才发现的.比如你在编写一个复杂的项目,并在 stackoverflow 上寻找某个问题的答案.然后你突然发现了一个非常优雅的解决方案,它使用了你从不知道 ...

  • 第 14 天:Python 高阶函数

    函数式编程现在逐渐被广大开发群体接受,越来越多的开发者们开始使用这种优雅的开发模式,而我们使用函数式编程最主要的是需要清楚: 什么是高阶函数(Higher-order Functions)? Pyth ...

  • 高阶函数

    高阶函数 函数柯里化 函数柯里化,又称部分求值.一个currying函数首先会接收一些参数,接受这些参数后该函数不会立即求值.而是会将传入的参数在函数内保存,待函数真正需要求值时,之前的所有参数都会被 ...

  • Excel VBA 8.47模糊查询的高阶玩法 数组完胜单元格遍历

    模糊查询的高阶玩法 数组完胜单元格遍历 点击上方"Excel和VBA",选择"置顶公众号" 致力于原创分享Excel的相关知识,源码,源文件打包提供 一起学习, ...

  • Julia机器核心编程.高阶函数

    我这个起名好麻烦,都说函数完了.有整出来一个高阶函数,比较麻烦. 嵌套函数,简单来说,就是在函数中定义函数. 闭包是一个函数对象,它可以记住封闭范围中的值,即使它们不在内存中也是如此. 嵌套函数有助于 ...

  • [js] 第95天 分别写出数组的交集、并集、差集、补集这四个方法

    今日试题: 分别写出数组的交集.并集.差集.补集这四个方法 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己) ...

  • 4个vlookup函数的高阶用法

    一.提取固定长度的数字 如下图,我们想要提取工号,只需要将函数设置为:=VLOOKUP(0,{0,1}*MID(A2,ROW($1:$30),6),2,0), 因为这个一个数组公式所以我们要按Ctrl ...