摘要:實際上他進行了以下的操作首先,我們創建了新的并且把數組當作入參傳遞了進去,由于僅僅允許唯一值,所以所有重復值將會被移除?,F在重復值已經消失了,我們將會利用把它重新轉為數組。
以下是三種方法從數組里去重,并且返回唯一的值。我最喜歡的方式是使用Set,因為它是最短最簡單的。
const array = [5, 2, 4, 5, 3]; console.log([...new Set(array)]) console.log(array.filter((item, index) => array.indexOf(item) === index)) console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], [])) // result: [5, 2, 4, 3]
使用Set
讓我開始解釋Set是什么吧:
Set是由es6引入的一種新的數據對象,由于Set只允許你存儲唯一值,所以當傳遞進去一個數組的時候,它將會移除任何重復的值。
好啦,然我們回到我們的代碼中來看下到底都發生了什么。實際上他進行了以下的操作:
首先,我們創建了新的Set并且把數組當作入參傳遞了進去,由于Set僅僅允許唯一值,所以所有重復值將會被移除。
現在重復值已經消失了,我們將會利用...把它重新轉為數組。
const array = [5, 2, 4, 5, 3]; const set = new Set(array) const newArr = [...set] console.log(newArr) // result: [5, 2, 4, 3]
使用Array.from()函數來吧Set轉為數組
另外呢,你也可以使用Array.from()來吧Set轉為數組。
const array = [5, 2, 4, 5, 3]; const set = new Set(array) const newArr = Array.from(set) console.log(newArr) // result: [5, 2, 4, 3]
使用filter
為了理解這個選項,讓我們來看看這兩個方法都做了什么:indexOf和filter
indexOf()
indexOf()返回我們從數組里找到的第一個元素的索引。
const array = [5, 2, 4, 5, 3]; console.log(array.indexOf(5)) // 0 console.log(array.indexOf(2)) // 1 console.log(array.indexOf(8)) // -1
filter
filter()函數會根據我們提供的條件創建一個新的數組。換一種說法,如果元素通過并且返回true,它將會包含在過濾后的數組中,如果有元素失敗并且返回false,那么他就不會包含在過濾后的數組中。
我們逐步看看在每次循環數組的時候都發生了什么。
const array = [5, 2, 4, 5, 3]; array.filter((item, index) => { console.log(item, index, array.indexOf(item), array.indexOf(item) === index) return array.indexOf(item) === index }) //輸出 // 5 0 0 true // 2 1 1 true // 4 2 2 true // 5 3 0 false // 3 4 4 true
上面輸出的代碼見注釋。重復的元素不再于indexOf相匹配,所以在這些情況下,它的結果將會是false并且將不會被包含進過濾后的值當中。
檢索重復的值
我們也可以在數組中利用filter()函數來檢索重復的值。我們只需要像這樣簡單的調整下代碼:
const array = [5, 2, 4, 5, 3]; array.filter((item, index) => { console.log(item, index, array.indexOf(item), array.indexOf(item) !== index) return array.indexOf(item) !== index }) //輸出 // 5 0 0 false // 2 1 1 false // 4 2 2 false // 5 3 0 true // 3 4 4 false
使用reduce()函數
reduce()函數用于減少數組的元素并根據你傳遞過去的reducer函數,把他們最終合并到一個最終的數組中,
在這種情況下,我們的reducer()函數我們最終的數組是否包含了這個元素,如果不包含,就吧他放進最終的數組中,反之則跳過這個元素,最后再返回我們最終的元素。
reduce()函數理解起來總是有那么一點費勁,所以呢,咱們現在看下他是怎么運行的。
const array = [5, 2, 4, 5, 3]; array.reduce((unique, item) => { console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item]) return unique.includes(item) ? unique: [...unique, item] }, []) //輸出 // 5 [] false [5] // 2 [5] false [5, 2] // 4 [5, 2] false [5, 2, 4] // 5 [5, 2, 4] true [5, 2, 4] // 3 [5, 2, 4] false [5, 2, 4, 3]
轉載自:http://www.lht.ren/article/12/
歡迎關注本人微信公眾號:干貨技術
翻譯自:
https://medium.com/dailyjs/ho...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101060.html
摘要:工作過程中經常會用到數組去重,用到的時候往往一時想不到好方法,所以這里來總結一下去重方法。和方法分別為添加成員方法和得到鍵值方法。因此,利用方法也可以實現數組的去重。 工作過程中經常會用到數組去重,用到的時候往往一時想不到好方法,所以這里來總結一下去重方法。使用es6去重代碼很簡單,而且ES6已經相當普及了。所以先來介紹一下es6中的方法。 1.ES6中Map結構方法 function...
摘要:數組去重看了網上很多數組去重方法,用的比較常見的大概就幾種,今天想自己來做一個總結。還有就是方法返回的數組也是排序后的數組,某些情況下可能不符合要求。 JS數組去重 看了網上很多數組去重方法,用的比較常見的大概就幾種,今天想自己來做一個總結。部分內容參考該博客 1 . 在原數組上操作(基本方法) 思路:利用循環嵌套,判斷數組中每個元素與其后面的元素是否相等,如果相等,就使用spli...
摘要:數組去重是校招面試的必考知識點。以下就是筆者所實現的數組去重的幾種簡單的方式。結合實現這種方法的關鍵點就是判斷是否相同的時候不要忽略對元素類型的判斷。以上就是筆者所想到的幾個數組去重的方式大家如果有更好的方法歡迎留言。 數組去重,是校招面試的必考知識點。簡單的說,數組去重就是將一個數組中的相同的元素刪除,只保留其中的一個。這里的相同其實是一個陷阱,有好多同學只認為值相等即為相同,而忽略...
閱讀 2931·2023-04-26 02:22
閱讀 2290·2021-11-17 09:33
閱讀 3134·2021-09-22 16:06
閱讀 1072·2021-09-22 15:54
閱讀 3536·2019-08-29 13:44
閱讀 1914·2019-08-29 12:37
閱讀 1321·2019-08-26 14:04
閱讀 1914·2019-08-26 11:57