hier zijn 3 manieren om duplicaten uit een array te filteren en alleen de unieke waarden terug te geven. Mijn favoriet is het gebruik van Set want het is de kortste en eenvoudigste 😁
const array = ;// 1: "Set";// 2: "Filter"array.filter((item, index) => array.indexOf(item) === index);// 3: "Reduce"array.reduce( (unique, item) => (unique.includes(item) ? unique : ), ,);// RESULT:// ;
# 1. Met behulp van set
laat me eerst beginnen door uit te leggen wat Set is:
Set
is een nieuw data object geà ntroduceerd in ES6. Omdat Set
u alleen unieke waarden laat opslaan. Wanneer u in een array passeert, worden dubbele waarden verwijderd.
Oké, laten we teruggaan naar onze code en opsplitsen wat er gebeurt. Er zijn 2 dingen gaande:
- eerst maken we een nieuwe
Set
door een array door te geven. OmdatSet
alleen unieke waarden toestaat, worden alle duplicaten verwijderd. - nu de duplicaten weg zijn, gaan we het terug converteren naar een array met behulp van de spread operator
...
const array = ;// Step 1const uniqueSet = new Set(array);// Set { '🐑', 1, 2, 3 }// Step 2const backToArray = ;//
# converteer Set naar een Array met behulp van Array.van
u kunt ook Array.from
gebruiken om een Set
om te zetten in een array:
const array = ;Array.from(new Set(array));//
# 2: Met behulp van filter
om deze optie te begrijpen, laten we gaan door wat deze twee methoden doen: indexOf
en filter
# indexOf
de indexOf
methode geeft de eerste index terug die het vindt van het gegeven element uit onze array.
const array = ;array.indexOf('🐑'); // 0array.indexOf(1); // 1array.indexOf(2); // 2array.indexOf(3); // 5
# filter
de filter()
methode maakt een nieuwe array van elementen aan die de voorwaarde passeren die we bieden. Met andere woorden, als het element true
passeert en retourneert, wordt het opgenomen in de gefilterde array. En elk element dat faalt of false
retourneert, zal niet in de gefilterde array staan.
laten we in stappen en doorlopen wat er gebeurt als we door de array lus.
const array = ;array.filter((item, index) => { console.log( // a. Item item, // b. Index index, // c. indexOf array.indexOf(item), // d. Condition array.indexOf(item) === index, ); return array.indexOf(item) === index;});
hieronder staat de uitvoer van de console.log hierboven getoond. De duplicaten zijn waar de index niet overeenkomt met de indexOf. Dus in die gevallen, zal de voorwaarde onwaar zijn en zal niet worden opgenomen in onze gefilterde array.
Item | Index | indexOf | Condition |
---|---|---|---|
🐑 | 0 | 0 | true |
1 | 1 | 1 | true |
2 | 2 | 2 | true |
🐑 | 3 | 0 | false |
🐑 | 4 | 0 | false |
3 | 5 | 5 | true |
# Haal de dubbele waarden
We kunnen ook de filtermethode gebruiken om de dubbele waarden uit de array op te halen. We kunnen dit doen door gewoon onze conditie zo aan te passen:
const array = ;array.filter((item, index) => array.indexOf(item) !== index);//
nogmaals, laat stap door dit en zie de output:
Item | Index | indexOf | Condition |
---|---|---|---|
🐑 | 0 | 0 | false |
1 | 1 | 1 | false |
2 | 2 | 2 | false |
🐑 | 3 | 0 | true |
🐑 | 4 | 0 | true |
3 | 5 | 5 | false |
# 3: Gebruikmakend van reduce
de reduce
methode wordt gebruikt om de elementen van de array te verminderen en ze te combineren tot een uiteindelijke array gebaseerd op een reducer functie die u passeert.
In dit geval controleert onze reducerfunctie of onze uiteindelijke array het item bevat. Als het niet lukt, duw dat item in onze laatste reeks. Anders sla je dat element over en geef je alleen onze laatste array terug zoals het is (in wezen sla je dat element over).
verminderen is altijd wat lastiger om te begrijpen, dus laten we ook in elk geval stappen en de uitvoer bekijken:
const array = ;array.reduce((unique, item) => { console.log( // a. Item item, // b. Final Array (Accumulator) unique, // c. Condition (Remember it only get pushed if this returns `false`) unique.includes(item), // d. Reducer Function Result unique.includes(item) ? unique : , ); return unique.includes(item) ? unique : ;}, ); // 👈 The initial value of our Accumulator is an empty array// RESULT:// ;
en hier is de uitgang van de console.log:
Item | Accumulator (vóór Reductiefunctie) | Push to Accumulator? | Accu (NA Reducer Functie) |
---|---|---|---|
🐑 |
|
Ja |
|
1 |
|
Ja |
|
2 |
|
Ja |
|
🐑 |
|
Geen |
|
🐑 |
|
Geen |
|
3 |
|
Ja |
|
# Communautaire inbreng
-
@smokku:
array.includes(item)
is een idiomatische manier om te testen of array het item bevat -
@riquelkovsky: vandaag deed ik dit door het volgende te doen.
Object.keys(array.reduce((map, next) => ({...map, : true}), {}))
-@luisiacc2: zeker, Set()
zal de truc voor primitve waarden, met objecten een niet O(n^2)
oplossing zou eerst het uitvoeren van een sort()
op de array(die werkt in O(nlogn)
), en dan zoeken naar de aangrenzende gelijke items(die O(n)
) , dus je hebt O(n + nlogn)
.
-
@iamdipankarj: ook,
Array.from(new Set())
, maar dit werkt alleen op primitieven. Voor het filteren van duplicaten in array van aangepaste objecten Array.filter()
is de juiste weg. -
@benawad:
filter
looptijd isO(n^2)