Skip to content

JavaScript Array Methoden Cheat Sheet

Deze pagina biedt een gedetailleerde gids voor JavaScript-arraymethoden, inclusief veelvoorkomende bewerkingen, nieuwe ES6-functies, prestatie-optimalisatie en meer.

Array Creatie

JavaScript biedt verschillende manieren om arrays te maken:

Gebruik maken van Array Literals 

let arr = [1, 2, 3];

Gebruik maken van de Constructor 

let arr = new Array(1, 2, 3);

Gebruik maken van de Array.of methode 

let arr = Array.of(1, 2, 3);

Gebruik maken van de Array.from methode 

let arr = Array.from('123'); // ['1', '2', '3']

Array Bewerkingen

Arrays bieden een schat aan methoden voor het toevoegen, verwijderen, wijzigen en opvragen van gegevens:

Elementen toevoegen

  • push: Voeg een of meer elementen toe aan het einde van de array
  • unshift: Voeg een of meer elementen toe aan het begin van de array

Elementen verwijderen

  • pop: Verwijder het laatste element van de array
  • shift: Verwijder het eerste element van de array
  • splice: Verwijder elk gewenst aantal elementen op basis van index

Elementen vinden

  • indexOf: Vind de index van een element in de array
  • includes: Bepaal of de array een bepaald element bevat

Itereren door arrays

  • forEach: Voer een callback-functie één keer uit voor elk element in de array
  • map: Creëer een nieuwe array met de resultaten van het aanroepen van een opgegeven functie voor elk element in de aanroepende array
  • filter: Creëer een nieuwe array met alle elementen die de test doorstaan die door de opgegeven functie wordt geïmplementeerd

Array transformatie

  • join: Voeg alle elementen van een array samen tot een string
  • slice: Geef een ondiepe kopie van een deel van een array terug
  • concat: Voeg twee of meer arrays samen

ES6 Nieuwe Functies

ES6 heeft veel verbeteringen aangebracht in array-bewerkingen:

Spread-operator 

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find 

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex 

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill 

arr.fill(0); // [0, 0, 0]

Array.prototype.includes 

arr.includes(2); // true

Prestatie-optimalisatie

Bij het werken met grote arrays is prestatie-optimalisatie bijzonder belangrijk:

  • Probeer native methoden zoals map en filter te gebruiken, die meestal in C++ zijn geïmplementeerd en sneller zijn dan JavaScript-loops.
  • Overweeg voor veel gemanipuleerde arrays het gebruik van Typed Arrays.
  • Vermijd DOM-bewerkingen binnen loops; verzamel in plaats daarvan de te bewerken DOM-nodes en voer de bewerking in één keer uit.

Conclusie

Door deze gids zou u een dieper begrip moeten hebben van JavaScript-array-bewerkingen. Raadpleeg voor meer informatie MDN Web Docs.