方法一

原理：利用雙層循環將相鄰元素? 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数组去重的多种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。