js数组去重(9种方法),你都会了吗?

2023-10-31

以下共有九种数组去重的方式和详解(包含对象数组去重):

1.利用Array.from(new Set)去重:

// 1.利用set去重 
// Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合
// Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组,也是ES6的新增方法
    let list = ['你是最棒的', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的',]
    let newList = Array.from(new Set(list))
    console.log('newList', newList);

效果:

2.利用includes去重

//2.利用Array.includes 去重   
//includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
let list = ['你是最棒的1', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的1',]
    let newList2 = []
    list.forEach((item) => {
        // 空数组newList2 不包含item为false ,取反为true 执行数组添加操作
        // 如果数组包含了 item为true 取反为false 不执行数组添加操作
        if (!newList2.includes(item)) {
            newList2.push(item)
        }
    })
    console.log('newList2', newList2);

效果:

 

3.利用map去重

//3.利用map去重
//map数据结构是es6中新出的语法,其本质也是键值对,只是其键不局限于普通对象的字符串 
let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]
    let newList3 = [];
    let map = new Map()
    list.forEach((item) => {
     // 如果map.has指定的item不存在,那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
     // 如果下次出现重复的item,那么map.has(item等于ture 取反 !map.has(item)  不执行
        if (!map.has(item)) {
            map.set(item,ture)
            newList3.push(item)
        }
    })
    console.log('newList3', newList3);

  效果:

4.利用indexOf去重

//4.利用indexOf去重  
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1 
let list = ['你是最棒的3', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的3',]
    let newList4 = [];
    list.forEach((item) => {
     // 空数组newList4第一次循环没有找到匹配的item 返回-1  执行数组添加操作
     // 如果数组在第n次循环中找到了newList4数组中item 例如:item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1  不执行数组添加操作
        if (newList4.indexOf(item) === -1) {
            newList4.push(item)
        }
    })
    console.log('newList4', newList4);

 效果:

5. 利用单层for循环去重

// 5.单层for循环去重 
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组 
let list = ['你是最棒的4', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的4',]
    let newlist5 = [];
    for (let i = 0; i < list.sort().length; i++) {
        if (list[i] == list[i + 1]) {
            list.splice(i, 1)
            i--
        }
    }
    console.log('newlist5', list);

 效果:

6.利用双层for循环去重

// 6.双层for循环去重
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组
let list = ['你是最棒的5', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的5',]
    for (let i = 0; i < list.sort().length; i++) {
        for (let j = i + 1; j < list.sort().length; j++) {
            if (list[i] == list[j]) {
                list.splice(i, 1)
                j--
            }
        }
    }
    console.log('newlist6', list);

 效果:

 7.利用递归去重

// 7.递归去重
let list = ['你是最棒的6', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的6',]
    function callBack(index) {
      // 数组的长度不能等于0
        if (index >= 1) {
      // 第一次如果数组最后一个索引和最后第二个索引相等
            if (list[index] === list[index - 1]) {
      // 那么就删除这个索引的元素
                list.splice(index, 1)
            }
      // 继续调用这个函数 第一次传入的参数是数组末尾第一个 第二次传入的参数是数组末尾第二个 层层递减
            callBack(index - 1)
        }
    }
      //传入排序好的数组的最大索引index
    callBack(list.sort().length - 1)
    console.log('newList7', list);

  效果:

8.利用Array.filter和map对象数组去重 (性能较高)

//8.利用Array.filter和map去重 
let map = new Map()
let list3 = [{
        name: '好先森1',
        id: 1
    },
    {
        name: '好先森1',
        id: 2
    },
    {
        name: '好先森2',
        id: 3
    },
    {
        name: '好先森3',
        id: 3
    }
    ]
    // 对象数组去重
    function xxx(list3, key) {
        return list3.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString()))
    }
    console.log('newList8', xxx(list3, 'id'));

 效果:

 

9.利用Array.filter和Array.includes 对象数组去重

// 9.利用Array.filter和Array.includes去重
let list4 = [{
        name: '好先森1',
        id: 1
    },
    {
        name: '好先森1',
        id: 2
    },
    {
        name: '好先森2',
        id: 3
    },
    {
        name: '好先森3',
        id: 3
    }
    ]
    function xxx(arr) {
        let list = [];
        return arr.filter((item) => !list.includes(item.name) && list.push(item.name))
    }
    console.log('newList9', xxx(list4));

  效果:

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js数组去重(9种方法),你都会了吗? 的相关文章

随机推荐

  • Mac安装Redis

    要在Mac上安装Redis 你可以按照以下步骤进行操作 打开终端应用程序 Terminal 可以在 应用程序 文件夹的 实用工具 目录下找到它 或者command 空格 输入ter然后直接回车 确保你已经安装了Homebrew 如果没有 请
  • 解决kibana启动时:3005 - wrong protocol being used to connect to the wazuh api 和 Wazuh API seems to be dow

    解决elasticsearch缺少模板问题 https mp csdn net editor html 112570396 后 依然不能正常检测到 wazuh api 状态 默认ip和端口 现在 解决kibana启动时 3005 wrong
  • Git教程---Windows安装及命令使用(详细例子)

    目录 一 Git的工作原理 二 Git下载及安装 三 Git配置 四 Git命令 示例 参考链接 一 Git的工作原理 Git有四个工作区域 其中三个工作区域工作在本地 一个工作区域工作在远程仓库 本地目录 工作区 平时存放项目代码的位置
  • 使用 Grid 进行常见布局

    grid 布局是W3C提出的一个二维布局系统 通过 display grid 来设置使用 对于以前一些复杂的布局能够得到更简单的解决 本篇文章通过几个布局来对对 grid 布局进行一个简单的了解 目前 grid 仅仅只有 Edge使用前缀能
  • 【windows系统】通过SSH Key访问服务器

    BG 废话不多说 直接上干货 1 终端输入命令 ssh username server 确认是否有自己的用户名 2 查看是否生成过SSH Key ls ssh 未生成过 提示 No such file or directory 生成过 提示
  • 旅游推荐平台

    作者主页 编程千纸鹤 作者简介 Java 前端 Python开发多年 做过高程 项目经理 架构师 主要内容 Java项目开发 毕业设计开发 面试技术整理 最新技术分享 收藏点赞不迷路 关注作者有好处 文末获得源码 项目编号 BS XX 05
  • Flask从入门到做出一个博客的大型教程(三)

    Flask从入门到做出一个博客的大型教程 三 在开始之前 先来看下项目的整体结构 flask app forms py init py routes py templates base html index html login html
  • 导入别人的安卓项目方法-需要修改的配置(Androidstudio)通用解决办法

    导入别人的安卓项目方法 一般导入别人的安卓项目后会遇到一些问题 下面是通用方法 绝大多数情况都能运行出来 步骤一 导入别人的项目报错 步骤二 Androidstudio新建一个空项目 步骤三 找到两个build gradle文件 这两个就是
  • 2021年江苏省职业院校技能大赛中职 网络信息安全赛项试卷--攻击日志解析

    2021年江苏省职业院校技能大赛中职 网络信息安全赛项 attack pacapng攻击日志分析 2021年江苏省攻击日志分析任务书 2021年江苏省攻击日志分析任务书解析 如果有不懂得地方可以私信博主 欢迎交流 交流群 603813289
  • java <? extends T>和<? super T>介绍(一)

  • python安装&配置环境(win10)

    python安装 配置环境 win10 1 打开python官网下载python安装包 操作步骤如下所示 点击 gt python官网链接 1 1 进入官网 1 2 进入下载页面 1 3 选择指定版本的python 本文选择python3
  • 高德地图JS API升级到2.0版本

    项目上反馈高德地图底图信息更新不及时 不利于进行点位规划 经研究发现高德地图JS API 1 4 15版本相对于2 0版本 确实地图切片上的标注信息较少 通过工单的形式询问高德的技术工程师认识到1 4 15版本数据更新有延迟 1 4 15版
  • cin与scanf cout与printf效率问题

    在竞赛中 遇到大数据时 往往读文件成了程序运行速度的瓶颈 需要更快的读取方式 相信几乎所有的C 学习者都在cin机器缓慢的速度上栽过跟头 于是从此以后发誓不用cin读数据 还有人说Pascal的read语句的速度是C C 中scanf比不上
  • warning C4146: 一元负运算符应用于无符号类型,结果仍为无符号类型

    这种警告出现在变量表示范围的临界状态 一 溢出问题 int main int a 2147483648 return 0 在已经定义死int型的情况下 影响不大 但是下面的例子却会由很大的影响 二 类型转化 int main if 2147
  • C语言---数组名与&数组名的区别

    今天在用strsep函数 有一个是双指针类型的形参 的时候 我以为 数组名就是 双指针类型的 但结果却不对 后来查了才知道 虽然数组名与 数组名的值是相同的 但是 他们的类型是不一样的 char str 10 str 的值为str 0 的地
  • JavaScript常见的运用场景

    JavaScript是一种相当流行 高效 便捷的脚本语言 它在 web 开发中发挥着重要的作用 下面我们来介绍下 JavaScript 常见的运用场景 1 网页动态效果制作 JavaScript 可以用来制作网页的多种动态效果 包括但不限于
  • 低功耗技术(一)动态功耗与静态功耗

    一 动态功耗 翻转功耗 Switching Power 翻转功耗是由充放电电容引起的动态功耗 其推导过程很简单 但是这个最终的结果却十分重要 1 switching power 和负载电容 电压 0到1变化事件的发生次数 时钟频率有关 2
  • Tomcat任意写入文件漏洞(CVE-2017-12615)

    声明 好好学习 天天向上 漏洞描述 2017年9月19日 Apache Tomcat官方确认并修复了两个高危漏洞 漏洞CVE编号 CVE 2017 12615和CVE 2017 12616 其中 远程代码执行漏洞 CVE 2017 1261
  • CSS——网易云音乐首页导航栏的制作

    文章目录 前言 一 结构的布局 二 实现过程 1 HTML结构 2 CSS样式 总结 前言 本文主要介绍了网易云导航栏的制作过程 这个案例中将会运用到CSS中的浮动 绝对定位等相关知识点 这些在以往的文章里有所介绍 一 结构的布局 示例图
  • js数组去重(9种方法),你都会了吗?

    以下共有九种数组去重的方式和详解 包含对象数组去重 1 利用Array from new Set 去重 1 利用set去重 Set是es6新增的数据结构 似于数组 但它的一大特性就是所有元素都是唯一的 没有重复的值 我们一般称为集合 Arr