Detailed explanation of several methods of deduplication in Javascript array

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)

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

Recommend

Detailed explanation of virtual DOM in Vue source code analysis

Why do we need virtual dom? Virtual DOM is design...

How to track users with JS

Table of contents 1. Synchronous AJAX 2. Asynchro...

14 practical experiences on reducing SCSS style code by 50%

Preface Sass is an extension of the CSS3 language...

Install Docker on Linux (very simple installation method)

I have been quite free recently. I have been doin...

Use of LRU algorithm in Vue built-in component keep-alive

Table of contents The use of Vue's keep-alive...

Vue Router vue-router detailed explanation guide

Chinese documentation: https://router.vuejs.org/z...

Detailed explanation of vue keepAlive cache clearing problem case

Keepalive is often used for caching in Vue projec...

Automatically log out inactive users after login timeout in Linux

Method 1: Modify the .bashrc or .bash_profile fil...

mysql5.6.8 source code installation process

Kernel: [root@opop ~]# cat /etc/centos-release Ce...

MySQL 5.7 generated column usage example analysis

This article uses examples to illustrate the usag...

How to modify the port mapping of a running Docker container

Preface When docker run creates and runs a contai...