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
Oct 31 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
xtree.js 代码
2007/03/13 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Vue实现图书管理案例
2021/01/20 Vue.js
Python中为什么要用self探讨
2015/04/14 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python识别验证码的思路及解决方案
2020/09/13 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
自荐信的基本格式
2014/02/22 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
计划生育工作汇报
2014/10/28 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL