首页 / JAVASCRIPT / JavaScript数组去重方法，面试加分项！

JavaScript数组去重方法，面试加分项！

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript数组去重方法，面试加分项！，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6320字，纯文字阅读大概需要10分钟。

内容图文

数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？
你能答出其中的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直接消失了

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

三、利用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)] 
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

在这里给大家分享一下，我是一名5年前端工程师，自己建了一个q群：731771211 ，群里不停更新最新的教程和学习方法，加入一起学习与交流

内容总结

以上是互联网集市为您收集整理的JavaScript数组去重方法，面试加分项！全部内容，希望文章能够帮你解决JavaScript数组去重方法，面试加分项！所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/856355.html

来源：【匿名】

【上一篇】JavaScript学习day2 （基本语法上）【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript数组去重方法，面试加分项！】教程文章相关的互联网学习教程文章

js数组去重

function deleteRepeat(){//删除重复的 var _arr=[1,1,1,3,3,3,5,8,8,9,10]; //console.log(_arr); for(var i=0;i<_arr.length;i++){ for(var n=i+1;n<_arr.length;n++){ if(_arr[i]==_arr[n]){ _arr.splice(n,1); n--; } } ...

js字符串去重【代码】

使用正则去重1var s = "aabdeeagdcffdsf"; 2var ss = s.replace(/(.)(?=.*\1)/g,""); 3 console.log(ss)说明： 1、var reg =/(.)(?=.*\1)/g; 2、.匹配任意字符，但只能匹配任意字符中的一个; 3、(.)加上()就是将匹配的该字符存储起来供以后引用; 4、(?=)预搜索（也有叫断言的，也有叫预查的），指明某个字符的右侧是什么，但不包含这部分，只取这个‘某个字符’,如：p(?=ing)匹配字符串ping时匹配成功...

js数组去重算法【代码】

来来来，整理完数组排序，咱们再来看看数组去重。这个可以说有很多方式了。之前看过的算法方式太多，导致思路其实有时候真的很受限，不过也是整理来学习用的，如有雷同，纯属巧合啊，小婊贝们~　　首先呢，我们来看看思路比较直接的方法，基本思路就是声明一个新数组arr_n，将【0】这个成员压入arr;然后从【1】开始循环当前数组，设置一个变量a，给他一个初始值1；内层嵌套从【0】对arr_n数组的循环，用外层对当前数组循...

前端：JS实现数组去重常用的六种方法介绍【代码】【图】

今天给大家分享JS实现数组去重常用的六种方法，希望对大家能有所帮助！定义变量let arr = [20,6,13,20,100,8,13,11]; let newArr = []; ?1、两层循环去重?for(let i = 0;i < arr.length;i++){for(let j = i + 1;j < arr.length;j++){if(arr[i] == arr[j]){arr.splice(j,1)j--}} } ?2、includes函数判断去重?for(let i of arr){if(!newArr.includes(i)){newArr.push(i)} } ?3、filter循环过滤去重?arr.filter((val,index) => {if(ne...

JS 数组去重学习日志#1【代码】【图】

5.10 JS 数组去重学习日志#1 参考文章1（Array.from()）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from 参考文章2 (Set)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set//问题：var arr=[1,1,1,2,3,4,5,6,12,341235,31,5]; //将此数组进行去重//解决代码 window.onload=function () {console.log(Array.from(new Set(arr))) } 第一步...

js中数组对象去重的两种方法

方法一：采用对象访问属性的方法，判断属性值是否存在，如果不存在就添加。方法二：采用数组中的reduce方法，遍历数组，也是通过对象访问属性的方法 var arr = [{key: 01,value: 乐乐}, {key: 02,value: 博博}, {key: 03,value: 淘淘},{key: 04,value: 哈哈},{key: 01,value: 乐乐}];// 方法1：利用对象访问属性的方法，判断对象中是否存在keyvar result = [];var obj = {};for(var i =0; i<arr.length; i++){if(!obj[arr[i].ke...

从给数组中的对象去重看js中的reduce()

假设有这样一个数组：let person = [{id: 0, name: "小明"},{id: 1, name: "小张"},{id: 2, name: "小李"},{id: 3, name: "小孙"},{id: 1, name: "小周"},{id: 2, name: "小陈"}, ]我们想去掉数组中id重复的对象，比如同样id为2的两个对象——{id: 2, name: "小李"}和{id: 2, name: "小陈"} （去掉任何一个都可以）我们该如何去做呢？事实上，对于数组对象，传统的去重方法无能为力，至于forEach()、filter()等迭代方法也不好使...

Javascript数组去重的几种方法

实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码：// 最简单数组去重法function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 ...

JavaScript数组去重的方法总结（附代码）

本篇文章给大家带来的内容是关于JavaScript数组去重的方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。数组去重在日常开发中的使用频率还是较高的，也是网上随便一抓一大把的话题，所以，我写这篇文章目的在于归纳和总结，既然很多人都在提的数组去重，自己到底了解多少呢。又或者是如果自己在开发中遇到了去重的需求，自己能想到更好的解决方案吗。这次我们来理一理怎么做数组去重才能做得最...

JavaScript中如何实现数组去重？js中数组去重的三种方法（代码实例）

JavaScript中如何实现数组去重？本篇文章就给大家介绍在js中数组去重的三种常用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。下面我们就通过简单代码示例来介绍js中数组去重的三种常用方法。第一种方法：for循环(两次) + 新数组思路：1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比3.若结果数组中没有该元素，则存到结果数组中//方法一 var arr = [1...

js数组去重方法的性能测试对比【图】

本篇文章给大家带来的内容是关于js数组去重方法的性能测试对比，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、测试模版数组去重是一个老生常谈的问题，网上流传着有各种各样的解法为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{return index })let arr2 = Array.from(new Array(50000), (x, index)=>{return i...

超全面的JavaScript数组去重的12种方法总结

本篇文章给大家带来的内容是关于超全面的JavaScript数组去重的12种方法总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但...

数组的常用方法有哪些，如何给数组去重（附代码）

数组是JavaScript的重要组成部分，不管是工作还是求职面试都会涉及数组，比如经典问题：怎么给数组去重。今天就和大家聊聊，数组的常用方法有哪些，以及多种方式给数组去重。一、数组常用方法slice() 用于提取目标数组的一部分，返回一个新数组，原数组不变。concat() 用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。reverse() 用于颠倒排列数组元素，返回改变后的数组。注意...

js中数组的应用以及数组去重的四种方法介绍（代码）

本篇文章给大家带来的内容是关于js中数组的应用以及数组去重的四种方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.输入n，输出n行对称的数组成金字塔：function output(n) {for(let i=0;i<=n;i++){ let k=0; var a=[]; for(let j=1;j<=2*i-1;j++){ if(j<=i){a.push(++k);}else{a.push(--k);} }console.log(a)} }2.数组去重方法一：遍历数组法// 最简单数组...

js数组去重的方法有哪些？js数组去重的方法总结（实例）

本篇文章给大家带来的内容是关于js数组去重的方法有哪些？js数组去重的方法总结（实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最基本的写法使用indexOf()var arr = [1,1,5,77,32,54,2,4,5,2,2,4,52,2,2,2,2,2] //比较常规的语法使用indexOf来判断是否已经存在 getFileArray(arr) function getFileArray(arr){var array = [];arr.forEach(e => {if(array.indexOf(e) !== -1){return;}else {array.push...

首页 / JAVASCRIPT / JavaScript数组去重方法，面试加分项！

JavaScript数组去重方法，面试加分项！

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript数组去重方法，面试加分项！】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

面试 - 相关标签

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程