Array deduplication and principle summary

Array deduplication and principle summary

1. Set deduplication principle :

1. Take advantage of the unique and non-repetitive feature of the set element ;
2. arr1 uses the ... spread operator to expand the set collection;
3. arr2 utilizes the new feature of es6 - Array.from( ) : converts an array-like object or traversable object into a real array;

// Set 去重
        let arr = [1, 2, 3, 4, 3, 2];

        // set 去重
        let arr1 = [...new Set(arr)];
        let arr2 = Array.from(new Set(arr));

		console.log('arr1:', arr1);  //[1,2,3,4]
        console.log('arr2:', arr2);  //[1,2,3,4]

2. indexOf deduplication principle

1. The indexOf method of the array can find the index subscript of the first occurrence of the specified element in the array , and return -1 if it does not exist ;
2. arr3 : forEach + indexOf ；
3. arr4 : filter + indexOf filter will not change the original array and will automatically create a new array and add the elements that pass the condition or the condition is true to the new array, so there is no need to create a new empty array;

 // indexOf 去重
        let arr = [1, 2, 3, 4, 3, 2];
      
        //indexOf 返回 -1 证明元素不在数组当中 arr3 中没有该元素
        let arr3 = [];
        arr.forEach(item => {
    
    
            if(arr3.indexOf(item) == -1) {
    
     
                arr3.push(item);
            }
        })
        console.log('arr3:', arr3);  //[1,2,3,4]


        // filter + indexOf
        // indexOf 返回元素在数组中第一次出现的下标 如果相等 证明数组元素第一次出现在数组中
        let arr4 = arr.filter( function(item,index) {
    
    
            return arr.indexOf(item) === index;  
        })
 		console.log('arr4:', arr4);  //[1,2,3,4]
        

3. reduce deduplication principle

1. The reduce() method of the array ;
2. The includes( ) method of the array : determine whether an element exists in the array, and return a Boolean value;

 // reduce 去重
        let arr = [1, 2, 3, 4, 3, 2];
        
        //reduce + includes
        let arr5 = arr.reduce(function(pre,item) {
    
    
            return pre.includes(item) ? pre : [...pre,item]; //本行同下面注释代码效果一样
            // if(!pre.includes(item)) {
    
    
            //     pre.push(item);
            // }
            // return pre;
        },[])
        console.log('arr5:' ,arr5);  //[1,2,3,4]

4. Object deduplication principle

1. Utilizing the feature of ' the attribute of the object is unique and not repeated', the array elements are added to the object as the attribute of the object, and the attribute value is arbitrary;
2. Object.keys( ) Obtain the attribute name of the object and output Object.keys[arr] => ['1','2','3','4'] in the form of an array;
3. ~~ Double tilde : You can round decimals; you can also convert decimals of string type to integers of numeric type;
   for positive numbers, double tildes ~~ have the same effect as Math.floor( ),
   for negative numbers For example, the double wavy line~~ has the same effect as Math.ceil( ), and
   the speed of the double wavy line may be faster than Math.floor( ) and Math.ceil( ).

 // 对象去重
        let arr = [1, 2, 3, 4, 3, 2];
        
        let arr6 = {
    
    };
        arr.forEach(item => {
    
    
            arr6[item] = 'oo';
        })
        arr6 = Object.keys(arr6).map( item => ~~item);
        console.log('arr6:' ,arr6);  //[1,2,3,4]

The following two are the most basic algorithms that focus on solving the first type with a time complexity of n^2 and the second type using sort to reduce the time complexity to n

5. The principle of splice deduplication

1. The splice method will change the original array : modify the array by deleting or replacing existing elements or adding new element classes in place, and return the modified array ;
2. j = i +1 : j starts from i+1 without looping from the beginning to optimize code performance;
3. sort method: sort the array elements, reducing the time complexity and saving code running time;

 // splice + 双重 for 循环 去重
        let arr = [1, 2, 3, 4, 3, 2]; 
        
         for(let i=0; i<arr.length; i++) {
    
    
             for(let j=i+1; j<arr.length; j++) {
    
    
                 if(arr[i] == arr[j]) {
    
    
                     arr.splice(j,1); // splice 直接在 arr 上删除重复元素
                     j--;
                 }
            } 
         }
          console.log(arr);  //[1,2,3,4]

// sort + splice去重
        let arr = [1, 2, 3, 4, 3, 2];
       
         arr = arr.sort();
         for(let i = 1; i < arr.length; i++) {
    
    
             if(arr[i] == arr[i-1]) {
    
    
                 arr.splice(i,1);
             }
         }
         console.log(arr);  //[1,2,3,4]

<script>
        // sort + push 去重
        let arr = [1, 2, 3, 4, 3, 2];

        let arr8 = [];
        arr = arr.sort();
        for(let i = 0; i < arr.length; i++) {
    
    
            if(arr[i] !== arr[i+1]) {
    
    
                arr8.push(arr[i]);
            }
        }
        console.log('arr8:' ,arr8);  //[1,2,3,4]

    </script>

let arr = [1, 2, 3, 4, 3, 2];
      
        // 不做推荐
         let arr7 = [];
         var flag;
         for(let i = 0; i < arr.length; i++) {
    
    
             flag = false;
             for(let j = i+1; j < arr.length; j++) {
    
    
                 if(arr[j] === arr[i]) {
    
    
                     flag = true;
                }
             }
             if(!flag) {
    
    
                 arr7.push(arr[i]);
             } 
         }
        console.log('arr7:' ,arr7);  //[1,4,3,2]

Reference video:
https://www.bilibili.com/video/BV1pK411j7Hy?spm_id_from=333.337.search-card.all.click&vd_source=6de9d6d1eee23ee3b8cd1ac0620e8986