本篇的數組去重,主要是針對前兩篇文章數組方法的一個實踐應用,並把每一個數組去重的核心思想分享出來,一塊兒學習成長,下面是將會應用到的數組方法以下:es6
splice()
indexOf()
includes()
find()
findIndex()
filter()
Array.from()
方法一 `數組
var arr = [3, 7, 3, 5, 7, 9, 1, 5, 9, 9]
for (var i = 0; i < arr.length; i++) { // 方法1
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) { //核心思想,比較
arr.splice(i, 1)
i --;
}
}
}
console.log(arr.sort()); // 輸出 [1, 3, 5, 7, 9]
複製代碼
` 這個去重的方法是很是經典的一個數組去重方式,採用比較方式,採用數組的第一位和後一位進行比較,若是相等,則使用splice方法刪除掉當前一位;這個方法雖然在大型數組去重的性能上面有必定缺陷,可是這個方法容易理解和應用,因此使用的人仍是蠻多的。性能
方法二 `學習
var arr = [3, 7, 3, 5, 7, 9, 1, 5, 9, 9]
var obj = {}, ary = []
arr.map(function (item, index) { //方法2
if (obj[item] !== item) { //核心思想,比較
obj[item] = item; //
ary.push(item)
}
})
console.log(ary.sort())// // 輸出 [1, 3, 5, 7, 9]
複製代碼
`這個方法的核心思想和上面的方法是同樣的,也是進行比較,不過採起的方式不同而已,這個方法是事先建立了一個空數組和空對象,經過取對象的屬性值來和數組的當前項比較,若是不存在則把數組的當前項存儲到空數組裏面去;由於這個方法是一層循環,因此它的性能是明顯優於上面的方法。spa
方法三 `code
var arr = [3, 7, 3, 5, 7, 9, 1, 5, 9, 9]
var ary = []
for (var i = 0, len = arr.length; i < len; i++) {
if (ary.indexOf(arr[i]) == -1) {// 核心思想,索引
ary.push(arr[i])
}
}
console.log(ary.sort()) // 輸出 [1, 3, 5, 7, 9]
複製代碼
`這個方法的核心思想是經過indexOf這個方法去ary這個新數組裏查詢arr數組裏的當前項,若是沒有則存入ary,有則不作任何處理。orm
方法四 `對象
var arr = [3, 7, 3, 5, 7, 9, 1, 5, 9, 9]
var ary = []
for (var item of arr) {
if (!ary.includes(item)) {
ary.push(item)
}
}
console.log(ary.sort()) // 輸出 [1, 3, 5, 7, 9]
複製代碼
`這個方法和上面的方法思想是同樣的,這裏也是建立一個新數組,而後在循環arr的過程裏,使用includes來檢測ary這個新數組裏是否有包含這個值,有則什麼都不作,沒有則存入新數組。索引
方法五 `接口
var ary = new Set(arr)
console.log(Array.from(ary).sort()) // 輸出 [1, 3, 5, 7, 9]
複製代碼
`這個方法代碼體很是的簡短,它是應用了es6的新的數據類型Set(),它相似於數組,可是成員的值都是惟一的,沒有重複的值;Set的數據也具有Iterable接口的,因此我直接使用Array.form()把它轉換爲數組就好了。
方法六 `
var ary = []
for (var i = 0, len = arr.length; i < len; i++) { // 方法六
var bol = ary.find(function (item) {
if (item == arr [i]) {
return item
}
})
if (!bol) {
ary.push(arr[i])
}
}
console.log(ary.sort()) // 輸出 [1, 3, 5, 7, 9]
複製代碼
` 這個方法使用了數組方法find,find方法原本就是去搜索數組裏是否有自符合條件的對象,有則返回該對象,沒有則返回undefined,正是由於這個特性,因此在循環前我也新建一個空數組,去執行find,有則啥也不作,沒有則存入。
方法七 `
var ary = []
for (var i = 0, len = arr.length; i < len; i++) { // 方法八
var idx = ary.findIndex(function (item) {
if (item == arr [i]) {
return item
}
})
if (idx == -1) {
ary.push(arr[i])
}
}
console.log(ary.sort()) // 輸出 [1, 3, 5, 7, 9]
複製代碼
`這個相信你們一眼就看明白了,這個和上面的方法同樣,只是換成了findIndex,從找符合條件的返回當前對象變成返回索引,就這一點不一樣,思想都同樣。
方法八 `
var arry = []
var ary = arr.filter(function (item, index) {
if (arry.indexOf(item) == -1) {
arry.push(item);
return item;
}
})
console.log(ary, arry) //輸出[3, 7, 5, 9, 1], [3, 7, 5, 9, 1]
複製代碼
`這個方法呢主要其實也是indexOf來作搜索查詢的,只是把for循環換成了filter而已,因此它的思想和上面使用indexOf的同樣,之所這麼大費周章的演示一下,其目的也是爲了展現一下數組的方法而已,filter這個過濾器的特性。
結語
本篇章節的分享內容相對比前兩篇內容略少,本章節的主要目的就是對數組方法的實踐應用,要了解更多數組特性,能夠去看我前兩篇文章,謝謝。