It seems that it is not the most complete array de duplication method

In this article, we will talk about array de duplication.

1. The simplest and rudest way, double for loop

let arr = [9, 5, 6, 5, '1', '1', true, 5, true];
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if(arr[i] === arr[j]){
            arr.splice(j,1);
        }       
    }
}
console.log(arr); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]
// Two NaN, because NaN!=NaN

2.indexOf

let a = [];
for (var i = 0; i < arr.length; i++) {
    if(a.indexOf(arr[i]) === -1){
        a.push(arr[i]);
    }
}
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]
// Two NaN, because NaN!=NaN

3.includes

for (var i = 0; i < arr.length; i++) {
    if(!a.includes(arr[i])){
        a.push(arr[i]);
    }
}
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {...}, {...}]

4.Set

let a = [...(new Set(arr))];
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {...}, {...}]

5.filter

let a = arr.filter(function(value, index){
    return arr.indexOf(value, 0) === index;
})
console.log(a);// [9, 5, 6, "1", true, undefined, null, {...}, {...}]
arr.filter(function(value){
    return a.indexOf(value) === -1 ? a.push(value) : a;
})
console.log(a);// [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]

6.sort

arr = arr.sort(); // Sort, if they are the same, they will be next to each other
a.push(arr[0]); // Put the first element of the array first
for (var i = 1; i < arr.length; i++) {
    if(arr[i] !== arr[i - 1]){
        a.push(arr[i]);
    }
}

7.reduce

arr = arr.sort(); 
arr.reduce(function(preVal, nowVal){
    if(preVal !== nowVal){
        a.push(preVal);
    }
    return nowVal;
}, a)
arr.reduce(function(preVal, nowVal){
    return a.indexOf(nowVal) === -1 ? a.push(nowVal) : a;
}, a)
console.log(a); //["1", 5, 6, 9, NaN, NaN, {...}, {...}, null, true, undefined]

8.hasOwnProperty

let obj = {};
for (var i = 0; i < arr.length; i++) {
    if(!obj.hasOwnProperty(obj[typeof arr[i] + arr[i]])){
        obj[typeof arr[i] + arr[i]] = arr[i];
    }
}
console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {… }]Unable to judge object

9. Object array de duplication method

let obj = {};
for (var i = 0; i < arr.length; i++) {
    if(!obj[typeof arr[i] + arr[i]]){
        obj[typeof arr[i] + arr[i]] = arr[i];
    }
}
console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {...}]

10.Map

let map = new Map();
for (var i = 0; i < arr.length; i++) {
    if(!map.get(arr[i])){
        map.set(arr[i], arr[i]);
    }
}
console.log(map);

  • supplement

I want to talk about forEach and map

arr.forEach( function(element, index) {
    console.log(element);
});
arr.map(function(element, index){
    console.log(element);
});
  • Same points

    • They are all used to traverse arrays.
  • Difference

    • map can have return value, forEach has no return value.
    let arr = [9,3,6,3,6,3];
    arr = arr.forEach( function(element, index) {
        return element + 1;
    });
    console.log(arr); // undefined
    arr = arr.map(function(element, index){
        return element + 1;
    });
    console.log(arr); //[10, 4, 7, 4, 7, 4]
    • forEach can't interrupt halfway
    let arr = [9,3,6,3,6,3];
    arr.forEach( function(element, index) {
        console.log(element);
        if(index === 2){
            return; //It's useless. break,continue will report an error. It's invalid
        }
    });
  • forEach Simulation Implementation

    Array.prototype.bforEach = function (fn) {
        let array = this;
        for (var i = 0; i < array.length; i++) {
            fn(array[i], i, array);
        }
    }
    arr.bforEach(function(element, index){
        console.log(element); // 9, 3, 6, 3, 6, 3
    });
  • map simulation implementation

    Array.prototype.Map = function (fn) {
        let array = this,
            a = [],
            r;
        for (var i = 0; i < array.length; i++) {
            r = fn(array[i], i, array);
            a.push(r);
        }
        return a;
    }

    Like can point a like, or pay attention to. Encourage a self-taught front-end college student.

Tags: Javascript

Posted on Tue, 03 Dec 2019 07:38:17 -0500 by cjconnor24