JS数组去重的12种方法

2023-11-02

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

Set对象是ES6中新定义的数据结构,类似数组,它允许存储任何类型的唯一值,不管是原始值还是对象引用。

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组

function unqiue(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(unqiue(arr))
//1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}
  • 不考虑兼容性,这种去重的方式代码最少。这种方法无法去掉{}空对象,后面的高阶方法会添加去掉重复“{}”的方法。

二、[…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',{},{}];
var Arr = [...new Set(arr)]
console.log(Arr)
//1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}

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

splice()方法可删除从第一个参数处开始的零个或多个元素,且用参数列表中声明的一个或多个值来替换那些被删除的元素

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);
                j--
            }
        }
    }
    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直接消失了

双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。


四、利用indexOf去重

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置

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

五、利用sort()

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

六、利用对象的属性不能相同的特点去重(这种数组去重的方法有问题,不建议用,有待改进)

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var Arr = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            Arr.push(arr[i])
            obj[arr[i]] = 1
            console.log(obj[arr[i]])
        } else {
            obj[arr[i]]++
            console.log(obj[arr[i]])
        }
    }
    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, null, NaN, 0, "a", {…}] //两个true直接去掉了,NaN和{}去重

七、利用includes

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var Arr = [];
    for (var i = 0; i < arr.length; i++) {
        if (!Arr.includes(arr[i])) {//includes 检测数组是否有某个值
            Arr.push(arr[i]);
        }
    }
    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", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重

八、利用hasOwnProperty 判断是否存在对象属性

Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

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", {…}] //所有的都去重了

九、利用filter

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置

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", {…}, {…}]

十、利用递归去重

splice()方法可删除从第一个参数处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素

function unique(arr) {
    var array = arr;
    var len = array.length;

    array.sort(function (a, b) {   //排序后更加方便去重
        return a - b;
    })

    function loop(index) {
        if (index >= 1) {
            if (array[index] === array[index - 1]) {
                array.splice(index, 1);
            }
            loop(index - 1);    //递归loop,然后数组去重
        }
    }
    loop(len - 1);
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaNaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//[1, "true", false, null, 0, true, 15, NaN, NaN, "NaN", "a", {…}, {…}, undefined]

十一、利用Map数据结构去重

map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

function unique(arr) {
    let map = new Map();
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if (map.has(arr[i])) {  // 如果有该key值
            map.set(arr[i], true);
        } else {
            map.set(arr[i], false);   // 如果没有该key值
            array.push(arr[i]);
        }
    }
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaNNaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。


十二、利用reduce+includes

reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。includes()方法用来判断一个数组是否包含一个指定的值,如果是返回true,否则false。

function unique(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaNNaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS数组去重的12种方法 的相关文章

  • 如何使用多个 select2 框过滤表格?

    我正在尝试使用 和多个 select2 框的类来过滤表格 表格 HTML table class table tbody tr class kanban event Austin td td tr tr class csm event Ch
  • 使用 Ajax Jquery post 请求进行 Json 劫持

    昨天 我读了一些关于如何预防的好文章使用 Asp Net MVC 进行 Json 劫持 http haacked com archive 2009 06 24 json hijacking aspx 规则是 永远不要通过 get 请求发送
  • 获取被调用的 javascript 文件的查询字符串

    是否可以在调用的 javascript 文件上使用 javascript 获取查询参数 如下所示 in html in file js console log this location query 这是否可能以某种方式实现 或者我必须使用
  • Javascript 对象属性名称

    在 C 中 可以将对象属性的名称作为字符串值获取 名称 对象 Property gt myProperty 这可以在 Javascript Typescript 中完成吗 Object Keys 是我找到的唯一东西 但它给了我所有的键 示例
  • 如何将 Ajax.BeginForm MVC 助手与 JSON 结果一起使用?

    我正在尝试使用 ASP NET MVC Ajax BeginForm 帮助程序 但不想在调用完成时使用现有的内容插入选项 相反 我想使用自定义 JavaScript 函数作为回调 这可行 但我想要的结果应该以 JSON 形式返回 不幸的是
  • 更新存储在 chrome 扩展本地存储中的对象

    我正在开发一个 chrome 扩展 我将存储服务器发送的对象 例如 我将收到 命令 id 1 类型 A 大小 B 优先级 C 如果我有一个数据库 我会将其作为表中的一行插入commands 使用 chrome storage 我将这些对象的
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • 正则表达式中连字符的这种用法有效吗?

    NB I only想知道它是否是正则表达式定义中未转义连字符的有效应用 它是not关于匹配电子邮件 连字符或反斜杠的含义 量词或其他任何内容的问题 另外 请注意 链接的答案并没有真正讨论转义 未转义连字符之间的有效性问题 通常我会像这样声明
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • Graphql 将多个查询合并(组合)为一个?

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse
  • JavaScript 阶乘防止无穷大

    我一直在 JavaScript 中使用这个函数来计算阶乘数 var f function factorial n if n 0 n 1 return 1 if f n gt 0 return f n return f n factorial

随机推荐

  • 解决Maven:com.oracle:ojdbc7-12.1.0.2.jar在pom文件中无法下载问题

    一 pom文件中有ojdbc依赖 但是一直无法下载 导致打包出错 二 解决方法 1 配置Maven的环境变量 此处省略 检查maven配置成功 win R 在doc窗口输入mvn v 如下则说明Maven 的环境变量配置成功 2 自行下载o
  • 【原创】QString 函数 replace()indexOf()、 lastindexOf()

    1 替换函数 示例 QString x Say yes QString y no x replace 4 3 y x Say no 应用 将 002 jpg 7位 替换为 s save002 jpg 1 13位 QString x1 fil
  • swc-loader Segmentation fault “$NODE_EXE“ “$NPM_CLI_JS“ “$@“

    webpack swc swc还不是很稳定 在swcrc 中有配置plugins 时 swc 转换 node modules 会报错 环境 swc cor 1 3 62 swc loader 0 2 3 swc plugin vue jsx
  • python+opencv实现文字颜色识别与标定

    最近接了一个比较简单的图像处理的单子 花了一点时间随便写了一下 数据集客户没有是自己随便创建的 程序如下 Code creation time September 11 2021 Author PanBo Realize function
  • Spring学习心得(6)-- spring DI(依赖注入)

    DI的定义 给配置文件中的bean的属性赋值 方式 一种是利用其属性的setter方法 另外一种是利用构造函数 我们先来讨论第一种 利用属性的setter方法赋值 首先 先创建好类 并且配置到配置文件中 public class Perso
  • 基于上下文的推荐 -- 包括时间衰减算法和位置推荐算法(代码实现)

    基于上下文的推荐 基于时间特征的推荐 时间衰减 基于时间衰减的ItemCF算法 算法核心两部分 都加入了时间衰减项 以movielens数据集实现ItemCF 基于时间衰减的UserCF算法 以movielens数据集实现UserCF 基于
  • java怎么让按钮发挥作用,Java“周年”如何真正发挥作用?

    这是一个简单的错误开始的 我使用的YYYY不是对象的yyyy格式字符串SimpleDateFormat 但是我对使用格式错误的字符串的测试结果完全感到困惑 这段代码 Test public void whatTheHell try Simp
  • Linux——I/O复用(1)——select

    前言 TCP服务器的运行模型 TCP中 第一个客户端和服务器端建立连接 向服务器端不发数据 服务器端就在recv阻塞住 无法继续执行 如果有第二个客户端与服务器端建立连接 就在已完成三次握手的队列中放着 等着accept处理它 由于我们的代
  • 从 TDD 到 BDD

    转自http www cnblogs com lidaobing archive 2010 07 18 1779987 html 最近在学 ruby 也用了 rspec 传统的 xUnit 是 TDD 指导思想下的产物 而 rspec 则算
  • 本地上传文件到Gitee分支--傻瓜式教程

    废话不多说 在本地上传文件到Gitee分支按如下几个步骤走完即可 创建本地仓库 通俗一点就是任意文件夹都可以作为你的本地仓库 这里我在桌面建立了一个新建文件夹作为本地试验仓库 使用git init命令初始化仓库 初始化完成以后 本地仓库会生
  • ETL日志数据采集&商品数据采集

    01 结构化数据模型选择 理解 问题1 原生python中有没有数据库中的表类型 没有 问题2 我们一般会使用什么数据类型存储数据库中读取到的数据值 列表嵌套字典 记录数据和书写数据 非常方便 但是我们需要记住每一个键 字段 的含义 如果字
  • 基于OpenCV的气体泵扫描仪数字识别系统

    点击上方 小白学视觉 选择加 星标 或 置顶 重磅干货 第一时间送达 综述 2012年iOS应用商店中发布了一个名为FuelMate的Gas跟踪应用 小伙伴们可以使用该应用程序跟踪汽油行驶里程 以及有一些有趣的功能 例如Apple Watc
  • 基于蜜蜂优化算法优化的卷积神经网络(CNN)图像分类——附代码

    目录 摘要 1 蜜蜂优化算法 2 卷积神经网络 CNN 输入层 隐含层 输出层 3 本文Matlab代码 摘要 本文通过蜜蜂优化算法 优化了卷积神经网络 CNN 中的超参数 主要是网络的权重和偏差等关键参数 使CNN可以达到更加优秀的性能表
  • 整数四则运算 (10分)

    练习2 9 整数四则运算 10分 本题要求编写程序 计算2个正整数的和 差 积 商并输出 题目保证输入和输出全部在整型范围内 输入格式 输入在一行中给出2个正整数A和B 输出格式 在4行中按照格式 A 运算符 B 结果 顺序输出和 差 积
  • kali 火狐访问不了网页

    问题描述 因为一些原因使用kali的firefox来访问一些东西 但是突然发现火狐出问题了 访问不了网页之类的了 问题解决 1 网卡问题 使用命令ifconfig查看自己的网卡有没有问题 有问题按顺序执行 dhclient r eth0 d
  • Pycharm连接远程服务器(图解、简洁高效)

    这不是最好的方式 但绝对是你首次使用和日后使用最快 最有效的方式 本文示例为 pycharm2021专业版 1 前提 你安装的是pycharm专业版 必要 为了方便你的开发 你的远程服务器创建了多个虚拟环境来运行多个不同的项目 非必要 但推
  • 看完这篇文章你就可以告诉领导你精通Zookeeper了

    一 Zookeeper概述 1 概述 Zookeeper 是一个开源的为分布式框架提供协调服务的 Apache 项目 在分布式系统中 扮演注册中心的角色 Zookeeper数据模型的结构与Linux文件系统很像 整体上可以看做一棵树 从根节
  • mono 编译

    git clone https github com mono mono git cd mono git checkout 3b34235086446239d81347d1ee35644c0f2c3369
  • uni.switchTab跳转失败的原因

    检查url是否是pages里面的tabBar注册的页面 路径前面必须以 开头 uni switchTab url pages cate cate success fail console log 失败了吗 没有这个 就会走到fail
  • JS数组去重的12种方法

    一 利用ES6 Set去重 ES6中最常用 Set对象是ES6中新定义的数据结构 类似数组 它允许存储任何类型的唯一值 不管是原始值还是对象引用 Array from 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组 functi