JavaScript 数组去重的方法12 种方法

news2024/11/17 5:24:03

数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的 10 种，面试官很有可能对你刮目相看。

在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。

注：写的匆忙，加上这几天有点忙，还没有非常认真核对过，不过思路是没有问题，可能一些小细节出错而已。

一、利用 ES6 Set 去重（ES6 中最常用）

function unique (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(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

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

二、利用 for 嵌套 for，然后 splice 去重（ES5 中最常用）

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直接消失了

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

想快速学习更多常用的 ES6 语法，可以看我之前的文章《学习ES6笔记──工作中常用到的ES6语法》。

三、利用 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、{}没有去重

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则 push 进数组。

四、利用 sort()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     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、{}没有去重

利用 sort() 排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

五、利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            arrry.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arrry;
}
    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

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

七、利用 hasOwnProperty

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

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

八、利用 filter

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

九、利用递归去重

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

十、利用 Map 数据结构去重

function arrayNonRepeatfy(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, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

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

十一、利用 reduce+includes

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

十二、[...new Set(arr)]

 

[...new Set(arr)] 
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

PS：有些文章提到了 foreach + indexOf 数组去重的方法，个人觉得都是大同小异，所以没有写上去.

希望可以帮到大家；

头像

沉静地闪光

11.2k 声望3.1k 粉丝

值得做的事情，值得现在就去做并一直坚持做；

关注作者

« 上一篇

深入理解：ES6中的Set和Map数据结构，Map与其它数据结构的互相转换

下一篇 »

前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

一、利用 ES6 Set 去重（ES6 中最常用）二、利用 for 嵌套 for，然后 splice 去重（ES5 中最常用）三、利用 indexOf 去重四、利用 sort()五、利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）六、利用 includes七、利用 hasOwnProperty八、利用 filter九、利用递归去重十、利用 Map 数据结构去重十一、利用 reduce+includes十二、[...new Set(arr)]

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1517136.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Kotlin/Java中String的equals和==

Kotlin/Java中String的equals和==

Kotlin/Java中String的equals和 在Java中&#xff0c;如果定义一个常量String和new出一个String对象&#xff0c;是不同的&#xff1a; String s1 "zhang" String s2 new String("zhang") 因为在Java看来&#xff0c;s1只是一个常量&#xff0c;会放在…
阅读更多...
深入浅出讲解Python字符串格式化

深入浅出讲解Python字符串格式化

字符串格式化操作符(%)&#xff0c;非常类似于C 语言里面的printf()函数的字符串格式化&#xff0c;甚至所用的符号都一样&#xff0c;都用百分号(%)&#xff0c;并且支持所有printf()式的格式化操作。语法如下&#xff1a; format_string % string_to_convert format_string为…
阅读更多...
【Python】新手入门学习：详细介绍依赖倒置原则（DIP）及其作用、代码示例

【Python】新手入门学习：详细介绍依赖倒置原则（DIP）及其作用、代码示例

【Python】新手入门学习&#xff1a;详细介绍依赖倒置原则&#xff08;DIP&#xff09;及其作用、代码示例 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、Py…
阅读更多...
【深度学习笔记】7_7 AdaDelta算法

【深度学习笔记】7_7 AdaDelta算法

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 7.7 AdaDelta算法 除了RMSProp算法以外&#xff0c;另一个常用优化算法AdaDelta算法也针对AdaGrad算法在迭代后期可能较难找到有用解的…
阅读更多...
了解关键字

了解关键字

关键字 定义&#xff1a;被Java语言赋予了特殊含义&#xff0c;用做专门用途的字符串&#xff08;或单词&#xff09; HelloWorld案例中&#xff0c;出现的关键字有 class、public 、 static 、 void 等&#xff0c;这些单词已经被Java定义好了。 特点&#xff1a;全部关键字都…
阅读更多...
“多彩非遗 用爱编织”社区志愿者心理解压活动

“多彩非遗 用爱编织”社区志愿者心理解压活动

为提升志愿者心理健康水平&#xff0c;帮助他们及时疏导情绪、缓解生活中的压力&#xff0c;构筑心理防线&#xff0c;促进身心健康&#xff0c;引导志愿者以积极的心态面对服务和生活中的压力&#xff0c;2月28日海滨街社工站在海滨街道西运社区开展了“多彩非遗 用爱编织”社…
阅读更多...
力扣● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组

力扣● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组

● 300.最长递增子序列 1.dp数组含义。dp[i]&#xff1a;以nums[i]为结尾的递增子序列的最大长度。 注意一定是以nums[i]结尾&#xff0c;如果dp[i]定义错误的话&#xff0c;暴力也不知道咋整。 2.递推公式。这道题与背包的单词划分比较像&#xff0c;一个单层循环是弄不出来…
阅读更多...
AJAX 02 案例、Bootstrap框架

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点&#xff1a;label扩大表单的范围 AJAX 2 综合案例 黑…
阅读更多...
深入剖析Mysql事务和Spring事务，mongodb面试题2024

深入剖析Mysql事务和Spring事务，mongodb面试题2024

注意max_trx_id并不是m_ids中的最大值&#xff0c;事务id是递增分配的。比方说现在有id为1&#xff0c;2&#xff0c;3这三个事务&#xff0c;之后id为3的事务提交了。那么一个新的读事务在生成ReadView时&#xff0c;m_ids就包括1和2&#xff0c;min_trx_id的值就是1&#xff…
阅读更多...
OSG编程指南＜二十＞：OSG路径动画

OSG编程指南＜二十＞：OSG路径动画

1、路径动画 如果读者耐心地读到这里，已经对路径动画不陌生了。因为前面很多处已经涉及路径动画，在很多示例中也用到了路径动画。路径动画就是按一定的插值方式生成路径，物体对象按照生成的路径或预先指定的路径来完成相应的动作的动画。 在 OSG 中，管理路径动画的核心类主…
阅读更多...
数据结构——循环链表，双向链表，线性表和有序表的合并详解

数据结构——循环链表，双向链表，线性表和有序表的合并详解

目录 1.循环链表 1.带尾指针循环链表的合并 代码示例&#xff1a; 2.双向链表 代码示例&#xff1a; 1.双向链表的插入 ​代码示例&#xff1a; 2.双向链表的删除 代码示例&#xff1a; 3.单链表&#xff0c;循环链表&#xff0c;双向链表时间效率的比较 4.顺序表和链…
阅读更多...
LSM树（Log-Structured-Merge-Tree）

LSM树（Log-Structured-Merge-Tree）

学习笔记&#xff1a;参考LSM树详解 - 知乎 (zhihu.com) NoSQL&#xff08;HBase,LevelDB,RocksDB&#xff09;采用LSM树 核心&#xff1a;利用顺序写来提高性能&#xff0c;但因为分层&#xff08;内存和文件两部分&#xff09;的设计会降低读性能。//牺牲小部分读性能来换高…
阅读更多...
Hack The Box-Codify

Hack The Box-Codify

目录 信息收集 rustscan nmap dirsearch WEB 提权 get user get root 信息收集 rustscan ┌──(root㉿ru)-[~/kali/hackthebox] └─# rustscan -b 2250 10.10.11.239 --range0-65535 --ulimit4500 -- -A -sC .----. .-. .-. .----..---. .----. .---. .--. .-. …
阅读更多...
漏洞复现-金蝶系列

漏洞复现-金蝶系列

漏洞复现-金蝶系列 Apusic 金蝶天燕Apusic 应⽤中间件代码命令执⾏金蝶云星空RCE金蝶云OA星空 CommonFileserver 任意文件读取金蝶云星空 管理中心介绍⾦蝶 EAS 系统存在⽬录遍历金蝶EAS myUploadFile任意文件上传实战之金蝶RCE上传绕过金蝶云金蝶云SaveUserPassport存在反序列…
阅读更多...
音视频实战---读取音视频文件的AAC音频保存成aac文件

音视频实战---读取音视频文件的AAC音频保存成aac文件

1、使用avformat_open_input函数打开音视频文件 2、使用avformat_find_stream_info函数获取解码器信息。 3、使用av_dump_format设置打印信息 4、使用av_init_packet初始化AVPacket。 5、使用av_find_best_stream查找对应音视频流的流下标。 6、使用av_read_frame读取音视…
阅读更多...
移动硬盘分区误删？别担心，数据恢复来帮忙！

移动硬盘分区误删？别担心，数据恢复来帮忙！

在日常使用移动硬盘的过程中&#xff0c;有时会因为各种原因导致分区被误删。这种情况一旦发生&#xff0c;很多人会感到惊慌失措&#xff0c;担心数据丢失无法找回。然而&#xff0c;只要及时采取正确的数据恢复措施&#xff0c;大多数情况下都能够成功恢复误删的分区和数据。…
阅读更多...
变量直接赋值、浅拷贝、深拷贝、递归、异常

变量直接赋值、浅拷贝、深拷贝、递归、异常

对象拷贝(对象存在堆中) 变量直接赋值 赋值 就是一个&#xff0c;比如let obj2obj1 这就是赋值&#xff0c;只是把栈中存储的值&#xff0c;赋值给另一个变量 把obj1在栈中的地址&#xff0c;赋值给obj2 <script>let str hellolet str2 str //把str的值,赋值给str2.也…
阅读更多...
公派访问学者申请被拒签的原因有哪些？

公派访问学者申请被拒签的原因有哪些？

在申请公派访问学者时&#xff0c;拒签是一种常见的结果&#xff0c;其原因多种多样。首先&#xff0c;申请材料不完整或者不符合要求可能是导致拒签的主要原因之一。例如&#xff0c;个人简历、研究计划书、推荐信等材料未能清晰地展示申请人的学术背景和研究意图&#xff0c;…
阅读更多...
想零基础转行Python开发，怎么学习呢？

想零基础转行Python开发，怎么学习呢？

转行零基础学Python编程开发难度大吗&#xff1f;从哪学起&#xff1f;近期很多小伙伴问我&#xff0c;如果自己转行学习Python&#xff0c;完全0基础能否学会呢&#xff1f;Python的难度到底有多大&#xff1f;今天&#xff0c;小编就来为大家详细解读一下这个问题。 学习 Py…
阅读更多...
蓝桥杯刷题|02入门真题

蓝桥杯刷题|02入门真题

[蓝桥杯 2022 省 B] 刷题统计 题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a 道题目&#xff0c;周六和周日每天做 b 道题目。请你帮小明计算&#xff0c;按照计划他将在第几天实现做题数大于等于 n 题? 输入格式 输入一行包含三个整数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023