js 数组去重

方法一 Set()

/**
 * 使用 Set()
 * Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
 * 
 * 简述
 * Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。
 * 
 * 另外，NaN和undefined都可以被存储在Set 中， NaN之间被视为相同的值（NaN被认为是相同的，尽管 NaN !== NaN）。
 * 
 * 
 * Array.form()
 * 语法
 * Array.from(arrayLike[, mapFn[, thisArg]])
 * 参数
 * arrayLike
 *  想要转换成数组的伪数组对象或可迭代对象。
 * mapFn 可选
 *  如果指定了该参数，新数组中的每个元素会执行该回调函数。
 * thisArg 可选
 *  可选参数，执行回调函数 mapFn 时 this 对象。
 * 返回值
 *  一个新的数组实例。
 */

let res1 = Array.from(new Set(arr))
console.table(res1)

方法二 双层 for循环 + splice

/**
 * 使用 双层for循环 + splice
 * 
 * 每删除一个，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能
 * 
 */

const func1 = (data) => {
  let len = data.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (data[i] === data[j]) {
        data.splice(j, 1)
        len--
        j--
      }
    }
  }
  return data
}

let res2 = func1(arr)
console.table(res2)

方法三 indexOf

/**
 * 使用 indexOf
 * 先建立建立一个空数组res， 在循环遍历数组，循环体内 用res.indexOf()查找当前索引的值是否存在 res数组内， indexOf 存在返回 下表索引， 不存在返回 -1，存在就跳过不做任何操作， 不存在则添加
 * 
 */

const func2 = (data) => {
  const res = []
  for (let i = 0; i < data.length; i++) {
    if (res.indexOf(data[i]) === -1) res.push(data[i])
  }
  return res
}

const res3 = func2(arr)
console.table(res3)

方法四 使用 Array.prototype.includes()

/**
 * 使用 Array.prototype.includes()
 * 
 * arr.includes(valueToFind[, fromIndex])
 * 参数
 *  valueToFind
 *  需要查找的元素值。
 * 
 *  Note: 使用 includes()比较字符串和字符时是区分大小写的。
 * 
 *  fromIndex 可选
 *  从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
 * 
 * 返回值
 *  返回一个布尔值 Boolean 。
 *  ]如果在数组中（或 fromIndex 指定的范围中）找到了 valueToFind，则返回 true，否则返回 false。
 * 
 */


const func3 = (data) => {
  const res = []
  for (let i = 0; i < data.length; i++) {
    if (!res.includes(data[i])) res.push(data[i])
  }
  return res
}

const res4 = func3(arr)
console.table(res4)

方法五 使用 Array.prototype.filter()

/**
 * 使用 Array.prototype.filter()
 * filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
 * 
 * 语法
 *  var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
 * 
 * 参数
 *  callback
 *   用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
 *  element
 *   数组中当前正在处理的元素。
 *  index可选
 *   正在处理的元素在数组中的索引。
 *  array可选
 *   调用了 filter 的数组本身。
 *  thisArg可选
 *   执行 callback 时，用于 this 的值。
 *  返回值
 *   一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
 * 
 */

const func4 = (data) => {
  return data.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}

const res5 = func4(arr)
console.table(res5)

方法六 使用 Map()

/**
 * 使用  Map()
 * Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
 * 
 * 详解 地址 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
 * 
 */

const func5 = (data) => {
  const res = []
  const map = new Map()
  for (let i = 0; i < data.length; i++) {
    if (!map.has(data[i])) {
      map.set(data[i], true)
      res.push(data[i])
    }
  }
  return res
}

const res6 = func5(arr)
console.table(res6)