JavaScript [数组去重] 的部分方法总结

2023-11-19

参考了文章:JavaScript数组去重(12种方法)史上最全
有部分改动,删去了一些没用的代码,替换了部分for循环

一、利用ES6 Set去重(ES6中最常用)

  function arrayRemoveSame(arr) {
    return Array.from(new Set(arr))
  }
  var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
  console.log(arrayRemoveSame(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”空对象,后面的高阶方法会添加去掉重复“{}”空对象的方法。


二、利用for嵌套for,然后splice去重(ES5中最常用)

<script>
  function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
      for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]) {         //第一个等同于第二个,splice方法删除第二个
          arr.splice(j, 1);
        }
      }
    }
    return arr;
  }
  var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
  console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重,两个null直接消失了
</script>

双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。
splice方法会改变原数组大小起到去重的作用

三、利用indexOf去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

先判断传入的参数是不是数组,不是数组则直接退出函数运行。

是数组则新建一个空数组,然后 forEach 遍历传入的原数组参数。

在循环中判断新创建的数组中是否存在当前元素,如果存在则跳过当前元素,不存在则将元素push进数组,最后返回新创建的数组。

四、利用对象的属性不能相同的特点进行去重

  var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
  function arrayRemoveSame(arr) {
    if (!Array.isArray(arr)) {
      console.log('type error!')
      return
    }
    var arrry = [];
    var obj = {};
    arr.forEach(function (val) {
      obj[val] = val
    })
    for (x in obj) {
      arrry.push(x)
    }
    return arrry;
  }
  console.log(arrayRemoveSame(arr));
  // ['0', '1', '15', 'true', 'false', 'undefined', 'null', 'NaN', 'a', '[object Object]']

这种数组去重的方法有问题,不建议用,有待改进,两个true、NaN等直接无了

五、利用includes()方法(和indexOf相似)

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    arr.forEach(function (val) {
      if (!array.includes(val)) {//includes 检测数组是否有某个值
        array.push(val);
      }
    })
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

六、利用filter()方法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。


语法:

array.filter(function(currentValue,index,arr), thisValue)
currentValue为必选参数,其余为可选参数

代码:

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

七、利用hasOwnProperty()方法

hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性,如果是,返回true,否则false; 参数propertyName指要检测的属性名;

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

所有的元素都去重了!

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

JavaScript [数组去重] 的部分方法总结 的相关文章

  • Angular service-worker范围在安装过程中遇到错误

    我正在尝试使用 Angular Service Worker 但在尝试使用它时出现错误 这些是我的版本 Angular CLI 15 2 0 Node 16 18 1 Package Manager npm 8 19 2 OS linux
  • 缩小 ASP.NET 生成的 Javascript 的最佳方法是什么?

    在 ASP NET 3 5 运行时缩小 ASP NET 生成的 Javascript 例如由 webresource axd 提供的 Javascript 的最佳方法是什么 我尝试使用Mb压缩 http mbcompression code
  • 我们在哪里/什么时候使用 JSON?

    你能告诉我 JSON 有什么用 在 Javascript 和 PHP 中 当我们需要 JSON 方法时 我从以下链接中阅读 但是 我没有获得有关任何项目的 JSON 实现的任何信息 http www json org js html htt
  • 如果列表中的某个字符位于该字符之前,请选择该字符

    我有这个正则表达式 a z s gmi 该正则表达式选择 从我的文字中 sme a eliezovce 2015 Spolo ne pre Eur pu Osl vili aj 940 但我只想选择 没有 如果列表中的某些字符 a z 之前
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • 使用 Bluebird.js 和 Twitter 流的 Promise 和流

    我对 Promises 和 Node 非常陌生 并且对在流中使用 Promise 感到好奇 我可以承诺直播吗 使用 Bluebirdjs 和 Twit 模块 我有以下内容 var Twit require twit var Promise
  • Firebase 模拟器无法促进/运行新功能

    我有三个云功能 其中两个已部署到我的 firebase 项目中 其中一个是我刚刚添加的 我希望在部署之前在本地测试新的功能 但是当我尝试使用它时却无法使用 并且只有两个已部署的功能可用 Firebase 模拟器在端口上运行良好5001 像往
  • webrtc - 获取网络摄像头的宽高比

    我正在尝试学习如何开发 webRTC 应用程序 我想知道是否可以获得相机的宽高比 我不知道它是否有帮助 但我正在使用 webrtc io 但是 if更好 我可以停止使用它 From MDN https developer mozilla o
  • 传单圆圈绘制/编辑问题

    我第一次制作传单 并面临绘制圆圈和编辑 更改圆圈位置 的问题 我面临的问题是 编辑 移动 圆从一个位置到另一位置会改变其半径 Note 请尝试在给定的小提琴中在地图顶部创建圆圈 然后通过单击编辑按钮将其移动到底部 如果我在地图的顶部创建圆圈
  • 确定用户是否在shadow dom之外单击

    我正在尝试实现一个下拉菜单 您可以单击外部将其关闭 下拉列表是自定义日期输入的一部分 并且封装在输入的影子 DOM 内 我想写一些类似的东西 window addEventListener mousedown function evt if
  • 如何使用 QuerySelector 获得第二个匹配项?

    以下语句给出了该类的第一个元素titanic element document querySelector titanic 我如何检索具有相同类的第二个元素 Use document querySelectorAll https devel
  • 递归链接 Promise

    我正在开发一个简单的 Windows 8 应用程序 我需要在其中从网站获取一组数据 我正在使用 WinJS xhr 来检索此数据 它返回一个 Promise 然后 我将回调传递到此 Promise 的 then 方法中 该方法为我的回调提供
  • Ember:命名出口错误

    我不知道为什么我的模板没有在指定的插座中呈现 这是我第一次尝试学习 ember 我被困在指定的渠道上 我想渲染侧边栏模板 in the outlet sidebar 和内容模板 in the outlet content 但我不断在控制台中
  • 输入和文本区域可以拖动吗?

    MDN 规范以及我能通过 Google 找到的每个网站都说所有 HTML 元素都可以拖动 然而 在实践中 我发现我无法拖动文本输入或文本区域 即使它们已被禁用 例如 使用以下代码 img src http www placehold it
  • 字符串化 JavaScript 对象

    我正在寻找字符串化一个对象 我想要这样的输出 1 valeur dalebrun usager experttasp date 2013 08 20 16 41 50 2 valeur test usager experttasp date
  • jqPlot DateAxis tickInterval 不起作用

    我试图每月绘制一个包含单个数据点的图表 我会在每个月的第一天将其作为一个点发送到 jqPlot jqplot actualChart 2011 10 01 0 296 2011 11 01 0 682 title programSelect
  • 通过ajax POST提交两次表单

    插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时 它执行了两次并得到作为重复记录的响应 好
  • 如何使用 Ajax 对 Oracle APEX 表格表单执行逐行验证?

    使用我执行的相同验证 处理 基于此线程 在 Oracle APEX v4 2 2 中通过 Ajax 调用 Oracle 函数进行现场验证 https stackoverflow com questions 21474303 calling
  • 如何使用正则表达式解析 OCC 选项符号?

    OCC 选项符号由 4 部分组成 标的股票或 ETF 的根代码 用空格填充至 6 个字符 到期日期 6 位数字 格式为 yymmdd 期权类型 P 或 C 用于看跌或看涨期权 执行价格 为价格 x 1000 前面填充 0 至 8 位数字 举
  • 为什么 JavaScript 默认导出不可用?

    为什么默认导出不像命名导出那样实时 lib js export let counter 0 export function incCounter counter export default counter main1 js import

随机推荐

  • CSS 选择器

    h1 class center 标题居中 h1 p class center color 段落居中 颜色为红色 p 如果我们要在 html 元素中设置 css 样式 那么就需要需要在元素中设置选择器 即决定当前元素使用哪种样式 一般来说 常
  • django实训总结

    不知不觉中 一个学期又要结束了 上学期结束时的日子仿佛历历在目 没想到又迎来了一个学期的结束 这个学期依旧学习了python 让我继续加深了对python这门课的认识 实训让我觉得十分有意思 像打开了新的知识大门 Django结合了许多以前
  • 大学生竞赛项目

    编程 蓝桥杯 报名时间 10月 报名网址 https dasai lanqiao cn 中国软件杯大学生软件设计大赛 报名时间 5月 报名网址 http www cnsoftbei com 中国高校计算机大赛 报名时间 11月 报名网址 h
  • 钉钉开发之使用HTTP请求获取你的公网出口IP

    访问别人提供的网络服务时 对方出于安全性方面的考虑 可能会对请求的IP进行白名单限制 这时候需要提供机器的出口IP 比如目前微信公众号对于访问其接口需要先绑定开发者的服务器IP 这个IP实际上就是开发者服务器的出口IP 但是获取当前机器的公
  • 爬虫实例十四 多线程爬取一万张表情包

    import requests import threading import os from bs4 import BeautifulSoup from queue import Queue from threading import T
  • 第一个Java程序HelloWorld

    第一个Java程序HelloWorld 1 随便建一个文件夹用来存放代码 2 新建一个java文件 可以叫Hello java 后缀是 java的文件 3 用记事本打开写如下的代码 public class Hello public sta
  • 由Qt::BlockingQueuedConnection引起的关闭Qt主页面而后台仍有进程残留

    BUG 由Qt BlockingQueuedConnection引起的关闭Qt主页面而后台仍有进程残留 1 错误代码示例 首先我们看下下面的代码 可以思考一下代码的错误之处 BlockingQueueDeadLock h pragma on
  • MATLAB代码基于cnn-lstm的轴承寿命预测

    一种结合卷积神经网络 convolution neural networks 简称CNN 和长短时记忆 long short term memory 简称LSTM 神经网络的滚动轴承RUL预测方法 首先 对滚动轴承原始振动信号作快速傅里叶变
  • MMD Maximum Mean Discrepancy 最大均值差异

    reference http songcy net posts story of basis and kernel part 2 https zhuanlan zhihu com p 163839117 https www zhihu co
  • leetcode 查找

    解法1 直接使用STL class Solution public vector
  • 使用QSettings保存QT应用程序数据

    使用QSettings保存QT应用程序数据 简介 QSettings类提供了持久的跨平台应用程序设置 这些settings一般都是存在系统里的 比如windows一般都写在系统注册表或者写INI文件 mac系统一般都在XML文件里 那么按照
  • 如何创建项目

    1 MvvmLight框架的引用 引用 头部选项卡的 工具栏 NuGet 包管理器 管理解决方案的NuGet 程序包 搜索 MVVM Light MvvmLight 作者 Laurent Bugnion GalaSoft 勾选项目 Do n
  • Vue2组件封装 Vue组件封装

    写在前面 虽然是Vue2组件封装 主要的内容是记录一下我对封装组件的一些要点和我的看法 原学习视频来源于b站黑马从0到1封装组件库 什么是组件 都说Vue是组件化开发 确实有道理 别说按钮输入框这种组件了 就连每个页面 从本质来看也是一个个
  • 电源学习总结(六)——BUCK设计

    降压型开关电源 BUCK 是实际应用中较为广泛使用的电路 本文来详细说一说相关的设计细节 这里不考虑集成的开关电源 分控制和驱动 开关管 电感等部分讲 文章目录 基本结构 控制和驱动 开关管 自举电容 电感 电容 工作频率选择 其他注意事项
  • new做了哪些事?

    new做了哪些事 function Parent this name Person const p new Parent 创建一个空对象 将对象的原型 proto 指向构造函数的prototype原型对象 将构造函数的this指向当前对象
  • 使用xshell-ssh连接服务器,报错:Xshell Socket error Event: 32 Error: 10053

    XShell连接CentOS系统时 报出Xshell Socket error Event 32 Error 10053 错误 有点烦人 操作 用SSH工具连接linux电脑出现的问题 Read from socket failed Con
  • 多益网络_网络安全的未来日益激烈的信息控制之战

    多益网络 Over two decades ago Alphabet CEO Eric Schmidt noted The Internet is the first thing that humanity has built that h
  • 内核虚拟化KVM/QEMU——guest os,qemu,kvm的运行流程

    内核虚拟化KVM QEMU guest os qemu kvm的运行流程 这里主要介绍基于x86平台的Guest Os Qemu Kvm工作流程 如图 通过KVM APIs可以将qemu的command传递到kvm 1 创建VM syste
  • 问题 对于二分类问题,当训练集中正负样本非常不均衡时,如何处理数据以更好 地训练分类模型?

    为什么很多分类模型在训练数据不均衡会出现问题 本质原因是模型在训练时优化的目标函数和人们测试时使用的评价标准不一致 这种不一致可能是训练数据的样本分布和测试数据的不一致 例如训练时优化的整个训练集 正负比例1 99 的正确率 而测试的时候期
  • JavaScript [数组去重] 的部分方法总结

    参考了文章 JavaScript数组去重 12种方法 史上最全 有部分改动 删去了一些没用的代码 替换了部分for循环 一 利用ES6 Set去重 ES6中最常用 function arrayRemoveSame arr return Ar