JS array de duplication method
Example: remove duplicate elements from the following array (take multiple data types as an example)

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

1. Use set() + array from()
Set object: a collection of values. You can iterate its elements in the order of insertion. The elements in the set only appear once, that is, the elements in the set are unique.
Array.from() method: create a new, shallow copy of an array instance of a similar array or iteratable object.

const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

Note: it is also effective to de duplicate NaN and undefined types in the above way, because NaN and undefined can be stored in Set, and NaN is regarded as the same value (although in js: NaN! = = NaN).

2. Use the split method of two-layer loop + array

The array elements are compared one by one through two-layer loops, and then the duplicate elements are deleted through the splice method. This method cannot de duplicate Nan, because Nan is used for comparison== NaN.

function removeDuplicate(arr) {

   let len = arr.length

   for (let i = 0; i < len; i++) {

      for (let j = i + 1; j < len; j++) {
        if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len-- // Reduce cycles and improve performance
        j-- // Ensure that the value of j remains unchanged after addition
      }
    }
  }
   return arr
}

 const result = removeDuplicate(arr)

 console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

3. Use the indexOf method of array
Create a new empty array, traverse the array that needs to be de duplicated, and store the array elements in the new array. Before storing, judge whether the array already contains the current element, and if not, store it. This method also cannot de duplicate NaN.

indexOf() method: return the index of the specified value that appears for the first time in the String object calling it, and search from fromIndex. If the value is not found, - 1 is returned.

function removeDuplicate(arr) {

   const newArr = []

   arr.forEach(item => {

     if (newArr.indexOf(item) === -1) {
     newArr.push(item)
    }
 })
 return newArr // Returns a new array
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

4. Use the include method of the array

The logic of this method is the same as that of indexOf method, but the includes method is used to judge whether duplicate elements are included.
includes() method: used to determine whether an array contains a specified value. If it does, it returns true; otherwise, it returns false.

function removeDuplicate(arr) {

   const newArr = []

   arr.forEach(item => {

      if (!newArr.includes(item)) {
      newArr.push(item)
     }
  })
 return newArr
}

const result = removeDuplicate(arr)

console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

Note: why includes can detect NaN in the array involves the underlying implementation of includes. The following figure shows part of the code implemented by includes. When judging whether an element is included, the sameValueZero method will be called for comparison. If it is NaN, isNaN() will be used for conversion.

Simple test includes() judgment on NaN:

const testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // true

5.Using array filter()+indexOf()
filter Method will store the elements that meet the conditions into a new array and combine them indexOf Methods to judge.
filter() Method: a new array is created that contains all the elements of the test implemented by the provided function.
 function removeDuplicate(arr) {

    return arr.filter((item, index) => {

       return arr.indexOf(item) === index
  })
}

const result = removeDuplicate(arr)

console.log(result) // [ 1, 2, 'abc', true, false, undefined ]

Note: NaN is not included in the output result here because indexOf() cannot judge NaN, that is, arr.indexOf(item) === index returns false. The tests are as follows:

const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

6. Use Map()

Map object is a data structure provided by JavaScript. The structure is in the form of key value pairs. Array elements are stored as the keys of map, Front end training Then combine the has() and set() methods to determine whether the key is repeated.

Map object: used to save key value pairs and remember the original insertion order of keys. Any value (object or original value) can be used as a key or a value.

function removeDuplicate(arr) {

const map = new Map()

const newArr = []

arr.forEach(item => {

  if (!map.has(item)) { // has() is used to determine whether the map package is the attribute value of item

    map.set(item, true) // Use set() to set the item into the map and set its property value to true
  
    newArr.push(item)
  }
})

return newArr
}

const result = removeDuplicate(arr)

console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

Note: Map() can also be used to de duplicate NaN, because it is considered that NaN is equal to NaN when judging Map, and all other values are judged according to the result of = = = operator.

7. Utilization object

Its implementation idea is similar to that of Map(), which mainly takes advantage of the non repeatable attribute name of the object.

function removeDuplicate(arr) {

   const newArr = []

   const obj = {}

   arr.forEach(item => {

       if (!obj[item]) {
       newArr.push(item)
       obj[item] = true
      }
   })

   return newArr
 }

 const result = removeDuplicate(arr)

 console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]