一、前言：

我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！

二、数组去重方式大汇总：

Methods 1: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function unique(arr){

 var res = [arr[0]];

 for(var i=1; i<arr.length; i++){

  var repeat = false;

  for(var j=0; j<res.length; j++){

   if(arr[i] === res[j]){

    repeat = true;

    break;

   }

  }

  if(!repeat){

   res.push(arr[i]);

  }

 }

 return res;

}

console.log('------------方法一---------------');

console.log(unique([1,1,2,3,5,3,1,5,6,7,4]));

Methods 2: 思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function unique2(arr){

 var arr2 = arr.sort();

 var res = [arr2[0]];

 for(var i=1; i<arr2.length; i++){

  if(arr2[i] !== res[res.length-1]){

   res.push(arr2[i]);

  }

 }

 return res;

}

console.log('------------方法二---------------');

console.log(unique2([1,1,2,3,5,3,1,5,6,7,4]));

Methods 3: 利用对象属性存在的特性，如果没有该属性则存入新数组。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function unique3(arr){

 var res = [];

 var obj = {};

 for(var i=0; i<arr.length; i++){

  if( !obj[arr[i]] ){

   obj[arr[i]] = 1;

   res.push(arr[i]);

  }

 }

 return res;

}

console.log('------------方法三---------------');

console.log(unique3([1,1,2,3,5,3,1,5,6,7,4]));

Methods 4: 利用数组的indexOf下标属性来查询。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

function unique4(arr){

 var res = [];

 for(var i=0; i<arr.length; i++){

  if(res.indexOf(arr[i]) == -1){

   res.push(arr[i]);

  }

 }

 return res;

}

console.log('------------方法四---------------');

console.log(unique4([1,1,2,3,5,3,1,5,6,7,4]));

Methods 5: 利用数组原型对象上的includes方法。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function unique5(arr){

 var res = [];

 

 for(var i=0; i<arr.length; i++){

  if( !res.includes(arr[i]) ){ // 如果res新数组包含当前循环item

   res.push(arr[i]);

  }

 }

 return res;

}

console.log('------------方法五---------------');

console.log(unique5([1,1,2,3,5,3,1,5,6,7,4]));

Methods 6: 利用数组原型对象上的 filter 和 includes方法。

?

1

2

3

4

5

6

7

8

9

10

11

12

function unique6(arr){

 var res = [];

 

 res = arr.filter(function(item){

  return res.includes(item) ? '' : res.push(item);

 });

 return res;

}

console.log('------------方法六---------------');

console.log(unique6([1,1,2,3,5,3,1,5,6,7,4]));

Methods 7: 利用数组原型对象上的 forEach 和 includes方法。

?

1

2

3

4

5

6

7

8

9

10

11

12

function unique7(arr){

 var res = [];

 

 arr.forEach(function(item){

  res.includes(item) ? '' : res.push(item);

 });

 return res;

}

console.log('------------方法七---------------');

console.log(unique7([1,1,2,3,5,3,1,5,6,7,4]));

Methods 8: 利用数组原型对象上的 splice 方法。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function unique8(arr){

 var i,

  j,

  len = arr.length;

 for(i = 0; i < len; i++){

  for(j = i + 1; j < len; j++){

   if(arr[i] == arr[j]){

    arr.splice(j,1);

    len--;

    j--;

   }

  }

 }

 return arr;

}

console.log('------------方法八---------------');

console.log(unique8([1,1,2,3,5,3,1,5,6,7,4]));

Methods 9: 利用数组原型对象上的 lastIndexOf 方法。

?

1

2

3

4

5

6

7

8

9

10

11

function unique9(arr){

 var res = [];

 for(var i=0; i<arr.length; i++){

  res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);

 }

 return res;

}

console.log('------------方法九---------------');

console.log(unique9([1,1,2,3,5,3,1,5,6,7,4]));

Methods 10: 利用 ES6的set 方法。

?

1

2

3

4

5

6

7

8

function unique10(arr){

 //Set数据结构，它类似于数组，其成员的值都是唯一的

 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组

}

console.log('------------方法十---------------');

console.log(unique10([1,1,2,3,5,3,1,5,6,7,4]));

史上最全JavaScript数组去重的十种方法（推荐）相关推荐

  1. 史上最全JavaScript数组对象详解（二）

    JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...

  2. 史上最全JavaScript数组方法

    一.以下是不改变数组本身的方法 1.concat()用于合并两个或多个数组 const a = ['你是','什么'] const b = ['牛马'] const c = a.concat(b) c ...

  3. 呕心沥血集齐史上最全 JavaScript最实用工具函数大全，建议收藏！

    为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = functio ...

  4. 计算机配置好坏怎么看,电脑配置怎么看 史上最全的查看电脑配置好坏方法

    原标题:电脑配置怎么看 史上最全的查看电脑配置好坏方法 很多电脑新手朋友都喜欢问:电脑配置怎么看,也就是如何看一台电脑的硬件的好坏.关于如何查看电脑配置好坏,目前网上有很多相关教程,大家可以在百度搜索 ...

  5. W ndows10如何清理使用痕迹,Win10 C盘突然爆满，怎么清理？史上较全的C盘清理方案，推荐收藏...

    原标题:Win10 C盘突然爆满,怎么清理?史上较全的C盘清理方案,推荐收藏 有用户和老毛桃说,C盘就像是一个无底洞,无论给它分多大的分区,Windows总有办法给它填满!除了这位用户,相信很多朋友也 ...

  6. 联通开通流量不显示无服务器,史上最全的联通流量自助开通方法！

    原标题:史上最全的联通流量自助开通方法! 天底下的流量包都在这儿,爱要不要!你的流量能HOLD住吗?哈哈,小编给你支招:以下就是给你推荐的超好用流量包订购方法!各位看官您瞧好了! 流量月包 兵马未动, ...

  7. 史上最全js数组，字符串方法汇总

    目录 一.数组 (1)for..in一般用于遍历对象的属性 (2)for..of (3)Object.keys() (4)Object.values() (5)Object.entries() (6) ...

  8. 史上最全 JS 数组常用方法总结.

    文章目录 js数组常用方法总结 判断是否为数组: Array.isArray() 1.0 数组新增or删除相关方法 push() 方法 末尾添加 unshift() 方法 开头添加 shift() 方 ...

  9. JavaScript数组去重6种方法

    数组去重涉及基础知识较多,总结了以下6个方法: 双重for循环,push新数组: 双重for循环,splice原数组: 单个for循环,遍历对象属性: 单个for循环,sort排序后遍历: ES5,i ...

最新文章

  1. 使用Python、OpenCV计算轮廓的中心
  2. LINUX文件、目录权限及相关操作命令
  3. http://blog.csdn.net/itplus/article/details/10088625
  4. Linux操作（4）—— 如何安装或卸载软件
  5. leetcode-260.只出现一次的数字 III 解法
  6. linux下Oracle 10g安装(超级详细图解教程)
  7. 25岁“天才少年”曹原再发一篇Nature！1个月时间内的第二篇！
  8. spring cloud 调用接口间歇性返回http 500 - Internal Server Error的错误
  9. Oracle 查询练习及答案
  10. java selenium_关于selenium的介绍
  11. 转：Nginx 性能优化有这篇就够了！
  12. 魔改部署自己专属的合成大西瓜（三：上线篇＜踩坑篇＞）
  13. 深度学习中batch-size介绍
  14. 算法设计与分析——排序算法：十大排序算法总结
  15. 银行柜员网申计算机水平要求高吗,银行笔试通过率：看你网申如何？
  16. HTML和CSS基础学习
  17. web 前端签名插件_手写签名插件—jSignature
  18. vue weex 打电话
  19. 用eclipse europa开发web service服务 - 东写西读终见大海无量 - JavaEye技术网站
  20. WIndow10下安装UR机器人接口ur_rtde

热门文章

  1. HRNet的学习笔记
  2. Nginx配置https和wss
  3. tkinter事件机制
  4. Maven使用archetype迅速生成项目骨架
  5. mybatis缓存学习笔记
  6. 实体（Entity）和模型（Model）
  7. 对AUTOCAD软件的一些配置
  8. 【bzoj2759】一个动态树好题
  9. 网络流24题 餐巾计划（DCOJ8008）
  10. mysql存入中文乱码解决方法（windows环境）