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 相关文章推荐
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php session_decode函数用法讲解
2019/05/26 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
python实现用户登录系统
2016/05/21 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
电子信息科学专业自荐信
2014/01/30 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
环境建议书
2015/02/04 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
《花钟》教学反思
2016/02/17 职场文书
创业计划书之农家乐
2019/10/09 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs