JavaScript for array de-duplication

This is the first day of my participation in Gwen Challenge

preface

Array deduplication is very common, here is a summary of their own learned array deduplication method

Array traversal with indexOf

The indexOf method returns the first occurrence of the specified element in the array, or -1 if it does not exist

<script>
    var obj1 = {
        name: 'tom'.age: 18
    };
    var obj2 = {
        name: 'tom'.age: 18
    };
    console.log(obj1 == obj2);// false
	// The reference address of the object is the same


	var array = [1.2.3.null.'aa'.'bb'.'aa'.2.3, {
        name: 'tom'.age: 18
    }, {
        name: 'cat'.age: 19
    }, {
        name: 'tom'.age: 18
    }, undefined.undefined.null]
    
    
	function unique1(arr) {
        console.time("unique1");// Start the timer to test the program running time
        let list = []
        for (var i = 0; i < arr.length; i++) {
            if (list.indexOf(arr[i]) === -1) {
                list.push(arr[i])
            }
        }
        console.timeEnd("unique1");// End time, output time
        return list;
    }
    console.log(unique1(array));
</script>
Copy the code

2, the Set

Set belongs to the new data structure provided by ES6

<script>
    / / 1, the Set
    function unique2(arr) {
        console.time("unique2");
        let list = Array.from(new Set(arr));
        console.timeEnd("unique2");
        return list;
    }
    console.log(unique2(array));
</script>
Copy the code

3, includes

Includes is used to determine whether an array contains an element

<script>
   function unique3(arr) {
        console.time("unique3");
        let list = []
        for (let i = 0; i < arr.length; i++) {
            if(! list.includes(arr[i])) { list.push(arr[i]) } }console.timeEnd("unique3");
        return list
    }
    console.log(unique3(array));     
</script>
Copy the code

Reduce combined with indexOf

Reduce, as an array method, can be used for array traversal

<script>
	 function unique5(arr) {
        console.time("unique5");
        let newArr = Array.from(arr).reduce((pre, now) = >
            pre.includes(now) ? pre : [...pre, now], [])
        console.timeEnd("unique5");
        return newArr
    }
    console.log(unique5(map1));
</script>
Copy the code

5, hasOwnProperty

HasOwnProperty determines whether an object property exists

<script>
	function unique5(arr) {
        console.time("unique5");
        var obj = {};
        var newArr = arr.filter(function (item, index, arr) {
            return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)})console.timeEnd("unique5");
        return newArr
    }
	HasOwnProperty is used to determine whether each element has the same value
    console.log(unique5(map));
</script>
Copy the code

6, summary

The complete code

<script>
    var obj1 = {
        name: 'tom'.age: 18
    };
    var obj2 = {
        name: 'tom'.age: 18
    };
    console.log(obj1 == obj2); // false
    // The reference address of the object is the same

    var array = [1.2.3.null.'aa'.'bb'.'aa'.2.3, {
        name: 'tom'.age: 18
    }, {
        name: 'cat'.age: 19
    }, {
        name: 'tom'.age: 18
    }, undefined.undefined.null]

    / / 1, the indexOf
    function unique1(arr) {
        console.time("unique1"); // Start the timer to test the program running time
        let list = []
        for (var i = 0; i < arr.length; i++) {
            if (list.indexOf(arr[i]) === -1) {
                list.push(arr[i])
            }
        }
        console.timeEnd("unique1"); // End time, output time
        return list;
    }
    var map1 = [1.2.3.4.4.'dog'.'cat'.'dog'.undefined.null.undefined.null]
    console.log(unique1(array));

    / / 2, the Set
    function unique2(arr) {
        console.time("unique2");
        let list = Array.from(new Set(arr));
        console.timeEnd("unique2");
        return list;
    }
    console.log(unique2(array));

    / / 3, includes
    function unique3(arr) {
        console.time("unique3");
        let list = []
        for (let i = 0; i < arr.length; i++) {
            if(! list.includes(arr[i])) { list.push(arr[i]) } }console.timeEnd("unique3");
        return list
    }
    console.log(unique3(array));

    / / 4, reduce + indexOf
    function unique4(arr) {
        console.time("unique4");
        let newArr = Array.from(arr).reduce((pre, now) = >
            pre.includes(now) ? pre : [...pre, now], [])
        console.timeEnd("unique4");
        return newArr
    }
    console.log(unique4(array));

    / / 5, hasOwnProperty
    function unique5(arr) {
        console.time("unique5");
        var obj = {};
        var newArr = arr.filter(function (item, index, arr) {
            return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)})console.timeEnd("unique5");
        return newArr
    }
    console.log(unique5(array));
</script>
Copy the code

From the test of the above methods, we can see the order of the application runtime size (because the data is too small, the runtime is also small) :

hasOwnProperty > reduce + indexOf > includes > indexOf > Set