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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
js键盘事件的keyCode
Jul 29 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
layui自定义工具栏的方法
Sep 19 Javascript
vue监听滚动事件的方法
Dec 21 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
javascript 回调函数详解
2014/11/11 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python实现多线程网页下载器
2018/04/15 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
中文系学生自荐信范文
2013/11/13 职场文书
民生工程实施方案
2014/03/22 职场文书
音乐教师求职信
2014/06/28 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers