zoukankan      html  css  js  c++  java
  • JavaScript中数组去重、对象去重的方法

    ES6提供了新的数据结构:Set 和 Map,在写去重代码时方便了很多人,可以用更少的代码去实现去重。

    这两者都是构造函数,需要通过new去生成。

    这两者的区别就是:Set类似于数组,Map类似于对象

    数组去重

    const array = [1, 2, 3, 4, 5, 5, 5, 5]
    
    const set = new Set(array)
    const result = [...set] // Array.from(set)
    
    // 简写
    const result = [...new Set(array)] // Array.from(new Set(array))

    除此之外,数组去重方式还有:

    1. 两个for循环遍历比较,需要使用两个变量,搭配splice

    2. indexOf / lastIndexOf / includes

      2.1 搭配for循环,存入新数组

      2.2 搭配filter,返回新数组

    3. 利用对象,那么同时也可以利用Map

    4. ……

    对象去重(对象数组去重)

    关键代码:

    function unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.key) && res.set(arr.key, 1))
    }

    例子:

    var arr = [
      {
        key: 111,
        value: 111,
      },
      {
        key: 111,
        value: 222,
      },
      {
        key: 222,
        value: 333,
      },
      {
        key: 333,
        value: 444,
      },
    ]
    function unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.key) && res.set(arr.key, 1))
    }
    var temArr1 = unique(arr)
    console.log(temArr1)

    得到的结果:

    [

      {key: 111, value: 111},

      {key: 222, value: 333},

      {key: 333, value: 444},

    ]

    如果想要以后添加的数据为最新内容,只需要将数组翻转即可:

    var temArr2 = unique(arr.reverse()).reverse()
    console.log(temArr2)

    得到的结果:

    [

      {key: 111, value: 222},

      {key: 222, value: 333},

      {key: 333, value: 444},

    ]

    除此之外,数组去重方式还有:

    1. Map可以实现,那么当然对象也可以实现(通过判断key)

    2. 两个for循环遍历比较

      2.1 通过标识符来添加到新数组中

      2.2 使用两个变量,搭配splice

    3. ……

    欢迎补充!欢迎纠正!

  • 相关阅读:
    ESP-12F WIFI模块开发(NonOS, RTOS, NodeMCU固件编译)(原创)
    如何将笔记本上的SD卡接入Ubuntu虚拟机中(原)
    第2步
    第1步
    详解linux下的串口通讯开发 (转载)
    C中如何调用C++函数 (转载)
    ubuntu下安装与使用json-c(原创)
    static, const 和 static const 变量的初始化问题(定义/声明)
    图片三级缓存的原理
    Windows平台下Git服务器搭建
  • 原文地址:https://www.cnblogs.com/hiuman/p/13890795.html
Copyright © 2011-2022 走看看