JS数组去重的形式
例:将上面数组去除反复元素(以多种数据类型为例)

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

1.利用Set()+Array.from()
Set对象:是值的汇合,你能够依照插入的程序迭代它的元素。 Set中的元素只会呈现一次,即Set中的元素是惟一的。
Array.from() 办法:对一个相似数组或可迭代对象创立一个新的,浅拷贝的数组实例。

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

留神:以上去形式对NaN和undefined类型去重也是无效的,是因为NaN和undefined都能够被存储在Set中, NaN之间被视为雷同的值(只管在js中:NaN !== NaN)。

2.利用两层循环+数组的splice办法

通过两层循环对数组元素进行逐个比拟,而后通过splice办法来删除反复的元素。此办法对NaN是无奈进行去重的,因为进行比拟时NaN !== 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-- // 缩小循环次数进步性能        j-- // 保障j的值自加后不变      }    }  }   return arr} const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

3.利用数组的indexOf办法
新建一个空数组,遍历须要去重的数组,将数组元素存入新数组中,寄存前判断数组中是否曾经含有以后元素,没有则存入。此办法也无奈对NaN去重。

indexOf() 办法:返回调用它的String对象中第一次呈现的指定值的索引,从 fromIndex 处进行搜寻。如果未找到该值,则返回 -1。

function removeDuplicate(arr) {   const newArr = []   arr.forEach(item => {     if (newArr.indexOf(item) === -1) {     newArr.push(item)    } }) return newArr // 返回一个新数组}

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

4.利用数组的includes办法

此办法逻辑与indexOf办法去重殊途同归,只是用includes办法来判断是否蕴含反复元素。
includes()办法:用来判断一个数组是否蕴含一个指定的值,依据状况,如果蕴含则返回 true,否则返回 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 ]

留神:为什么includes可能检测到数组中蕴含NaN,其波及到includes底层的实现。如下图为includes实现的局部代码,在进行判断是否蕴含某元素时会调用sameValueZero办法进行比拟,如果为NaN,则会应用isNaN()进行转化。

简略测试includes()对NaN的判断:

const testArr = [1, 'a', NaN]console.log(testArr.includes(NaN)) // true5.利用数组的filter()+indexOf()filter办法会对满足条件的元素寄存到一个新数组中,联合indexOf办法进行判断。filter() 办法:会创立一个新数组,其蕴含通过所提供函数实现的测试的所有元素。 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 ]

留神:这里的输入后果中不蕴含NaN,是因为indexOf()无奈对NaN进行判断,即arr.indexOf(item) === index返回后果为false。测试如下:

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

6.利用Map()

Map对象是JavaScript提供的一种数据结构,构造为键值对模式,将数组元素作为map的键存入,前端培训而后联合has()和set()办法判断键是否反复。

Map 对象:用于保留键值对,并且可能记住键的原始插入程序。任何值(对象或者原始值)都能够作为一个键或一个值。

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) // [ 1, 2, 'abc', true, false, undefined, NaN ]

留神:应用Map()也可对NaN去重,起因是Map进行判断时认为NaN是与NaN相等的,剩下所有其它的值是依据 === 运算符的后果判断是否相等。

7.利用对象

其实现思维和Map()是差不多的,次要是利用了对象的属性名不可反复这一个性。

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 ]