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

Js数组去重的多种方法相关推荐

js数组去重（多种方法）
1 // js数组去重 2 Array.prototype.fun1 = function(){ 3 var arr = this, 4 result = [], 5 i, 6 len = arr.l ...
c语言用hash方式数组去重,js数组去重的hash方法
对于 JavaScript 数组去除重复项,现在有多种方法,其中一种是hash,如下: if (!Array.prototype.unique) { Array.prototype.unique = ...
Java数组去重的多种方法,[Java教程]JavaScript常见的五种数组去重的方式
[Java教程]JavaScript常见的五种数组去重的方式 0 2016-12-14 15:00:17 ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 ...
Java数组去重的多种方法
/* 数组去重 1:遍历数组,将元素依次添加进结果集中,如果结果集中已经存在,则不再添加,O(n*n) 2:如果知道元素范围,比如是字母,或者数字在固定范围内,可以采用辅助数组,辅助数组下标是去重数组 ...
整理了js数组去重4种方法
1.利用es6的iterable数据结构set 原理: ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.Set 本身是一个构造函数,用来生成 Set 数据结构. ...
常用的js数组去重的方法
常用的js数组去重的方法 1. 使用for循环去重 2.使用set对象去重 3.使用数组索引indexOf()方法搭配for循环去重 4.使用includes()方法搭配for循环去重 5.使用fif ...
JS数组去重方法记录
js数组去重方法 1.遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组代码如下(示例): function getArray(ar) {va ...
js 简单的数组去重13种方法
js 数组去重十几种数组去重的方法,有的去重构思可以大致相同. 上篇的几种数组去重 https://blog.csdn.net/weixin_47988564/article/details/106 ...
JS数组去重方法小结
JS数组去重看了网上很多数组去重方法,用的比较常见的大概就几种,今天想自己来做一个总结. 部分内容参考该博客 1 . 在原数组上操作(基本方法) 思路:利用循环嵌套,判断数组中每个元素与其后面的元素 ...

Js数组去重的多种方法

方法一

方法二

方法三

方法四

方法五

方法六

方法七

方法八

方法九

方法十

Js数组去重的多种方法相关推荐

最新文章

热门文章