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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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压缩和解压缩字符串的方法
2015/03/14 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python文件操作方法详解
2020/02/09 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
员工工作表现评语
2014/04/26 职场文书
会计求职自荐信
2014/06/20 职场文书
行风评议整改报告
2014/11/06 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技