數組去重的方法

一、利用ES6 Set去重（ES6中最常用）

Set 不包含重復元素的值的集合 Map 雙列集合 鍵值對

與object的區別 :
object中的key只能是string類型 而Map是可以任意數據類型

var array = [1,2,3,4,5,1,2,3,4,5]; function uniq1(array) {// return [...new Set(array)]; // new Set(array) => 數組 [...數組] Array.from(set)return [...new Set(array)];//Set數據結構轉換成數組 } function uniq2(array) {//Set數據結構轉換成數組 ES6數組的新增方法 Array.from() Array.of()return Array.from(new Set(array)); } console.log(uniq2(array))

打印結果：

不考慮兼容性，這種去重的方法代碼最少，這種方法還無法去掉"{}"空對象，后面的高階方法會添加去掉重復"{}"的方法

二、利用for嵌套for，然后splice去重（ES5中最常用）

var array = [1,1,'true',true,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(array) {for(var i = 0; i < array.length; i++) {for(var j = i+1; j < array.length; j++) {if(array[i] == array[j]) {array.splice(j,1);j--;}}}return array; } console.log(unique(array)); // NaN和{}沒有去重，兩個null直接消失了

打印結果：

三、利用indexOf去重

var array = [1,2,3,4,5,1,2,3,4,5]; function uniq3(arry) {var result = [];//臨時數組 用來存放不包含重復元素的數組for (var i = 0; i < arry.length; i++) { if (result.indexOf(arry[i]) === -1) {//如 result 中沒有 arry[i],則添加到數組中result.push(arry[i])}}return result; } console.log(uniq3(array))

打印結果：

新建一個空的結果數組，for循環原數組，判斷結果數組是否存在當前元素，如果有相同的值則跳過，不相同則push進數組

四、利用sort()

var array = [1,1,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(array) {if(!Array.isArray(array)) {console.log('type error');return;}arr = array.sort();var arrys = [arr[0]];for(var i = 1; i < array.length; i++) {if(array[i] != array[i-1]) {arrys.push(array[i])}}return arrys } console.log(unique(array)); // NaN、{} 沒有去重

打印結果：

利用sort()排序方法，然后根據排序后的結果進行遍歷及相鄰元素比對

五、利用對象的屬性不能相同的特點點進行去重（這種數組去重的方法有問題，不建議用，有待改進）

var array = [1,1,'true',true,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(arr) {if(!Array.isArray(arr)) {console.log('type error!');return}var array = [];var obj = {};for(var i = 0; i < arr.length; i++) {if(!obj [arr[i]]) {array.push(arr[i]);obj[arr[i]] = 1}else {obj[arr[i]]++}}return array;}console.log(unique(array));

六、利用Es7 includes

var array = [1,2,3,4,5,1,2,3,4,5]; function uniq4(arry) {var result = [];for (var i = 0; i < arry.length; i++) {if (!result.includes(arry[i])) {//如 result 中沒有 arry[i],則添加到數組中result.push(arry[i])}}return result; } console.log(uniq4(array))

打印結果：

七、利用hasOwnProperty

var array = [1,1,'true',true,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(arr) {var obj = {};return arr.filter(function(item,index,arr) {return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)}) } console.log(unique(array)); // 所有的都去重了

打印結果：

利用hasOwnProperty判斷是否存在對象屬性

八、利用filter

var array = [1,1,'true',true,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(arr) {return arr.filter(function(item,index,arr) {// 當前元素，在原始數組中的第一個索引==當前索引值，否則返回當前元素return arr.indexOf(item,0) === index;}) } console.log(unique(array));

九、利用遞歸去重

var array = [1,1,'true',true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0,0,'a','a',{},{}] function unique(arr) {var array = arr;var len = array.length;// 排序后更方便去重array.sort(function(a,b) { return a - b;})function loop(index) {if(index >= 1) {if(array[index] === array[index-1]) {array.splice(index,1)}loop(index-1); // 遞歸loop，然后數組去重 }}loop(len-1);return array; } console.log(unique(array)); // NaN、{} 沒有去重

打印結果：

十、利用Map數據結構去重

var array = [1,2,3,4,5,1,2,3,4,5]; function uniq6(arry) {//Map與Object的區別 Object里的屬性是字符串 Map里的key可以是任意的數據類型 key:valuelet map = new Map();let result = new Array(); // 數組用于返回結果for (let i = 0; i < arry.length; i++) {if (map.has(arry[i])) { // 如果有該key值map.set(arry[i], true);} else { // 如果沒有該key值map.set(arry[i], false); result.push(arry[i]);}}return result; } console.log(uniq6(array))

創建一個空Map數據結構，遍歷需要去重的數組，把數組的每一個元素作為key存到Map中，由于Map中不會出現相同的key值，所以最終得到的就是去重后的結果

十一、利用 reduce （適合累加 累乘）

var array = [1,2,3,4,5,1,2,3,4,5]; function uniq5(arry) {return arry.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []); } console.log(uniq5(array))

打印結果：

十二、[…new Set(arr)]

[...new Set(arr)] // 代碼就是這么少（其實嚴格來說并不算是一種，相對于第一種方法來說只是簡化了代碼）

總結

以上是生活随笔為你收集整理的JS----JavaScript数组去重（12种方法，史上最全）的全部內容，希望文章能夠幫你解決所遇到的問題。

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