Home > Web Front-end > JS Tutorial > body text

Detailed explanation of javascript array deduplication problem_javascript skills

WBOY
Release: 2016-05-16 15:33:17
Original
1108 people have browsed it

First of all, what I thought of was to create another result array to store unique data in the original array. Traverse the original array and compare it with the elements in the result array to detect duplicates. So, I wrote the following code A:

Array.prototype.clearRepetitionA = function(){
   var result = [];
   var isRepetition;
   for(var i=0; i<this.length; i++){
     isRepetition = false;
     for(var j=0; j<result.length; j++){
       if(this[i] === result[j]){
         isRepetition = true;
         break;
       }
     }
     if(!isRepetition){
       result.push(this[i]);
     }
   }
   return result;
 } 
Copy after login

After finishing writing, I suddenly remembered that the array method indexOf in ECMAScript 5 that I just read a few days ago can retrieve array elements. So I used the indexOf method to replace the second level loop and wrote the following Code B:

Array.prototype.clearRepetitionB = function(){
   var result = [];
   for(var i=0; i<this.length; i++){
     if(result.indexOf(this[i]) == -1){
       result.push(this[i]);
     }
   }
   return result;
 } 
Copy after login

The code suddenly changed from 17 lines to 9 lines, which is much simpler. There is usually more than one way to solve big questions in high school mathematics, and then I continue to think of other methods. The indexOf method means to search for elements with a given value in the entire array, and return the index of the first element found. If not found, it returns -1. The first parameter is the value to be searched, and the second parameter is optional: It specifies an index in the array from which to start the search. If this parameter is omitted, the search starts from the beginning. As soon as I started thinking, I thought that the previous method was to detect whether the value is repeated. Now that we have the indexOf method, we can judge based on the index of the first occurrence of each element being detected and the index value of the element itself. Is it repeated? So, I wrote Code C:

 Array.prototype.clearRepetitionC = function(){
   var result = [this[0]];
   for(var i=1; i<this.length; i++){
     if(this.indexOf(this[i]) == i){
       result.push(this[i]);
     }
   }
   return result;
 } 
Copy after login

After writing this, I continued to think about it, but I really can’t think of any other methods. These three methods are all very basic. So, I went to compare the answers and test myself. When I looked at the answers, I found that I was still too weak, and simple questions still had some fantastic ideas. The following is not what I think, so I won’t talk too much about my mental journey. Without further ado, let’s go directly to the classic answer analysis.
First, let’s talk about a solution that is often said in algorithms to exchange space for time and maintain the formation. Let’s call it Code D:

Array.prototype.clearRepetitionD = function(){
   var result = [];
   var obj = {};
   var key,type;
   for(var i=0; i<this.length; i++){
     key = this[i];
     type = typeof key;
     if(!obj[key]){
       obj[key] = [type];
       result.push(key);
     }else if(obj[key].indexOf(type)){
       obj[key].push(type);
       result.push(key);
     }
   }
   return result;
 } 
Copy after login

In this method, the attribute of an object obj is used to save the value of the element in the original array when traversing the original array. At the same time, the value of this attribute is an array, used to store the type of this attribute. This can distinguish elements similar to the number 1 and the elements of the string '1' in the original array. This method reduces the time spent by the indexOf method among the above three methods by constructing an additional object, which can be said to be more efficient.
If you are satisfied with the above-mentioned efficient method of exchanging space for time and do not continue reading, then you are totally wrong. The best things are always to come. Now the fun begins, there is no doubt that it is Code E:

 Array.prototype.clearRepetitionE = function(){
   var result = [];
   for(var i=0; i<this.length; i++){
     for(var j=i+1; j<this.length; j++){
       if(this[i] === this[j]){
         j = ++i;
       }
     }
     result.push(this[i]);
   }
   return result;
 }
Copy after login

Code D exchanges space for time, and the feeling is just average. What about code E? Is this code wrong? Can this really remove duplicates? Yes, I didn’t understand the code at first. I didn’t understand it until I read the analysis and read it again. Then, readers who don’t understand should read the analysis carefully: the first level traverses the original array from front to back, and the second level loop detects whether each element is repeated with the element after it. If there are repeated elements after it, Skip it; if all elements after this element are unique, add it to the resulting array. The idea of ​​implementing this method is to obtain the rightmost value without duplication and add it to the result array. Compared with the first method, this also optimizes the second-level loop and is more efficient than it. However, in the result array of this method The order of the elements is different from the order of the elements in the original array.

After reading the analysis of Code E, have you already given your thumbs up and looked at me with admiration? (Don’t give these flowers and honors to me, they should go to the master who wrote this method). Let’s talk about the last method: That is to sort first and then remove duplicates. As per the old rules, it’s called Code F:

Array.prototype.clearRepetitionF = function(){
   this.sort();
   var result = [this[0]];
   for(var i=1; i<this.length; i++){
     if(this[i] !== result[result.length-1]){
       result.push(this[i]);
     }
   }
   return result;
 } 
Copy after login

This first uses the array sorting method sort to sort the array elements, and then performs the duplication work.

The above is a step-by-step study on the problem of javascript array deduplication. The code is constantly improved. A total of six pieces of code are shared. I hope everyone will study hard and gain something.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!