Detailed explanation of several methods of deduplication in Javascript array

Array deduplication

1 Double-layer for loop (similar to the double-layer loop writing of bubble sort)
2 Loops and indexof, loops and includes
3. Use object attributes to remove duplicates
4 ES6 Set
5 ES6 Array. prototype. filter()
6 ES6 Array. prototype. reduce()

Summarize

Array deduplication

1 Double-layer for loop (similar to the double-layer loop writing of bubble sort)

var arr = [2,3,4,2,34,21,1,12,3,4,1]
for(var i =0;i<arr.length;i++){
    //First level: Get an element in arr each time through the loop for(var j=i+1;j<arr.length;j++){
        //Second level: Each element obtained is compared with the elements after each element obtained in sequence (because the first one should be compared from the second one, the second one should be compared from the third one, and so on, so j here should be 1 greater than i, that is, j=i+1)
    	if (arr[i] === arr[j]){
            //If they are the same, delete the following elements arr.splice(j,1)
    	}
    }
}
//arr:[1, 2, 3, 4, 12, 21, 34]

2 Loops and indexof, loops and includes

Create a new array, loop through the old array, and see if the element in each loop exists in the new array. If not, add the current element to the new array.

//indexof
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if (arr2.indexOf(e)==-1){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

//includes
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(!arr2.includes(e)){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

3. Use object attributes to remove duplicates

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var obj = {};
arr.forEach((e,i)=>{
    obj[arr[i]] = "abc";   
});
var arr2 = Object.keys(obj)
console.log(arr2)
//arr2:["1", "2", "3", "4", "12", "21", "34"]
var arr3 = arr2.map(e => ~~e )
//arr3:[1, 2, 3, 4, 12, 21, 34]
//Note that this method not only rearranges the array but also changes the type of elements in the array

~ is the bitwise negation operator in JS, ~~ means performing bitwise negation twice, which actually keeps the original value. However, please note that although it is the original value, performing this operation on a Boolean variable will convert it into the corresponding numeric variable, that is, ~~true === 1, ~~false === 0.

4 ES6 Set

ES6 provides a new data structure Set. It is similar to an array, but the member values are unique and there are no duplicate values.

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr1 = [...new Set(arr)]
console.log(arr1)
//arr1:[1, 2, 3, 4, 12, 21, 34]

5 ES6 Array. prototype. filter()

Note: When indexOf searches for an element in an array, it returns the index of the first element that meets the criteria.

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.filter((e,i)=>{
    // Check whether the first index position of the element in each loop (the position returned by indexOf) and the index of the element in each loop (i in each filter loop) are consistent. If they are consistent, it means that it is the first one that meets the conditions and will not be filtered out.
    return arr.indexOf(e)==i;
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

6 ES6 Array. prototype. reduce()

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.reduce((pre,e)=>{
    //Of course, you can also use indexOf here to determine whether pre.includes(e) exists?pre:pre.push(e);
    return pre
},[])
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

In-depth study of JavaScript array deduplication problem
JavaScript array deduplication solution
Detailed explanation of JavaScript array deduplication
JavaScript commonly used array deduplication actual combat source code
Examples and comparison of 3 methods for deduplication of JS object arrays
js converts a multidimensional array into a one-dimensional array and then reorders it
Detailed discussion of several methods for deduplicating JavaScript arrays

<<: Implementation of select multiple data loading optimization in Element

>>: Implementation of mysql split function separated by commas