js数组去重的方法总结


Posted in Javascript onJanuary 18, 2019

一、普通的方法去重

1、简单的去重方法

// 最简单数组去重法
/*
* 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
*/
function uniq(array){
  var temp = []; //一个新的临时数组
  for(var i = 0; i < array.length; i++){
    if(temp.indexOf(array[i]) == -1){
      temp.push(array[i]);
    }
  }
  return temp;
}
var newArray = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(newArray));// [1, 2, 4, 9, 6, 7, 5, 3]
/*
var newArray = ['mu','zi','dig','big','z','mu','zi','muzidigbig']
console.log(uniq(newArray));//["mu", "zi", "dig", "big", "z", "muzidigbig"]
*/

js数组去重的方法总结

2、数组下标法

/*
* 还是得调用“indexOf”性能跟方法1差不多,
* 实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,
* 那么表示第i项是重复的,忽略掉。否则存入结果数组。
*/
function uniq(array){
  var temp = [];
  for(var i = 0; i < array.length; i++) {
    //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的
    if(array.indexOf(array[i]) == i){
      temp.push(array[i])
    }
  }
  return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));//[1, 2, "2", 4, 9, "a", 3, 5, 6]

3、排序后相邻去除法

/*
* 给传入数组排序,排序后相同值相邻,
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
*/
function uniq(array){
  array.sort();
  console.log(array.sort());
  var temp=[array[0]];
  for(var i = 1; i < array.length; i++){
    if( array[i] !== temp[temp.length-1]){
      temp.push(array[i]);
    }
  }
  return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));//[1, "2", 2, 3, 4, 5, 6, 9, "a"]

4、优化遍历数组法

// 思路:获取没重复的最右一值放入新数组
/*
* 推荐的方法
* 方法的实现代码相当酷炫,
* 实现思路:获取没重复的最右一值放入新数组。
* (检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)
*/
function uniq(array){
  var temp = [];
  var index = [];
  var l = array.length;
  for(var i = 0; i < l; i++) {
    for(var j = i + 1; j < l; j++){
      if (array[i] === array[j]){
        i++;
        j = i;
      }
    }
    temp.push(array[i]);
    index.push(i);
  }
  console.log(index);//[0, 2, 5, 6, 7, 8, 9]
  return temp;
}
var aa = [1,2,2,3,5,3,6,5,'3','muzi'];
console.log(uniq(aa));// [1, 2, 3, 6, 5, "3", "muzi"]

5.数组includes()去重

//利用数组原型对象上的includes方法
function unique(arr){
 var bArr= [];
 for(var i=0; i<arr.length; i++){
  if( !bArr.includes(arr[i]) ){ // 如果bArr新数组包含当前循环item
   bArr.push(arr[i]);
  }
 }
 return bArr;
}
var aa = [1,2,2,3,5,3,6,5,'3','muzi'];
console.log(unique(aa))//[1, 2, 3, 5, 6, "3", "muzi"]

6.数组原型对象上的filter和includes方法

//利用数组原型对象上的filter和includes方法
function unique6(arr){
 var bArr= [];
 bArr= arr.filter(function(item){
 return bArr.includes(item) ? null : bArr.push(item);
 });
 return bArr;
}
var aa = [1,2,2,3,5,3,6,5,'3','muzi'];
console.log(unique6(aa))//[1, 2, 3, 5, 6, "3", "muzi"]

7.数组原型对象上的forEach和includes方法

//利用数组原型对象上的forEach和includes方法
function unique7(arr){
 var bArr= [];
 arr.forEach(function(item){
  bArr.includes(item) ? null : bArr.push(item);
 }); 
 return bArr;
}
var aa = [1,2,2,3,5,3,6,5,'3','muzi'];
console.log(unique7(aa))//[1, 2, 3, 5, 6, "3", "muzi"]

二、原型对象去重

方法一:

思路:1)构建一个临时数组存放结果;

            2)循环遍历当前数组,判断当前数组下标为i的元素是否已经保存在临时数组,如果已保存,则跳过,否则将此元素保存到临时数组中。

Array.prototype.method1 = function(){
    var arr=[];  //定义一个临时数组
    for(var i = 0; i < this.length; i++){  //循环遍历当前数组
      //判断当前数组下标为i的元素是否已经保存到临时数组
      //如果已保存,则跳过,否则将此元素保存到临时数组中
      if(arr.indexOf(this[i]) == -1){
        arr.push(this[i]);
      }
    }
    return arr;
  };
  var arrNum1 = [1,4,1,1,3,3,4,6,7,8,3,7,0,2,11,2,'muzi','digbig','muzi'];
  console.log(arrNum1.method1());//[1, 4, 3, 6, 7, 8, 0, 2, 11, "muzi", "digbig"]

三、es6去重

let arr = [1,2,2,3,4,4,4];
  let s = new Set(arr);
  //结果:Set {1,2,3,4}
  let newArr = Array.from(s);
  //结果:[1,2,3,4],完成去重

js数组去重的方法总结

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
Uploadify上传文件方法
Mar 16 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
详解vue-cli3使用
Aug 14 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
highCharts提示框中显示当前时间的方法
Jan 18 #Javascript
微信小程序使用canvas的画图操作示例
Jan 18 #Javascript
js中数组对象去重的两种方法
Jan 18 #Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 #Javascript
js中的reduce()函数讲解
Jan 18 #Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 #Javascript
You might like
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JS面向对象编程详解
2016/03/06 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue+elementUI实现图片上传功能
2019/08/20 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python3.6实现学生信息管理系统
2019/02/21 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
我的画教学反思
2014/04/28 职场文书
工程售后服务方案
2014/06/08 职场文书
干部年终考核评语
2015/01/04 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
小学远程教育工作总结
2015/08/13 职场文书
高中团支书竞选稿
2015/11/21 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
python基础之函数的定义和调用
2021/10/24 Python