In-depth study of JavaScript array deduplication problem

Preface 👀

Array deduplication should be a very common problem. Since it is common, we should learn about it!

Lest I be embarrassed if I don't know how to do it~ Hehe

Start researching 🐱‍🏍

Original 🧶

To deduplicate an array, my initial idea was this: define a new array, complete two layers of for loops, if the data appears for the first time, push it to the new array, if it is repeated, break it, use the value of j to be equal to the length of res to determine that the data is unique, and finally return the new array.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		for(var j = 0; j < res.length; j ++){
			if(arr[i] === res[j]){
				break
			}
		}
		// If the data appears for the first time, then after executing the above for statement, the value of j should be equal to the length of res if(j === res.length){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

Optimizing the original method using indexOf ✍

Let's first take a brief look at indexOf:

The indexOf(item,start) method returns the position of a specified element in an array.

This method will search the array from beginning to end to see if it contains the corresponding element. The search starts at the start of the array or at the beginning of the array (when the start parameter is not specified). If an item is found, the position of the first occurrence of item is returned. The starting position has an index of 0.

If the specified element is not found in the array, -1 is returned.

Seeing this, everyone understands what we are taking advantage of, right? Yes, it is the bold sentence: If the specified element is not found in the array, -1 is returned .

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		if (res.indexOf(arr[i]) === -1) {
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

Optimize again, filter method 🎉

As the name implies, filter means filtering. This method creates a new array. The elements in the new array are obtained by checking all elements that meet the conditions in the specified array.

Idea: Use filter instead of a layer of loop in conjunction with indexOf to achieve the filtering effect and directly return the deduplicated array.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.filter(function(item,index,arr){
		return arr.indexOf(item) === index
	})
	return res;
}
console.log(unique(arr));

Change of thinking? Become an ordered array ✨

I wonder if those of you who have been playing Lecture Hall for a few days have had this feeling. When you see an array in a question, your eyes immediately glance forward to see if it is an ordered array or an unordered array.

Back to this question, we make the array to be deduplicated ordered, and the repeated data must be next to each other. Use a variable to store the previous element value, and then loop to determine whether the current value is the same as the previous element value. If not, add it to res.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	var pre
	arr = arr.sort()
	for(var i = 0; i < arr.length; i++){
		if(!i || pre !== arr[i]){
			res.push(arr[i])
		}
		pre = arr[i]
	}
	return res;
}

console.log(unique(arr));

Optimize again, filter🧨

I just realized that filter can also rewrite the sorting here to make it more concise. Let's look at the code directly:

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.sort().filter(function(item,index,arr){
		return !index || item !== arr[index - 1]
	})
	return res;
}

console.log(unique(arr));

ES6, Set is coming 🧸

ES6 brings us many benefits, among which map and set are particularly outstanding.

Map objects store key-value pairs. Any value (object or primitive) can be used as a key or a value.

The Set object allows you to store unique values ​​of any type, whether primitive values ​​or object references.

So we can use this feature of Set to perform deduplication processing.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

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

console.log(unique(arr));

Note: Set is an object, so it must be converted into an array for return.

If you understand destructuring assignment, you can simplify it a little bit more🧵

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

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

console.log(unique(arr));

If you want to know more about destructuring assignment, you can also read this first: Understanding and Application of Destructuring Operators

Previous study, recorded notes 🎨

Keep on being great (arrow functions) 🏆

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...new Set(arr)]
console.log(unique(arr));

Finally 📖

From several lines of code at the beginning to one line of code at the end using arrow functions, it is enough to show that only by continuous learning can we write more elegant and concise code.

This is the end of this article about JavaScript array deduplication. For more relevant JavaScript array deduplication content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!