8種常用陣列去重方法
阿新 • • 發佈:2019-03-09
第一種 【兩個 for 迴圈】
思路:
- 新建一個為空的結果陣列
- 外層 for 遍歷原陣列,內層迴圈遍歷返回陣列
- 判斷內層迴圈陣列當前元素和外層陣列元素的值是否相等,是?退出內層迴圈
- 經過第二部後,此時內層迴圈陣列的索引值和返回陣列的長度正好相等,外層陣列元素也是唯一的。
/** * 【1】2個for迴圈去重 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */ function unique1(arr) { //返回陣列 var arr2 = []; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr2.length; j++) { //返回陣列和運算元組的值相等,結束迴圈,此時的j值剛好和返回陣列的長度相等 if (arr2[j] === arr[i]) { break; } } //返回陣列和j值相等,則插入該值 if (arr2.length === j) { arr2.push(arr[i]); } } return arr2; }
第二種 【indexOf 陣列去重】
思路:
- 新建一個空的結果陣列
- for 迴圈原陣列
- 判斷結果陣列是否存在當前元素,存在不作操作,不存在壓入結果陣列
/** * 【2】indexOf陣列去重 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */ function unique2(arr) { //返回的陣列 var arr2 = []; for (var i = 0; i < arr.length; i++) { //判斷arr2中是否存在arr[i]值,存在不作任何操作,不存在插入該值 if (arr2.indexOf(arr[i], 0) === -1) { arr2.push(arr[i]); } } return arr2; }
第三種 【filter 去重】
思路:
- 使用 filter 返回一個新陣列
- 返回滿足:當前元素在原陣列中的第一個索引等於當前索引值,則返回當前元素
/** * 【3】filter去重【filter返回一個新陣列】 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */ function unique3(arr) { return arr.filter(function(item, index, arr) { //如果當前元素在原陣列中的第一個索引等於當前索引值,則返回當前元素 return arr.indexOf(item, 0) === index; }); }
第四種 【先排序後去重】
思路:
- 新建一個空的結果陣列
- 對原陣列先排序,排序後的陣列,相等元素緊鄰排序
- 判斷相鄰陣列元素是否相等或者是否為第一個陣列元素,是壓入結果陣列
/**
* 【4】先排序後去重
*
* @param {any} arr
* @returns ["1", 1, 13, "2", 2, 3]
*/
function unique4(arr) {
//陣列排序
var arr = arr.sort();
//結果陣列
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
//第一個陣列或者先一個數組值不等於當前陣列值,插入該元素
if (i < 1 || arr[i - 1] !== arr[i]) {
arr2.push(arr[i]);
}
}
return arr2;
}
第五種 【sort+filter】
思路:思路就是對第三和第四種方法的結合啦,道理一樣。
/**
* 【5】sort+filter優化【4】方法
*
* @param {any} arr
* @returns ["1", 1, 13, "2", 2, 3]
*/
function unique5(arr) {
return arr.sort().filter(function(item, index, arr) {
return item < 1 || arr[index - 1] !== arr[index];
});
}
第六種 【hasOwnProperty】
思路:這種方法主要是利用物件 hasOwnProperty 判斷是否存在物件屬性
/**
* 【6】hasOwnProperty【利用:hasWonProperty判斷物件中是否存在對應屬性,存在返回true否則返回false】
*
* @param {any} arr
* @returns [1, 2, 13, 3]
*/
function unique6(arr) {
//建立物件
var obj = {};
return arr.filter(function(item, index, arr) {
//判斷物件是否存在元素,存在給物件賦值,否則返回false
return obj.hasOwnProperty(item) ? false : (obj[item] = item);
});
}
第七種 【利用 es6 的 new set()方法】
思路:利用【new Set(陣列)說明:它時一個類陣列方法,但是其成員值都是唯一的;Array.from()可以蔣其他物件轉化為陣列】
/**
* 【7】es6的new set()
*
* @param {any} arr
* @returns [1, 2, 13, 3, "1", "2"]
*/
function unique7(arr) {
return Array.from(new Set(arr));
}
第八種 【new Set 和 es6 的...運算子】
/**
* 【8】蔣【7】採用...操作符重寫
*
* @param {any} arr
* @returns [1, 2, 13, 3, "1", "2"]
*/
function unique(arr) {
return [...new Set(arr)];
}
好了,寫完後驗證一下是否正確:
window.onload = function() {
var arr = [1, 2, 13, 1, 2, 3, '1', '2'];
console.log(unique(arr));
};
上面的每個方法的返回值就是呼叫當前方