JS实现数组去重方法总结(六种方法)


Posted in Javascript onJuly 14, 2017

方法一:

双层循环,外层循环元素,内层循环时比较值

如果有相同的值则跳过,不相同则push进数组

Array.prototype.distinct = function(){
 var arr = this,
  result = [],
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] === arr[j]){
    j = ++i;
   }
  }
  result.push(arr[i]);
 }
 return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();    //返回[3,4,2,1]

方法二:利用splice直接在原数组进行操作

双层循环,外层循环元素,内层循环时比较值

值相同时,则删去这个值

注意点:删除元素之后,需要将数组的长度也减1.

Array.prototype.distinct = function (){
 var arr = this,
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] == arr[j]){
    arr.splice(j,1);
    len--;
    j--;
   }
  }
 }
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

优点:简单易懂

缺点:占用内存高,速度慢

方法三:利用对象的属性不能相同的特点进行去重

Array.prototype.distinct = function (){
 var arr = this,
  i,
  obj = {},
  result = [],
  len = arr.length;
 for(i = 0; i< arr.length; i++){
  if(!obj[arr[i]]){ //如果能查找到,证明数组元素重复了
   obj[arr[i]] = 1;
   result.push(arr[i]);
  }
 }
 return result;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

方法四:数组递归去重

运用递归的思想

先排序,然后从最后开始比较,遇到相同,则删除

Array.prototype.distinct = function (){
 var arr = this,
  len = arr.length;
 arr.sort(function(a,b){  //对数组进行排序才能方便比较
  return a - b;
 })
 function loop(index){
  if(index >= 1){
   if(arr[index] === arr[index-1]){
    arr.splice(index,1);
   }
   loop(index - 1); //递归loop函数进行去重
  }
 }
 loop(len-1);
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());  //1,2,3,4,5,6,45,56

方法五:利用indexOf以及forEach

Array.prototype.distinct = function (){
 var arr = this,
  result = [],
  len = arr.length;
 arr.forEach(function(v, i ,arr){  //这里利用map,filter方法也可以实现
  var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
  if(bool === -1){
   result.push(v);
  }
 })
 return result;
};
var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString()); //1,23,2,3

方法六:利用ES6的set

Set数据结构,它类似于数组,其成员的值都是唯一的。

利用Array.from将Set结构转换成数组

function dedupe(array){
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

拓展运算符(...)内部使用for...of循环

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)]; 
console.log(resultarr); //[1,2,3]

下面给大家补充介绍合并数组并去重的方法

一、concat()方法

思路:concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。

function concatArr(arr1, arr2){
  var arr = arr1.concat(arr2);
  arr = unique1(arr);//再引用上面的任意一个去重方法
  return arr;
}

二、Array.prototype.push.apply()

思路:该方法优点是不会产生一个新的数组。

var a = [1, 2, 3];
 var b = [4, 5, 6];
 Array.prototype.push.apply(a, b);//a=[1,2,3,4,5,6]
 //等效于:a.push.apply(a, b);
 //也等效于[].push.apply(a, b); 
 function concatArray(arr1,arr2){
   Array.prototype.push.apply(arr1, arr2);
   arr1 = unique1(arr1);
   return arr1;
 }

总结

以上所述是小编给大家介绍的JS实现数组去重方法总结(六种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
javascript基础知识讲解
2017/01/11 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python时间time模块处理大全
2020/10/25 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python实现按日期归档文件
2021/01/30 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
机械机修工岗位职责
2014/08/03 职场文书
好的促销活动方案
2014/08/21 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
接待员岗位职责
2015/02/13 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技