Js数组去重的多种方法

方法一

原理:利用双层循环将相邻元素  arr[i]和arr[i+1] 进行比较,相等则数组删除arr[i+1]  下标元素


var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function removeDuplicatedItem(arr) {for(var i = 0; i < arr.length-1; i++){for(var j = i+1; j < arr.length; j++){if(arr[i]==arr[j]){8              arr.splice(j,1);j--;}}}return arr;
}arr2 = removeDuplicatedItem(arr);
console.log(arr);
console.log(arr2);

 

 

方法二

原理:双层循环依次比对

var arr = [1, 1, 1, 3, 4, 4, 4, 5, 5, 5, 5, 4, 6];
function removeArrayRepElement(arr){for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr.length; j++) {if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉arr.splice(j, 1);}}}return arr;
}
var arr2  = removeArrayRepElement(arr);
console.log(arr); //[ 1, 3, 4, 5, 6 ]
console.log(arr2);//[ 1, 3, 4, 5, 6 ]

 

 

 

方法三

原理:使用数组的indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

var ar = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function rep2(arr) {for (var i = 0; i < arr.length; i++) {if (arr.indexOf(arr[i]) != i) {arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移i--;//数组下标回退}}return arr;
}
var a1 = rep2(ar);
console.log(ar);
console.log(a1);

注意:需要考虑兼容性问题,所有主要浏览器都支持 indexOf() 方法,但是 Internet Explorer 8 及 更早IE版本不支持该方法。

所以,兼容性改进:

function indexOf(arr, item){if(Array.prototype.indexOf){return arr.indexOf(item)} else {for(var i=0; i<arr.length; i++){if(arr[i] == item){return i;}}}return -1;}

 

使用Polyfill库解决js兼容性

Polyfill是一个js库,主要抚平不同浏览器之间对js实现的差异。比如,html5的storage(session,local), 不同浏览器,不同版本,有些支持,有些不支持。Polyfill(Polyfill有很多,在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills),帮你把这些差异化抹平,不支持的变得支持了(典型做法是在IE浏览器中增加 window.XMLHttpRequest ,内部实现使用 ActiveXObject。)

提到Polyfill,不得不提shim,polyfill 是 shim的一种。 
shim是将不同 api封装成一种,比如 jQuery的 $.ajax 封装了 XMLHttpRequest和 IE用ActiveXObject方式创建xhr对象。它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。
 

 

 

方法四

原理: 利用数组中的 array.filter(function(currentValue,index,arr)) 方法返回新的数组,不会影响原数组数据

var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry'];var r = arr.filter(function(element,index,self){//筛选逻辑代码,如果没有符合条件的元素则返回空数组。return self.indexOf(element) === index;});console.log(r);

注意: filter() 不会对空数组进行检测。浏览器兼容支持IE9+;

 

 

 

 

方法五

原理:通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则push() 添加到新数组中


var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function rep(arr) {var ret = [];for (var i = 0; i < arr.length; i++) {if (arr.indexOf(arr[i]) == i) {ret.push(arr[i]);}}return ret;
}
arr2 = rep(arr);
console.log(arr);
console.log(arr2);

 

 

 

方法六

原理:利用空对象来记录新数组中已经存储过的元素


var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
var o={};
var new_arr=[];
for(var i=0;i<arr.length;i++){var k=arr[i];if(!o[k]){o[k]=true;new_arr.push(k);}
}
console.log(new_arr);

 

 

方法七

原理:借助新数组  判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
Array.prototype.reArr = function(){  //在Array构造函数原型上添加函数方法var newArr = [];for(var i = 0; i < this.length; i++){if(newArr.indexOf(this[i])== -1){newArr.push(this[i]);}}return newArr;
}
var arr2 = arr.reArr();
console.log(arr); //[ 1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5 ]
console.log(arr2);//[ 1, 23, 3, 5, 6, 7, 9, 8 ]

 

 

方法八

原理:数组排序后(转换成字符串排序的),临近元素不相等则添加到新数组中

var arr = [1,23,1,31,1,1,3,23,5,121,6,7,9,9,8,5];
function removeRepEle(ar) {var ret = [],end;//临时变量用于对比重复元素//ar.sort();  //转换成字符串排序的,所以会存在 121<23 的错误发生ar.sort(function(a,b){return a-b;});//将数重新组排序,end = ar[0];ret.push(ar[0]);for (var i = 1; i < ar.length; i++) {if (ar[i] != end) {//当前元素如果和临时元素不等则将此元素添加到新数组中ret.push(ar[i]);end = ar[i];}}return ret;
}arr2 = removeRepEle(arr);
console.log(arr);//[1, 1, 1, 1, 3, 5, 5, 6, 7, 8, 9, 9, 23, 23, 31, 121]
console.log(arr2);//[1, 3, 5, 6, 7, 8, 9, 23, 31, 121]

注意:注意sort()方法排序数值大于100时的问题

 

 

方法九

原理:数组排序后,临近元素比较后splice()方法删除重复项


var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function removeRepEle(ar) {var  end;//临时变量用于对比重复元素ar.sort(function(a,b){return a-b;});//将数重新组排序end = ar[0];for (var i = 1; i < ar.length; i++) {if (ar[i] == end) {//当前元素如果和临时元素相等则将此元素从数组中删除ar.splice(i,1);i--;}else{end = ar[i];}}return ar;
}
arr2 = removeRepEle(arr);
console.log(arr); //[ 1, 23, 3, 5, 6, 7, 8, 9 ]
console.log(arr2);//[ 1, 23, 3, 5, 6, 7, 8, 9 ]

 

 

方法十

原理:借助新数组,当双层循环对比中没有重复项时添加到新数组

var arr = [12, 2, 44, 3, 2, 32, 33, -2, 45, 33, 32, 3, 12];
var newArr = [];
for (var i = 0; i < arr.length; i++) {var repArr = [];//接收重复数据后面的下标//内层循环找出有重复数据的下标for (var j = i + 1; j < arr.length; j++) {if (arr[i] == arr[j]) {repArr.push(j);//找出后面重复数据的下标}}//console.log(repArr);if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据newArr.push(arr[i]);}
}
console.log(newArr);//[ 44, 2, -2, 45, 33, 32, 3, 12 ]

 

 

PS:array.indexOf(item,start)方法的使用

表示从start下标位置开始在数组中查找item项在数组中的位置,start默认是0。lastIndexOf(item,start) 查询的是最后一个item所在位置。查询不到都会返回-1的值。

    let array=["hello","world","jane","food","tom","world","wahaha"];console.log(array.indexOf("world"));  // 1console.log(array.lastIndexOf("world"));// 5console.log(array.indexOf("world",0));  // 1console.log(array.indexOf("world",1));  // 1,查询到的依旧是第一个world字符串所在位置console.log(array.indexOf("world",2));  // 5,从第三个元素开始只能查到下标为5的world字符串console.log(array.indexOf("world",4));  // 5console.log(array.indexOf("world",5));  // 5console.log(array.indexOf("world",6));  // -1 ,查询不到返回-1console.log(array.indexOf("world",7));  // -1console.log(array.indexOf("world",-2));  // 5 ,负数下标表示从数组尾部开始倒数起点console.log(array.indexOf("world",-6));  // 1console.log(array.lastIndexOf("world", -2)); // 5

 

学习网址:https://blog.csdn.net/E_li_na/article/details/79925094

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qq浏览器网站禁止访问怎么办 qq浏览器网站禁止访问如何解决

打开手机的QQ浏览器说访问网页被禁止&#xff0c;是设置错误造成的&#xff0c;解决方法如下&#xff1a; 1、首先在手机屏幕上左右滑动&#xff0c;找到安装好的QQ浏览器的图标。 <a styleqq浏览器网站禁止访问怎么办 qq浏览器网站禁止访问如何解决"> 2、接下来…

计算机基础:程序、进程、线程

进程、线程、多线程相关总结 一、说说概念 1、进程&#xff08;process&#xff09; 狭义定义&#xff1a;进程就是一段程序的执行过程。 广义定义&#xff1a;进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。它是操作系统动态执行的基本单元&#xff0…

Win7系统局域网抢网速的方法

Win7旗舰版局域网怎么抢占网速?最近有很多使用Win7系统的用户问小编&#xff0c;反应自己在局域网下玩游戏的时候很卡&#xff0c;因为很多人在用网络&#xff0c;导致自己的游戏、看电影很不爽。那么遇到这样的问题怎么办呢?下面&#xff0c;就给大家介绍Win7系统局域网抢网…

win7打印机提示无法保存设置错误0x00006cc的处理方法

win7允许快速连接共享打印机&#xff0c;这让用户少了不少设置烦恼&#xff0c;那如果在打印机的快速设置中提示错误0x00006cc代码要怎么解决呢?快跟小编一起来看看win7打印机提示无法保存设置错误0x00006cc的处理方法吧。 win7打印机提示无法保存设置错误0x00006cc的处理方法…

磁卡、ID卡、IC卡、M1卡、CPU卡的理解区分

一、磁卡 磁卡是在一张塑料片上均匀地涂布上一层磁性微 粒材料制成的。 刚生产出来的磁卡上面的磁性微粒是不显磁性的&#xff0c; 这样的磁卡就象一张白纸&#xff0c; 人们需要在磁卡里输入一些信息才能使用。 那么信息是怎样被记录的呢&#xff1f;这就需要纪录磁头 的帮助…

U盘装win7系统出现question(1808)的原因与解决方法

U盘装系统是很多用户和电脑城装机员的首选&#xff0c;这种方法简单快捷&#xff0c;一学就会。但也有用户在安装系统过程中会碰到一些问题&#xff0c;question(1808)便是常见问题之一。这是什么原因呢?下面我们就一起来看看U盘装win7系统出现question(1808)的原因与解决方法…

软考计算机基础:存储系统

软考计算机存储系统笔记&#xff1a; 存储器分类&#xff1a; 1、按存储位置分为内存和外存&#xff1b; 2、按存储材料分为磁存储&#xff08;使用磁存储介质&#xff09;、半导体存储&#xff08;分为双极型和MOS型&#xff0c;根据数据是否需要刷新可以分为静态SRAM存储器…

Win7系统组策略怎么打开 打开组策略的几种方法

在很多情况下&#xff0c;我们都会用到组策略编辑器来对电脑进行一些高级的设置&#xff0c;组策略的作用就是将管理员为用户和计算机定义并控制程序、网络资源及操作系统行为的主要工具。那么&#xff0c;在Win7系统下&#xff0c;我们要怎么打开组策略呢?下面&#xff0c;小…

vscode统计代码行数,前端开发配置、快捷键使用

1、统计代码行数 使用场景是项目年终统计行数。 实现&#xff1a;在需要统计得文件夹右键“在文件夹中查找“ &#xff0c;后输入筛选得正则表达式 ^b*[^:b#/].*$ (注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下&#xff0c;便于自己以后快速…

360下载器怎么打开 360下载器使用方法

360下载器怎么打开?360下载器是360安全浏览器极速浏览器中的一个下载组件&#xff0c;组件中包含了迅雷下载支持&#xff0c;所以下载文件的速度比使用ie自带的下载器会快很多。不少刚接触360安全浏览器的用户反应在使用360安全浏览器下载文件程序之后无法找到下载器所在位置&…

vue-cli打包后怎么修改服务器地址实践有效

前言&#xff1a;公司vue项目使用 npm run build 打包生成dist文件部署后&#xff0c;当需要修改服务器端地址时候就又需要重新配置url并打包部署&#xff0c;为简化部署测试工作&#xff0c;想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。 项目基于vu…

干净高效的搜索引擎

找一个干净好用的搜索引擎&#xff0c;好文转载备忘 为什么不用百度搜索引擎&#xff0c;估计一百个人会有一百个理由。 百度最让人诟病的还是它的竞价排名&#xff0c;其实要赚钱无可厚非&#xff0c;但这吃相……前几天看到知乎上有人发了张百度和谷歌搜索的对比图&#xf…

手机360浏览器怎么清空历史记录 手机360浏览器历史记录清空方法分享

任何一款浏览器产品在使用一段时间后都会出现历史记录&#xff0c;手机360浏览器自然也不能例外。而这些历史记录如果长期不清理的话&#xff0c;则导致手机越来越卡!那么&#xff0c;手机360浏览器怎么清空历史记录?不清楚具体操作的朋友&#xff0c;可以参考一下小编分享的方…

vue使用class添加动态类

<template><d2-container><h3>class使用测试页面</h3><p :class"1 < 2 ? red-font : blue-font">使用三元表达式;</p><p :class"[red-font,blue-bg]">使用数组包含多个类名;</p><p :class"{r…

守塔人奥列

“在这个世界里&#xff0c;事情不是上升&#xff0c;就是下降。不是不降&#xff0c;就是上升!我现在不能再进一步向上爬了。上升和下降&#xff0c;下降和上升&#xff0c;大多数的人都有这一套经验。归根结底&#xff0c;我们最后都要成为守塔人&#xff0c;从一个高处来观察…

vue图片加载失败使用默认图片,el-image支持懒加载,自定义占位、加载失败等

<template><d2-container><h3>image加载失败使用默认图片</h3><img src""alt"test1.png":onerror"errorImg" /><hr><h3>el-image懒加载、大图预览、加载占位、加载失败、</h3><div class&qu…

win7系统开机蓝屏提示hardware Monitor的解决方法

电脑蓝屏是使用过程中比较常见的问题&#xff0c;出现这种状况&#xff0c;系统一般会将错误信息显示在屏幕上&#xff0c;我们只需根据系统错误代码提示&#xff0c;找出问题根源&#xff0c;再对症下药就可以了。下面小编就来教大家win7系统开机蓝屏提示hardware Monitor的解…

el-table表格在表头和数据行添加图标、处理数据

通过header插槽自定义表头&#xff1a; <template slot"header" slot-scope"scope">... </template>可以通过scope.row.columnName 获取单元项数据进行数据处理&#xff1a; <template slot-scope"scope"><span :class&…

U盘装win7系统出现question(1808)的解决方法

U盘装系统是很多用户和电脑城装机员的首选&#xff0c;这种方法简单快捷&#xff0c;一学就会。但也有用户在安装系统过程中会碰到一些问题&#xff0c;question(1808)便是常见问题之一。这是什么原因呢?下面我们就一起来看看U盘装win7系统出现question(1808)的解决方法吧。 …

js数组遍历和对象遍历

针对js各种遍历作一个总结分析&#xff0c;从类型用处&#xff1a;分数组遍历和对象遍历&#xff1b;还有性能&#xff0c;优缺点等。 JS数组遍历&#xff1a; 1&#xff0c;普通for循环&#xff0c;经常用的数组遍历 var arr [1,2,0,3,9];for ( var i 0; i <arr.length…