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

In-depth understanding of this in JavaScript

In-depth understanding of this in Js JavaScript s...

Detailed explanation of Linux kernel macro Container_Of

Table of contents 1. How are structures stored in...

WeChat applet custom menu navigation to achieve staircase effect

Design Intentions When developing a page, you oft...

How to switch directories efficiently in Linux

When it comes to switching directories under Linu...

MySQL 5.7.18 Installer installation download graphic tutorial

This article records the detailed installation tu...

HTML checkbox Click the description text to select/uncheck the state

In web development, since the checkbox is small an...

Detailed explanation of MySQL database Event scheduled execution tasks

1. Background As the project's business conti...

js implementation of verification code case

This article example shares the specific code of ...

Enabling or disabling GTID mode in MySQL online

Table of contents Basic Overview Enable GTID onli...

Vue+thinkphp5.1+axios to realize file upload

This article shares with you how to use thinkphp5...

A brief discussion on the binary family of JS

Table of contents Overview Blob Blob in Action Bl...

TypeScript Mapping Type Details

Table of contents 1. Mapped Types 2. Mapping Modi...