1. 程式人生 > 其它 >JavaScript中 陣列去重的一些方法

JavaScript中 陣列去重的一些方法

  1. for迴圈(兩次巢狀) + 新陣列

    function deduplication(arr) {
    	var flag = 0;
    	// 建立一個新陣列
    	var result = new Array();
    	// 遍歷原陣列
    	for(var i = 0; i < arr.length; i++) {
    		flag = 0;
    		for(var j = 0; j < arr.length; j++) {
    			// 判斷陣列內是否已經存在當前元素
    			if(result[j] == arr[i]) {
    				// 相同值跳過
    				flag = 1;
    				break;
    			}
    		}
    		// 不同值push進新陣列
    		if(flag == 0)
    			result.push(arr[i]);
    	}
    	// 返回新陣列
    	return result;
    }
    

    新建一個空陣列,for迴圈遍歷原陣列,判斷陣列內是否已存在當前元素,如有相同的值則跳過,不同的推入新陣列中,直至原陣列遍歷完,返回新陣列,涉及到多次遍歷,執行時間較長;

  2. for迴圈(兩次巢狀) + splice

    function deduplication(arr) {
    	for (var i = 0; i < arr.length; i++) {
    		for (var j = i + 1; j < arr.length; j++) {
    			if (arr[i] == arr[j]) {
    				//兩者相等時,splice方法刪除第二個
    				arr.splice(j, 1);
    				j--;
    			}
    		}
    	}
    	return arr;
    }
    

    雙層迴圈,外層迴圈元素,內層迴圈時比較值,值相同時,刪除這個值;

  3. for迴圈(一次) + indexOf() + 新陣列

    function deduplication(arr) {
    	// 建立新陣列
    	var result = new Array();
    	for (var i = 0; i < arr.length; i++) {
    		// 判斷新陣列中是否存在當前遍歷元素
    		if (result.indexOf(arr[i]) == -1)
    			// 不存在則push到新陣列中
    			result.push(arr[i]);
    	}
    	// 返回新陣列
    	return result;
    }
    

    對新陣列判定是否有該字元,呼叫 Array.prototype.indexOf 函式,執行時間相對於 方法1

    縮減了很多;

  4. sort方法

    function deduplication(arr) {
    	// 陣列排序
    	arr = arr.sort()
    	var result = [arr[0]];
    	for (var i = 1; i < arr.length; i++) {
    		// 相鄰元素比較
    		if (arr[i] !== arr[i - 1]) {
    			// 相鄰元素不相等push進陣列
    			result.push(arr[i]);
    		}
    	}
    	// 返回新陣列
    	return result;
    }
    

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

  5. 利用Map去重

    function deduplication(arr) {
    	let map = new Map();
    	let result = new Array();
    	for (let i = 0; i < arr.length; i++) {
    		// 如果有該key值
    		if (map.has(arr[i])) {
    			map.set(arr[i], true);
    		} else {
    			// 如果沒有該key值
    			map.set(arr[i], false);
    			result.push(arr[i]);
    		}
    	}
    	// 返回新陣列
    	return result;
    }
    

    利用 ES6 中的 Map 集合替代前面方法中的新陣列,呼叫Map.has替代indexOf()Map.set 替代push(),執行速度比前面的方法都要快;

  6. new Set() + Array.from()

    function deduplication(arr) {
    	return Array.from(new Set(arr));
    }
    

    利用 ES6 中的 Set 集合,Set 集合是一種無重複元素的列表,new Set(arr)會自動剔除重複元素,Array.from(...)將 Set 集合轉換為陣列;

  7. new Set() + …(展開運算子)

    function deduplication(arr) {
    	return [...(new Set(arr))];
    }
    

    思路與方法6一致,只是將 Set 集合轉換為陣列的實現方法從 Array.from(...) 改成了 ...(展開運算子);

  8. for迴圈(一次) + 新物件

    function deduplication(arr) {
    	let obj = {};
    	for (let i = 0; i < arr.length; i++) {
    		if (!obj[arr[i]]) {
    			obj[arr[i]] = 1;
    		}
    	}
    	return Object.keys(obj);;
    }
    

    將建立一個新陣列,改成建立一個新物件,判定物件的 key 值,存在跳過,不存在則將字元以物件的 key 值儲存, 這種方法也是所有方法中執行時間最短的;