Array deduplication of JavaScript learning notes, javascript learning notes

Array deduplication of JavaScript learning notes, javascript learning notes

Recommended reading:Add, delete, modify, and query the array of JavaScript learning notes

Array Summation Method for JavaScript learning notes

Random sorting of JavaScript learning notes Array

In other words, the interviewer often asks the JavaScript array de-duplication question. Recently, I just learned about the JavaScript array and took the opportunity to sort out some methods for de-duplication of JavaScript arrays.

The following array deduplication methods are collected and sorted by yourself. If you have any errors, you may want to correct them.

Dual Loop deduplication

This method uses two for loops for traversal. The entire idea is:

Create an empty array to store the de-duplicated Array

The for loop outside is used to traverse the original array. Each time an element is retrieved from the array, it is compared with the result array.
If the elements retrieved from the original array are the same as those in the result array, the loop exists. Otherwise, the elements are saved in the result array.

The Code is as follows:

Array. prototype. unique1 = function () {// construct a new array and store the result var newArray = [this [0]; // for loop, retrieve an element from the original array each time // compare the element loop with the result array (var I = 1; I <this. length; I ++) {var repeat = false; for (var j = 0; j <newArray. length; j ++) {// The elements retrieved from the original array are the same as those in the result array. if (this [I] = newArray [j]) {repeat = true; break;} if (! Repeat) {// if this element does not exist in the result array, it is stored in the result array newArray. push (this [I]) ;}} return newArray ;}

Suppose we have an array like this:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

It is said that this method is time-consuming and cost-effective. Perform a simple test (the test method is overwrite ):

Function test () {var arr = []; for (var I = 0; I <1000000; I ++) {arr. push (Math. round (Math. random (I) * 10000);} doTest (arr, 1);} function doTest (arr, n) {var tStart = (new Date ()). getTime (); var re = arr. unique1 (); var tEnd = (new Date ()). getTime (); console. log (the usage time of the 'dual loop deduplication method is: '+ (tEnd-tStart) + 'ms'); return re;} test ();

Run the above Code on the Chrome controller. The time required to test Dual Loop deduplication is 11031 ms.

The preceding method can be simulated using the forEach () method and indexOf () method:

function unique1() {var newArray = [];this.forEach(function (index) {if (newArray.indexOf(index) == -1) {newArray.push(index);}});return newArray;}

It is called through unique1.apply (arr) or unique1.call (arr. However, this method is much more efficient. In the same test code above, the time is 5423 ms, almost half faster.

Sort traversal deduplication

Use the sort () method to sort the original array, traverse the array after sorting, and check whether the I element in the array is the same as the last element in the result array. If they are different, the elements are placed in the result array.

Array. prototype. unique2 = function () {// The original array first sorts this. sort (); // construct a new array to store the result var newArray = []; for (var I = 1; I <this. length; I ++) {// check whether the I-th element in the original number is the same as the last element in the result. // because of sorting, so the duplicate element will be in the adjacent position if (this [I]! = NewArray [newArray. length-1]) {// if different, place the elements in the result array newArray. push (this [I]);} return newArray ;}

For example:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

This method has two features:

The array after deduplication is sorted, mainly because the original number is sorted before deduplication.

The de-duplicated array cannot be distinguished from numeric characters with the same number, such as '1' and 1

Using the same method, the test took 1232 ms.

Object key-Value Pair Method

The implementation idea of this de-duplication method is:

Create a JavaScript Object and a new array

Use the for loop to traverse the original array, and retrieve an element and compare it with the key of the JavaScript Object each time.

If not, push the value of the element stored in the object into the result array, and set the value of this attribute name in the object to 1.

The Code is as follows:

Array. prototype. unique3 = function () {// construct a new array and store the result var newArray = []; // create an empty object var object ={}; // for loop, compare an element with an object. // If the element is not repeated, store it in the result number. // the content of the element is used as an attribute of the object, and assign a value of 1, // save it to the object created in step 1 for (var I = 0; I <this. length; I ++) {// checks whether the object contains the value of the retrieved element if (! Object [typeof (this [I]) + this [I]) {// if not included, push the value of the elements stored in the object to the newArray In the result array. push (this [I]); // if not included, set the value of this attribute name in the object to 1 object [typeof (this [I]). + this [I] = 1 ;}} return newArray ;}

Run the preceding example:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Similarly, different keys may be mistaken for the same; for example, a [1], a ["1"]. This method takes 621 ms. This method takes the shortest time, but occupies a larger memory.

In addition to the above methods, there are several other methods as follows:

// Method 4 Array. prototype. unique4 = function () {// construct a new array and store the result var newArray = []; // traverse the entire array for (var I = 0; I <this. length; I ++) {// indicates whether repeated Values exist for (j = I + 1; j <this. length; j ++) {// if the same element exists, the auto-incrementing I variable jumps out of the I loop if (this [I] = this [j]) {j = ++ I ;}}// if there is no same element, push the element into the result array newArray. push (this [I]);} return newArray ;}

Chrome test results

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

Similarly, 1 and '1' cannot be distinguished.

// Method 5 Array. prototype. unique5 = function () {// construct a new array and store the result var newArray = []; // traverse the entire array for (var I = 0; I <this. length; I ++) {// If the I-th value of the current array is saved to a temporary array, skip var index = this [I]; // if the array item is not in the result array, push this value into the result array if (newArray. indexOf (index) ===- 1) {newArray. push (index) ;}} return newArray ;}

Chrome test results:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Similarly, similar to 1 and '1' cannot be distinguished. The time consumed is 14361 ms.

// Method 6 Array. prototype. unique6 = function () {return this. reduce (function (newArray, index) {if (newArray. indexOf (index) <0) {newArray. push (index) ;}return newArray ;}, []);}

The test results are as follows:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

The time consumed is 16490 ms.

// Method 7 Array. prototype. unique7 = function () {var newArray; newArray = this. filter (function (ele, I, arr) {return arr. indexOf (ele) === I;}); return newArray ;}

Test results:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

The time consumed is 13201 ms.

Although there are many methods, the following method is an excellent solution:

Array. prototype. unique3 = function () {// construct a new array and store the result var newArray = []; // create an empty object var object ={}; // for loop, compare an element with an object. // If the element is not repeated, store it in the result number. // the content of the element is used as an attribute of the object, and assign a value of 1, // save it to the object created in step 1 for (var I = 0; I <this. length; I ++) {// checks whether the object contains the value of the retrieved element if (! Object [typeof (this [I]) + this [I]) {// if not included, push the value of the elements stored in the object to the newArray In the result array. push (this [I]); // if not included, set the value of this attribute name in the object to 1 object [typeof (this [I]). + this [I] = 1 ;}} return newArray ;}

But in ES6, there are simpler and more optimized solutions, such:

// ES6function unique (arr) {const seen = new Map()return arr.filter((a) => !seen.has(a) && seen.set(a, 1))}// orfunction unique (arr) {return Array.from(new Set(arr))}

The above section describes how to remove duplicates from the array of JavaScript learning notes. I hope this will help you!

Articles you may be interested in:

• Implementation Code for repeated entries in javascript numeric Array
• Two common methods and code for de-duplicating javascript Arrays
• Performance Test and comparison of three methods for removing javascript Arrays
• Js retrieves the intersection of two arrays | difference set | Union set | supplement set | deduplication sample code
• Detailed overview of sorting and array deduplication in js Algorithms
• Js implements array deduplication to determine whether the array and object content are the same
• Two array de-duplicated JS Code
• Summary of three common methods of js array deduplication
• Summary of js array deduplication