关于JavaScript数组对象去重的几种方法

 更新时间:2023年04月21日 11:06:09   作者:小太阳...  
这篇文章主要介绍了关于JavaScript数组对象去重的几种方法,不管是map对象的特性还是reduce方法都是很好用的去重方法,需要的朋友可以参考下

数组对象如下:

    let repeatData = [
      { id: 1, name: 'sun', age: 18 },
      { id: 1, name: 'sun', age: 18 },
      { id: 2, name: 'baozi', age: 20 },
      { id: 1, name: 'sun', age: 18 },
      { id: 3, name: 'lele', age: 3 },
      { id: 2, name: 'baozi', age: 20 }
    ]

要把id一样的数据删掉,得到如下结果

在这里插入图片描述

1.利用Map对象 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 Map对象如果有重复的键值,则后面的会覆盖前面的

   // 利用map对象
   let map = new Map()
   repeatData.forEach(item => {
     map.set(item.id, item)
   })
   let newData = [...map.values()]
   console.log(newData, 'newData');

2.双层for循环

   for (let i = 0; i < repeatData.length; i++) {
     for(let j = i + 1; j < repeatData.length; j++) {
       if (repeatData[i].id === repeatData[j].id) {
         repeatData.splice(j, 1)
         j--
       }
     }
   }
   console.log(repeatData, 'repeatData');

3.利用数组的reduce方法

   let newObj = {}; 
   repeatData = repeatData.reduce((preVal, curVal) => {
     newObj[curVal.id] ? '' : newObj[curVal.id] = preVal.push(curVal);
     return preVal 
   }, [])
   console.log(repeatData, 'repeatData');

4.利用对象的属性

   let newObj = {}, newArr = []
   repeatData.forEach(item => {
     if (!newObj[item.id]) {
       newObj[item.id] = newArr.push(item)
     }
   })
   console.log(newArr, 'newArr');

注意:第二种方法用到的splice方法会改变原数组

js数组中下面方法会改变原数组:

方法用法
push向数组的末尾添加一个或更多元素,并返回新的长度
unshift向数组的开头添加一个或更多元素,并返回新的长度
pop删除数组的最后一个元素并返回删除的元素
shift删除并返回数组的第一个元素
sort对数组的元素进行排序
splice从数组中添加或删除元素
reverse反转数组的元素顺序

到此这篇关于关于JavaScript数组对象去重的几种方法的文章就介绍到这了,更多相关JavaScript数组对象去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解cordova打包成webapp的方法

    详解cordova打包成webapp的方法

    本篇文章主要介绍了详解cordova打包成webapp的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • ES6新特性五:Set与Map的数据结构实例分析

    ES6新特性五:Set与Map的数据结构实例分析

    这篇文章主要介绍了ES6新特性五之Set与Map的数据结构,结合实例形式分析了ES6中Set与Map的功能、定义、属性、结构与相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • 微信小程序自定义音乐进度条的实例代码

    微信小程序自定义音乐进度条的实例代码

    最近遇到这样的需求:显示音乐播放按钮、可手动拖拽进度条;页面中含多个音乐,播放当前音乐时暂停其他音乐播放。 这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下
    2018-08-08
  • js简单判断flash是否加载完成的方法

    js简单判断flash是否加载完成的方法

    这篇文章主要介绍了js简单判断flash是否加载完成的方法,通过PercentLoaded方法对flash的加载进行判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  •  javascript学数组中的foreach方法和some方法

     javascript学数组中的foreach方法和some方法

    这篇文章主要介绍了 javascript学数组中的foreach方法和some方法,文章相关内容和代码详细,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-03-03
  • JavaScript模板引擎EJS特性及用法详解

    JavaScript模板引擎EJS特性及用法详解

    EJS是一种简单而灵活的模板引擎,用于将数据动态渲染到网页上,本文将从介绍EJS的背景和起源开始,详细介绍EJS的特性和使用方法,包括安装配置、基本语法和标签、数据绑定和逻辑控制、模板的继承和包含等方面,感兴趣的同学跟着小编一起来学习吧
    2023-06-06
  • VsCode插件自动生成注释插件koroFileHeader使用教程

    VsCode插件自动生成注释插件koroFileHeader使用教程

    这篇文章主要介绍了VsCode插件自动生成注释插件koroFileHeader使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • 基于javascript实现彩票随机数生成(简单版)

    基于javascript实现彩票随机数生成(简单版)

    这篇文章主要介绍了基于javascript实现彩票随机数生成的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序当前时间时段选择器插件使用方法详解

    微信小程序当前时间时段选择器插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序当前时间时段选择器插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数,需要的朋友可以参考下。
    2011-07-07

最新评论