In development, we often need to de duplicate arrays. Here I summarize some methods of array de duplication:

First, prepare the de duplication array used in the code

var obj = {a: 10, b: 20};
var arr = [1,1, 0, 0,'true','true',true,true,15,15,false,false, 'false','false', undefined, undefined, 'undefined', 'undefined', null,null, NaN, NaN,'NaN', 'a', 'a',{},{},obj,obj];

Method 1: set ES6 adds a new method, which cannot remove empty objects

(function(){
    // The first step is to instantiate a set object using the set class
    let getSet = new Set(arr);
    // Step two,
    //    1. Use the Array.from method to convert the set object into a real array
    //      2. Use the... Operator of ES6 to convert to an array
    let newArr = Array.from(getSet);
    let newArr2 = [...getSet];

    console.log('Array.from method', newArr);
    // (16) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, 'NaN', 'a', {...}, {...}, {...}]
    console.log('...method', newArr2);
    // (16) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 2: use the indexOf method of the array to create a new array, and then cycle through the old array to check whether there is a current item in the new array. If there is a jump out, if the current item is not push ed into the new array, it will be regarded as different when the element is NaN. This method cannot exclude the NaN value

(function(){
    let newArr = [];
    arr.forEach(v=>{
        if(newArr.indexOf(v) === -1){
            newArr.push(v);
        }
    });
    console.log('indexOf method', newArr);
    // (17) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, NaN, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 3: use the include method of the array to create a new empty array, then cycle through the original array, and then use the include method to detect whether the current element is in the new array. If true is returned, it means there is no processing. If false is returned, it proves that the current item is not in the array, then push it into the new array. This method is also = = = detection,

(function(){
    let newArr = [];
    arr.forEach(v=>{
        if(!newArr.includes(v)){
            newArr.push(v);
        }
    });
    console.log('includes method', newArr);
    // (16) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 4: first use the sort method of the array to sort the array again (this method will change the original array), then create a new array, store the first value in the sorted array in the new array, and then cycle the sorted array to compare whether the previous value of the array is the same as the current value. If it is the same, skip, Not the same. push the current value into the new array. This method cannot remove empty objects and NaN

(function(){
    var arr = [1,1, 0, 0,'true','true',true,true,15,15,false,false, 'false','false', undefined, undefined, 'undefined', 'undefined', null,null, NaN, NaN,'NaN', 'a', 'a',{},{},obj,obj];
    arr.sort();
    var newArr = [arr[0]];
    for(let x = 1; x < arr.length; x++){
        if(arr[x] != arr[x-1]){
            newArr.push(arr[x]);
        }
    }
    console.log('sort method',newArr);
    // (17) [0, 1, 15, NaN, NaN, 'NaN', {...}, {...}, {...}, 'a', false, 'false', null, 'true', true, 'undefined', undefined]
})();

Method 5: use the split method of double loop combined with array (which will change the element group). This method cannot remove empty objects and NaN

(function(){
    var arr = [1,1, 0, 0,'true','true',true,true,15,15,false,false, 'false','false', undefined, undefined, 'undefined', 'undefined', null,null, NaN, NaN,'NaN', 'a', 'a',{},{},obj,obj];
    // The first layer of the loop starts with the first value of the array
    for(let x = 0; x < arr.length; x++){
        // The second loop starts with the second value of the array,
        for(let y = x + 1; y < arr.length; y++){
            // By judging whether the previous value and the current value are the same
            if(arr[x] === arr[y]){
                // Then execute the splice array deletion method, delete the same value items, and change the element group and the length of the original array
                var a = arr.splice(y, 1);
                // Since the current item is deleted, the value of y needs to be subtracted by 1, and then the next cycle detection is carried out. After deletion, the subsequent value is added to the previous item
                // If y-- is not executed here, the second item is added and deleted, and the previous second item is supplemented. In the next cycle, the value of the original third item is directly detected, and the value of the original second item will be omitted
                y--;
            }
            
        }
    }
    console.log('splice method', arr);
    // (17) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, NaN, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 6: use the filter method of the array in combination with the indexOf method. This method obtains a new array, which does not include NaN. This is because the filter method automatically excludes the value of NaN

(function(){
    var newArr = arr.filter((item, index, curArr)=>{
        return curArr.indexOf(item, 0) === index;
    });
    console.log('filter',newArr);
    // (15) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 7: use the Map data type of ES6, use the unique feature of the key value pair of the Map, and then cycle the array, taking the items of the array as the key values of the Map data type. This method obtains a new array, which does not include NaN. This is the feature that the filter method is used to automatically exclude the values of NaN

(function(){
    var getMapArr = new Map();
    arr.forEach((item)=>{
        getMapArr.set(item, true);
    });
    console.log(getMapArr)
    console.log('Map', [...getMapArr.keys()]);
    // (16) [1, 0, 'true', true, 15, false, 'false', undefined, 'undefined', null, NaN, 'NaN', 'a', {...}, {...}, {...}]
})();

Method 8: array de duplication can also be achieved by using the key value uniqueness of the object, but this method has many problems. Let's take a look at the running results

When 'true' and true are used as key values, they will be considered the same, corresponding to 0 and '0',
If the array item is an object type, it will also parse the object into the form of [object Object]
This method is not recommended. The Map data type is recommended

(function(){
    var getObj = {};
    var getNewArr = [];
    arr.forEach((item)=>{
        if(!getObj[item]){
            getNewArr.push(item);
            getObj[item] = true;
        }
    });
    console.log(getObj);
    /*
        0: true
        1: true
        15: true
        NaN: true
        [object Object]: true
        a: true
        false: true
        null: true
        true: true
        undefined: true
    */
    console.log('Object', getNewArr);
    // (10) [1, 0, 'true', 15, false, undefined, null, NaN, 'a', {...}]
})();