zoukankan      html  css  js  c++  java
  • 使用ES6的reduce函数,根据key去重

    最近很着迷于ES6的函数,让代码变得更优雅。ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的。

    想要实现的效果为:

    原数组:

    let rawArr = [{id:'123'},{id:'456'},{id:'789'},{id:'123'}];

    根据id去重后的结果为

    let rawArr = [{id:'123'},{id:'456'},{id:'789'}];
    

    reduce函数介绍

    在说如何去重之前,先来介绍一下reduce函数:

    array.reduce(callback[, initialValue]);

    写的具体一点,是这样子

    array.reduce(function(total, currentValue, currentIndex, array), initialValue);

    reduce方法会遍历数组,并且为数组中的每个元素,执行定义的callback方法,并把结果汇总为单个值返回。

    参数定义

    callback:为每个元素执行的方法,它有以下四个参数

       total:累计器,也是最终返回的结果

       currentValue:当前遍历的元素

       currentIndex:当前遍历的元素的下标,可选

       array:原始数组,可选

    initialValue:初始值

    需要注意的是,如果定义了initialValue,那么total的初始值就是initialValue,遍历则从第0项开始。

    如果没有定义,则total的初始值,会是第0项元素,遍历则从第1项开始。

    利用reduce函数封装去重方法

    由于最终希望返回的是一个去重后的数组,所以reduce函数的初始值要设置为空数组[],这样,在遍历到符合条件的元素的时候,才能push进数组里。

    我封装了一个util工具方法:入参为原始数组,以及需要根据哪个key值去重,返回结果为最终去重后的数组

    function uniqueByKey(arr,key) {
        let hash = {};
        let result = arr.reduce((total, currentValue) => {
            if (!hash[currentValue[key]]) { //如果当前元素的key值没有在hash对象里,则可放入最终结果数组
              hash[currentValue[key]]= true; //把当前元素key值添加到hash对象
              total.push(currentValue); //把当前元素放入结果数组
            }
            return total; //返回结果数组
          },[]);
        return result;
    }

    最后,奉上MDN的reduce介绍地址,写的非常详细

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

      

  • 相关阅读:
    IDEA 中直接连接远程服务器
    浙江大学软件学院2020年保研上机
    PAT甲级近五年题一览表
    浙江大学计算机与软件学院2021年考研复试上机
    浙江大学计算机与软件学院2019年保研上机
    PAT(甲级)2021年春季考试
    PAT(甲级)2020年冬季考试
    PAT(甲级)2020年秋季考试
    PAT(甲级)2020年春季考试
    PAT(甲级)2019年冬季考试
  • 原文地址:https://www.cnblogs.com/daisygogogo/p/10624806.html
Copyright © 2011-2022 走看看