需要處理的數(shù)組
const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]侧啼；
數(shù)組去重的方法
1.Set() + Array.from()
2.雙層循環(huán) + splice
3.空數(shù)組添加 + 數(shù)據(jù)存在判定
``
1.Set() + Array.from()
Set對(duì)象：是值的集合只锭，你可以按照插入的順序迭代它的元素绝页。 Set中的元素只會(huì)出現(xiàn)一次盖溺，即Set中的元素是唯一的。
Array.from() 方法：對(duì)一個(gè)類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的，淺拷貝的數(shù)組實(shí)例。
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]
2.雙層循環(huán) + splice
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-- // 減少循環(huán)次數(shù)提高性能
j-- // 保證j的值自加后不變
}
}
}
return arr
}
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]
3.空數(shù)組添加 + 數(shù)據(jù)存在判定
1.利用indexOf判斷新元素是否存在新數(shù)組中
function removeDuplicate(arr) {
const newArr = []
arr.forEach(item => {
if (newArr.indexOf(item) === -1) {
newArr.push(item)
}
})
return newArr // 返回一個(gè)新數(shù)組
}
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]
2.利用includes判斷新元素是否存在新數(shù)組中
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能夠檢測(cè)到數(shù)組中包含NaN，其涉及到includes底層的實(shí)現(xiàn)奖蔓。如下圖為includes實(shí)現(xiàn)的部分代碼，在進(jìn)行判斷是否包含某元素時(shí)會(huì)調(diào)用sameValueZero方法進(jìn)行比較讹堤，如果為NaN吆鹤，則會(huì)使用isNaN()進(jìn)行轉(zhuǎn)化。
3.filter()代替空數(shù)組+indexOf()
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 ]
4.利用map判斷是否重復(fù)
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設(shè)置到map中洲守，并設(shè)置其屬性值為true
newArr.push(item)
}
})
return newArr
}
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]
