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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
Vue如何实现响应式系统
Jul 11 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
原生js实现分页效果
2020/09/23 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python检测服务器端口代码实例
2019/08/31 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
final, finally, finalize的区别
2012/03/01 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
会计自我鉴定
2014/02/04 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js