方法一
原理:利用双层循环将相邻元素 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