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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
原生js实现无缝轮播图效果
Jan 28 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新手上路(十)
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
vue组件间通信解析
2017/03/01 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python中format()函数的简单使用教程
2018/03/14 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
wxpython布局的实现方法
2019/11/01 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
市三好学生主要事迹
2014/01/28 职场文书
会计专业导师推荐信
2014/03/08 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
八年级英语教学反思
2016/02/15 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技