js array deduplication method (set+array.from, includes,, filter, indexof, set+map)

es6 syntax: use the Set()+Array.from() method.

ES6 provides a new data structure Set. It is similar to an array, but the values of the members are all unique, and there are no duplicate values.

The Array.from method is used to convert two types of objects into real arrays: array-like objects and iterable objects (including ES6's new data structures Set and Map).

let array = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
const result = Array.from(new Set(array)) //['苹果', '锤子', '三星', '华为', '小米',NaN]

Use the indexOf method of the array

The indexOf() method returns the position of a specified element in the array.

This method will search the array from beginning to end to see if it contains the corresponding element. The search starts at the array start or the beginning of the array (when no start parameter is specified). If an item is found, the position of the first occurrence of item is returned. The index of the starting position is 0.

Note this method: NaN cannot be deduplicated .

let array = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item)
    }
  })
  return newArr // 返回一个新数组
}
let result = removeDuplicate(arr)
console.log(result)//['苹果', '锤子', '三星', '华为', '小米',NaN,NaN]

Use the filter+indexOf method:

The filter() method creates a new array whose elements are checked by checking all elements in the specified array that meet the criteria.

The indexOf() method returns the position of a specified element in the array.

let array = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
let result = array.filter((el,index,arr) => {
　　return arr.indexOf(el) == index
});
console.log(result)//['苹果', '锤子', '三星', '华为', '小米']

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

The test is as follows

let array = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
console.log(array.indexOf(NaN)) // -1

Using the includes method of an array

includes () method: used to determine whether an array contains a specified value, according to the situation, if it is included, it will return true, otherwise it will return false.

includes can detect that the array contains NaN

let arr = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) //['苹果', '锤子', '三星', '华为', '小米',NaN]

Using Map()

ES6 provides the Map data structure. It is similar to an object, and it is also a collection of key-value pairs, but the scope of the "key" is not limited to strings, and various types of values (including objects) can be used as keys. Store the array elements as the keys of the map, and combine the has() and set() methods to determine whether the keys are duplicated.

let arr = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
function removeDuplicate(arr) {
  const map = new Map();
  const newArr = [];
  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true
      newArr.push(item)
    }
  })

  return newArr
}
const result = removeDuplicate(arr)
console.log(result) //['苹果', '锤子', '三星', '华为', '小米',NaN]

object of use

Its implementation idea is similar to that of Map(), mainly because the property name of the object cannot be repeated.

let arr = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子',NaN,NaN];
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) //['苹果', '锤子', '三星', '华为', '小米',NaN]