Six ways to deduplicate JavaScript arrays

1. The simplest way to remove weight: double for loop

When I think of deduplication, the first thing I think ofDouble for loop, just traverse two layers and compare, but it should be noted that the array is usedspliceAfter deleting duplicates, you need to reduce the index of the second layer loop by 1, otherwise it will occur.The problem of array collapse。

function unique(arr) {
	for (let i = 0; i &lt; ; i++) {
		for (let j = i + 1; j &lt; ; j++) {
			if (arr[i] === arr[j]) {
				(j, 1);
				j--; // Note: Since elements are deleted, j needs to be subtracted to avoid missing item j's check			}
		}
	}
	return arr;
}
const arr = [1,1,2,2,3,4,4,5,5,6];
(unique(arr));
// Output: [ 1, 2, 3, 4, 5, 6 ]

2. The most time-saving deduplication: obj/Map storage + for loop

Because of the objectObjectofkeyThe value is unique, so we can use this feature to deduplicate. The core idea is to useObjectorMapTake the traversed items askeyStore to an object orMapIf you encounter an existing onekey, it means that a duplicate item has appeared, just ignore this item.

function unique(arr) {
	const obj = {}; // You can change it to Map here	const newArr = [];
	for (let i = 0; i &lt; ; i++) {
		const item = arr[i];
		if (!obj[item]) {
			obj[item] = 1;
			(item);
		}
	}
	return newArr;
}

This is also typicalThe method of changing space and time, the time complexity can be reduced from O(n²) to O(n), and the object storage can be used to achieve the effect of changing space and saving execution time.

3. The best understanding of deduplication: indexOf + lastIndexOf

JavaScriptProvided inindexOfandlastIndexOfTwo methods: take the target item from the array respectivelyItem 1andThe last itemStart searching, and after finding it, it will return the corresponding index value. If a certain item is usedindexOfandlastIndexOfIf the index found is the same, it proves that there is no duplicate in the item, otherwise there will be duplicates.

This way of deduplication should beThe best understanding. But be aware that it is also used heresplice, need to be careful to preventArray collapseThe problem.

function unique(arr) {
	for (let i = 0; i &lt; ; i++) {
		if ((arr[i]) !== (arr[i])) {
			(i, 1);
			i--; // Note: Since elements are deleted, i need to be subtracted by one to avoid missing item i check		}
	}
	return arr;
}

4. The simplest deduplication: expand operator + Set

useES6The new feature ofExpand operator + setIt should be the simplest way to deduplicate, and the number of characters written is the smallest.

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

5. The most interesting deduplication: filter + indexOf deduplication

usefilter + indeOfIn fact, it can also be used to deduplicate it, and it is done with one line of code, which is very interesting.

The core idea is to use itfilterWhen traversing, useindexOfGo to find the index of the current traversal item, if the index found is as close as this timefiltertraversedindexThe same thing means that there is no duplicate item before the current item, so the item needs to bereserve, otherwise it is necessaryExclude, and just rightfilterComes with filtering function, returntrueKeep this item and returnfalseExclude this item.

function unique(arr) {
  return ((item, index) =&gt; (item) === index);
}
const arr = [1,1,2,2,3,4,4,5,5,6];
(unique(arr));
// Output: [ 1, 2, 3, 4, 5, 6 ]

6. The most slutty weight removal: + Set +

Unexpectedly, use it + Set + It can actually be deduplication, this should beThe most slutty way to remove weight, and naturallySupports deduplication of objects storing arrays。

The core idea of deduplication is as follows:

useYou can serialize the objects or ordinary values stored in each item in the array and convert the original array into an array of strings;
useSetDeduplication of string arrays;
useDeserialize each item in the array.

Note here that if the key and value stored in both objects are the same, the results of their serialization are the same, so this method naturally supports deduplication of objects.

function unique(arr) {
    return [...new Set((t =&gt; (t)))].map(s =&gt; (s));
}
const arr = [1,1,2,2,3,4,4,5,5,6];
const arr1 = [{ a:1 }, { a:1 }, { a:2 }, { a:2 }, { a:3 }, { a:3 }, { a:4 }, { a:4 }, { a:5 }, { a:5 } ]
(unique(arr));
(unique(arr1));
/**
  * Print result:
  * [ 1, 2, 3, 4, 5, 6 ]
  * [ { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 } ]
  */

The above are 6 typesJavaScriptThe most common way to remove weight is the fourth type, that is,Expand operator + SetI wonder which method of deduplication is preferred in actual development, or are there any other better method of deduplication?

This is the end of this article about six ways to deduplicate JavaScript arrays. For more related content on deduplication of JavaScript arrays, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!