JavaScript常见的五种数组去重的方式


Posted in Javascript onDecember 15, 2016

大致介绍

JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结

先来建立一个数组

var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN];

第一种

思路:建立一个临时数组,用for循环去依次判断arr中的每个项在临时数组中是否有相同的值,如果没有则将这个值添加到临时数组,如果有相同的值则不添加,最后返回这个临时数组

代码:

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length;i++){
  if(n.indexOf(this[i]) == -1 ){
  n.push(this[i]);
  }
  }
 return n;
}
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN, NaN]

注意:不会去掉重复的NaN值

第二种

 

思路:建立一个临时数组,用for循环利用indexOf()方法去依次判断arr中的每个项在arr中第一次出现的位置,如果这个项在arr中第一次出现的位置就是它的位置,表明在它之前没有相同的值则把它添加到临时数组中,如果这个项在arr中第一次出现的位置不是他的位置则表明在它之前有相同的值,则不把他添加到临时数组中;最后返回临时数组

代码:

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length-1;i++){
  if(this.indexOf(this[i]) == i){
  n.push(this[i]);
  }
  }
 return n;
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的"]

注意:会把NaN值删除

第三种

思路:建立一个临时对象,利用for循环检测这个临时对象有没有arr[i]这个属性,如果没有这个属性表明arr[i]在它之前没有和它重复的值。把临时对象的arr[i]属性设置为true,表明有这个属性并把这个项添加到临时数组中;最后返回临时数组

代码:

Array.prototype.removeDuplicate = function(){
  var n = [],m = {};
  for(var i=0;i<this.length;i++){
  if(!m[this[i]]){
  m[this[i]] = true;
  n.push(this[i]);
  }
  }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

第四种

思路:先将这个数组排序,然后比较每个项和它后面的项的值是否相等,如果不相等则添加到临时数组中;最后返回临时数组

代码:

Array.prototype.removeDuplicate = function(){
 var n = [];
 this.sort();
 for(var i=0;i<this.length;i++){
 if(this[i] != this[i+1]){
  n.push(this[i]);
  }
 }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, 34, NaN, NaN, "我", "我的"]

注意:不会去掉重复的NaN值

第五种

思路:利用ES6的方法set方法去重,并用Array.from转换为数组

set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目,返回一个对象

代码:

Array.prototype.removeDuplicate = function(){
 return (Array.from(new Set(this)));
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 #Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 #Javascript
JS去除重复并统计数量的实现方法
Dec 15 #Javascript
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php模板原理讲解
2013/11/13 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php 中的closure用法详解
2017/06/12 PHP
图片完美缩放
2006/09/07 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
javascript天然的迭代器
2010/10/29 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue中改变滚动条样式的方法
2020/03/03 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
用Python写一个for循环的例子
2016/07/19 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
九年级数学教学反思
2014/02/02 职场文书
学生党支部先进事迹
2014/02/04 职场文书
大学活动总结格式
2014/04/29 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript