JavaScript學習筆記之數組去重_javascript技巧-js教程-PHP中文網

推薦閱讀：JavaScript學習筆記之數組的增、刪除、改、查

JavaScript學習筆記之數組求和方法

JavaScript學習筆記之數組隨機排序

話說面試常常會碰到面試官會問JavaScript實現數組去重的問題，最近剛好在學習有關於JavaScript數組相關的知識,趁此機會整理了一些有關於JavaScript數組去重的方法。

以下這些陣列去重的方法是自己收集和整理的，如有不對希望指正文中不對之處。

雙重循環去重

這個方法使用了兩個for迴圈做遍歷。整個思路是：

建構一個空數組用來存放去重後的陣列

外面的for迴圈對原數組做遍歷，每次從數組中取出一個元素與結果數組做對比
若原數組取出的元素與結果數組元素相同，則跳出循環;反之則將其存放到結果數組中

程式碼如下:

Array.prototype.unique1 = function () {
// 构建一个新数组，存放结果
var newArray = [this[0]];
// for循环，每次从原数组中取出一个元素
// 用取出的元素循环与结果数组对比
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j=0; j < newArray.length; j++) {
// 原数组取出的元素与结果数组元素相同
if(this[i] == newArray[j]) {
repeat = true;
break;
}
}
if(!repeat) {
// 如果结果数组中没有该元素，则存放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

登入後複製

假設我們有一個這樣的陣列：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];
arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

登入後複製

據說這種方法比較耗時，費性能。簡單做個測驗(測驗方法寫得比較拙逼)：

function test () {
var arr = [];
for (var i = 0; i < 1000000; i++) {
arr.push(Math.round(Math.random(i) * 10000));
}
doTest(arr, 1);
}
function doTest(arr, n) {
var tStart = (new Date()).getTime();
var re = arr.unique1();
var tEnd = (new Date()).getTime();
console.log('双重循环去重方法使用时间是:' + (tEnd - tStart) + 'ms');
return re;
}
test();

登入後複製

在Chrome控制器執行上面的程式碼，測試雙重循環去重所費時間：11031ms。

上面的方法可以使用forEach()方法和indexOf()方法來模擬實作：

function unique1() {
var newArray = [];
this.forEach(function (index) {
if (newArray.indexOf(index) == -1) {
newArray.push(index);
}
});
return newArray;
}

登入後複製

透過unique1.apply(arr)或unique1.call(arr)呼叫。不過這種方法效率要快得多，同樣的上面測試程式碼，所費時間5423ms，幾乎快了一半。

排序遍歷去重

先使用sort()方法對原數組做一個排序，排完序之後對數組做遍歷，並且檢查數組中的第i個元素與結果數組中最後一個元素是否相同。如果不同，則將元素放到結果陣列中。

Array.prototype.unique2 = function () {
// 原数组先排序
this.sort();
// 构建一个新数组存放结果
var newArray = [];
for (var i = 1; i < this.length; i++) {
// 检查原数中的第i个元素与结果中的最后一个元素是否相同
// 因为排序了，所以重复元素会在相邻位置
if(this[i] !== newArray[newArray.length - 1]) {
// 如果不同，将元素放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

登入後複製

例如：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

登入後複製

這種方法有兩個特色：

去重後的陣列會做排序，主要是因為原數在去重前做了排序

去重後的數組，與數字相同的數字字元無法區分，例如'1'和1

使用相同的方法，測驗所費時間：1232ms。

物件鍵值對法

這種去重方法實作思路是：

建立一個JavaScript物件以及新陣列

使用for迴圈遍歷原數組，每次取出一個元素與JavaScript物件的鍵做比較

如果不包含，將存入物件的元素的值推入到結果陣列中,並且將存入object物件中該屬性名的值設為1

程式碼如下:

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

登入後複製

運行前面的範例：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

登入後複製

同樣的，不同的鍵可能會被誤認為一樣；例如： a[1]、a["1"] 。這種方法所費時間：621ms。這種方法所費時間是最短，但就是佔用記憶體大一些。

除了上面幾種方法，還有其他幾種方法如下：

// 方法四
Array.prototype.unique4 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 遍历是否有重复的值
for (j = i + 1; j < this.length; j++) {
// 如果有相同元素，自增i变量，跳出i的循环
if(this[i] === this[j]) {
j = ++i;
}
}
// 如果没有相同元素，将元素推入到结果数组中
newArray.push(this[i]);
}
return newArray;
}

登入後複製

Chrome測試結果

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

登入後複製

同樣的，1和'1'無法區分。

// 方法五
Array.prototype.unique5 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 如果当前数组的第i值保存到临时数组，那么跳过
var index = this[i];
// 如果数组项不在结果数组中，将这个值推入结果数组中
if (newArray.indexOf(index) === -1) {
newArray.push(index);
}
}
return newArray;
}

登入後複製

Chrome測試結果:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

登入後複製

同樣的，類似1和'1'無法區分。所費時間：14361ms。

// 方法六
Array.prototype.unique6 = function () {
return this.reduce(function (newArray, index) {
if(newArray.indexOf(index) < 0) {
newArray.push(index);
}
return newArray;
},[]);
}

登入後複製

測試結果如下：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

登入後複製

所費時間：16490ms。

// 方法七
Array.prototype.unique7 = function(){
var newArray;
newArray = this.filter(function (ele,i,arr) {
return arr.indexOf(ele) === i;
});
return newArray;
}

登入後複製

測試結果：

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

登入後複製

所費時間：13201ms。

方法雖然很多種，但相較下來，以下這種方法是較為優秀的方案：

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

登入後複製

但在ES6去重還有更簡單，更優化的方案，例如：

// ES6
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
// or
function unique (arr) {
return Array.from(new Set(arr))
}

登入後複製

以上所述是小編跟大家介紹的JavaScript學習筆記之數組去重，希望對大家有幫助！