這幾天整理的一下過(guò)往的文章和筆記，備份到了 Github 上，地址?? blog。
如果我的內(nèi)容幫助到了您，歡迎點(diǎn)個(gè) Star ?????? 鼓勵(lì)鼓勵(lì) :) ~~ ??
我希望我的內(nèi)容可以幫助你?，F(xiàn)在我專注于前端領(lǐng)域，但我也將分享我在有限的時(shí)間內(nèi)看到和感受到的東西。
Set
Set對(duì)象是一種新數(shù)據(jù)結(jié)構(gòu)，允許你存儲(chǔ)任何類型的唯一值，無(wú)論是原始值或者是對(duì)象引用。
我們可以從給定數(shù)組創(chuàng)建一個(gè)新的 Set()，以丟棄重復(fù)的值。然后使用擴(kuò)展運(yùn)算符（...）將其轉(zhuǎn)換回?cái)?shù)組。
const arr = [1, 2, 2, '1', null, '', undefined, NaN, NaN, true, false]
const unique = arr => [...new Set(arr)]
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
注意，如果數(shù)值中存的是對(duì)象，值相同，但他們引用的是不同的內(nèi)存地址，他會(huì)認(rèn)為每個(gè)對(duì)象都是唯一的：
[...new Set([{ a: 1 }, { a: 1 }])] // [{a: 1}, {a: 1}]
// 你可以改成如下
const obj = { a: 1 }
[...new Set([obj, obj])] // [{ a: 1 }]
Set 除了和擴(kuò)展運(yùn)算符配合，還可以和 Array.form() 一起使用：
const unique = (arr) => Array.from(new Set(arr))
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
Map
創(chuàng)建一個(gè)空 Map 數(shù)據(jù)結(jié)構(gòu)，使用 Array.prototype.filter() 和 創(chuàng)建一個(gè)只包含唯一值的新數(shù)組。
const unique = arr => {
const seen = new Map()
return arr.filter(item => !seen.has(item) && seen.set(item, 1))
}
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
Array.prototype.filter()
使用 Array.prototype.filter() 創(chuàng)建一個(gè)只包含唯一值的新數(shù)組。
const unique = arr =>
arr.filter((item, index, arr) => arr.indexOf(item) === index)
unique(arr) // [1, 2, "1", null, "", undefined, true, false]
注意：該方法直接把 NaN 全局過(guò)濾了。
Array.prototype.includes()
const unique = arr => {
const newArr = []
arr.map(item => !newArr.includes(item) && newArr.push(item))
return newArr
}
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
也可以使用 Array.prototype.indexOf() 進(jìn)行判斷，但是存在著一個(gè)問(wèn)題，該方法無(wú)法判斷數(shù)組中是否含有 NaN。
const unique = arr => {
const newArr = []
arr.map(item => newArr.indexOf(item) == -1 && newArr.push(item))
return newArr
}
unique(arr) // [1, 2, "1", null, "", undefined, NaN, NaN, true, false]
Array.prototype.reduce()
Array.prototype.reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的 reducer 函數(shù)（升序執(zhí)行），將其結(jié)果組合成數(shù)組返回。
const unique = arr =>
arr.reduce(
(unique, item) => (unique.includes(item) ? unique : [...unique, item]),
[]
)
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
Object.hasOwnProperty()
利用 Object.hasOwnProperty 判斷是否存在對(duì)象屬性
const unique = arr => {
const obj = {}
return arr.filter(item =>
obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true))
}
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
Object 鍵值對(duì)
利用對(duì)象鍵值對(duì)不能相同名來(lái)去重
const unique = arr => {
const obj = {}
arr.forEach(value => {
obj[value] = ''
})
return Object.keys(obj)
}
unique(arr) // ["1", "2", "null", "", "undefined", "NaN", "true", "false"]
注意兩個(gè)問(wèn)題
- 數(shù)組中的任何類型都會(huì)轉(zhuǎn)為字符串類型。
- 當(dāng)數(shù)組中存在相同值不同類型的數(shù)據(jù)時(shí)，會(huì)去掉其中一個(gè)。如數(shù)值 1 和字符串 '1'，會(huì)去掉其中一個(gè)。
當(dāng)然，為了快速開(kāi)發(fā)，我們會(huì)使用一些工具庫(kù)來(lái)去重。例如：
- lodash 的
_.uniq(array) - Ramda 的
R.uniq(array)
