logo

Verwijder dubbele elementen uit JavaScript-array

JavaScript-arrays zijn de gegevensstructuren die meerdere waarden kunnen opslaan. Er kunnen echter veel gevallen zijn waarin een array dubbele elementen bevat. Deze gids begeleidt u bij verschillende methoden om deze duplicaten te verwijderen en een array met unieke elementen te maken.

Opmerking: Meer informatie over JavaScript-arrays



verwijder-dubbele-array-uit-javascript

Methoden om dubbele elementen uit JavaScript-array te verwijderen

Inhoudsopgave



Met behulp van JavaScript-filter()-methode

De filter() methode creëert een nieuwe array van elementen die overeenkomen met de doorgegeven voorwaarde via de callback-functie. Het bevat alleen die elementen waarvoor true wordt geretourneerd.

Voorbeeld: De onderstaande code gebruikt de filter() methode om een ​​duplicaat van een element in de JavaScript-array te verwijderen.

Javascript
let arr = ['apple', 'mango', 'apple',  'orange', 'mango', 'mango']; function removeDuplicates(arr) {  return arr.filter((item,  index) =>arr.indexOf(item) === index); } console.log(verwijderDuplicates(arr));>

Uitvoer
[ 'apple', 'mango', 'orange' ]>

Met behulp van JavaScript set() Methode

Deze methode stelt een nieuw objecttype in met ES6 (ES2015) waarmee u verzamelingen van unieke waarden kunt maken.



Voorbeeld: In dit voorbeeld wordt JavaScript gebruikt set() methode om duplicaten uit een array te verwijderen.

Javascript
let arr = ['apple', 'mango', 'apple',  'orange', 'mango', 'mango']; function removeDuplicates(arr) {  return [...new Set(arr)]; } console.log(removeDuplicates(arr));>

Uitvoer
[ 'apple', 'mango', 'orange' ]>

JavaScript gebruiken voorEach()-methode

Door gebruik te maken van de forEach() methode , kunnen we de elementen in de array herhalen, en we zullen de nieuwe array invoegen als deze niet in de array bestaat.

Voorbeeld: De forEach() methode wordt gebruikt om de elementen uit de JavaScript-array in de onderstaande code te verwijderen.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = [];  arr.forEach(element =>{ if (!unique.includes(element)) { uniek.push(element);  } });  retour uniek; } console.log(verwijderDuplicates(arr));>

Uitvoer
[ 'apple', 'mango', 'orange' ]>

JavaScript gebruiken reduce() Methode

De reduce() methode wordt gebruikt om de elementen van de array te verkleinen en ze te combineren tot een definitieve array op basis van een bepaalde reducerfunctie die u doorgeeft.

Voorbeeld: De methode reduce() wordt gebruikt om duplicaten uit een array in JavaScript te verwijderen.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = arr.reduce(function (acc, curr) {  if (!acc.includes(curr))  acc.push(curr);  return acc;  }, []);  return unique; } console.log(removeDuplicates(arr));>

Uitvoer
[ 'apple', 'mango', 'orange' ]>

Met behulp van de JavaScript-indexOf()-methode

De indexOf()-methode wordt gebruikt om de eerste index van voorkomen van een array-element te vinden. we kunnen de elementen in de array herhalen, en we zullen de nieuwe array invoegen als deze niet bestaat in de resulterende array.

Voorbeeld: In het onderstaande codevoorbeeld wordt de methode indexOf() gebruikt om duplicaten uit een array te verwijderen.

Javascript
let arr = ['apple', 'mango',  'apple', 'orange', 'mango', 'mango']; function removeDuplicates(arr) {  let unique = [];  for (i = 0; i < arr.length; i++) {  if (unique.indexOf(arr[i]) === -1) {  unique.push(arr[i]);  }  }  return unique; } console.log(removeDuplicates(arr));>

Uitvoer
[ 'apple', 'mango', 'orange' ]>

Bibliotheek van derden gebruiken

We kunnen ook een bibliotheek van derden gebruiken, zoals Lodash of Underscore.js om dubbele elementen uit een JavaScript-array te verwijderen. De _.uniq() functie retourneert de array die geen dubbele elementen bevat.

Voorbeeld: De De functie _.uniq() van de underscore.js-bibliotheek wordt in de onderstaande code gebruikt om elementen uit een array te verwijderen.

HTML