Een array in JavaScript is een gegevensstructuur die wordt gebruikt om meerdere waarden in één variabele op te slaan. Het kan verschillende gegevenstypen bevatten en maakt dynamisch aanpassen van de grootte mogelijk. Elementen zijn toegankelijk via hun index, beginnend bij 0.

JavaScript-array

Er zijn twee manieren om JavaScript-arrays te maken: met behulp van de Array-constructor of de letterlijke syntaxis van een verkorte array , wat alleen maar vierkante haken zijn. Arrays zijn flexibel qua formaat, zodat ze kunnen groeien of krimpen als u elementen toevoegt of verwijdert.

Inhoudsopgave

• Wat is Array in JavaScript?
• Basisterminologieën van JavaScript-array
• Verklaring van een array
• Basisbewerkingen op JavaScript-arrays
• Verschil tussen JavaScript-arrays en objecten
• Wanneer moet ik JavaScript-arrays en -objecten gebruiken?
• Een JavaScript-array herkennen
• Volledige referentie voor JavaScript-array
• Voorbeelden van JavaScript-arrays
• JavaScript-cheatsheet

Basisterminologieën van JavaScript-array

• Array: Een gegevensstructuur in JavaScript waarmee u meerdere waarden in één variabele kunt opslaan.
• Array-element: Elke waarde binnen een array wordt een element genoemd. Elementen zijn toegankelijk via hun index.
• Array-index: Een numerieke representatie die de positie van een element in de array aangeeft. JavaScript-arrays zijn nul-geïndexeerd, wat betekent dat het eerste element op index 0 staat.
• Arraylengte: Het aantal elementen in een array. Het kan worden opgehaald met behulp van de lengte-eigenschap.

Verklaring van een array

Er zijn in principe twee manieren om een ​​array te declareren, namelijk Array Literal en Array Constructor.

1. Een array maken met Array Literal

Bij het maken van een array met behulp van array literal worden vierkante haakjes [] gebruikt om de array te definiëren en te initialiseren. Deze methode is beknopt en wordt vanwege zijn eenvoud algemeen geprefereerd.

Syntaxis:

let arrayName = [value1, value2, ...];>

Voorbeeld:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Een array maken met Array Constructor (nieuw JavaScript-trefwoord)

De Array Constructor verwijst naar een methode voor het maken van arrays door de Array constructor-functie aan te roepen. Deze aanpak maakt dynamische initialisatie mogelijk en kan worden gebruikt om arrays met een opgegeven lengte of elementen te maken.

Syntaxis:

let arrayName = new Array();>

Voorbeeld:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Opmerking: Beide bovenstaande methoden doen precies hetzelfde. Gebruik de letterlijke array-methode voor efficiëntie, leesbaarheid en snelheid.

Basisbewerkingen op JavaScript-arrays

1. Toegang tot elementen van een array

Elk element in de array is toegankelijk via het indexnummer. De index in de arrays begint met 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Toegang tot het eerste element van een array

De array-indexering begint vanaf 0, dus we hebben toegang tot het eerste element van de array met behulp van het indexnummer.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Toegang tot het laatste element van een array

We hebben toegang tot het laatste array-element met behulp van het indexnummer [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. De array-elementen wijzigen

Elementen in een array kunnen worden gewijzigd door een nieuwe waarde aan hun overeenkomstige index toe te wijzen.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Elementen aan de array toevoegen

Elementen kunnen aan de array worden toegevoegd met methoden als push() en unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Elementen uit een array verwijderen

Verwijder elementen met methoden als pop(), shift() of splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Uitvoer

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Arraylengte

Haal de lengte van een array op met behulp van de eigenschap length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Vergroot en verklein de arraylengte

We kunnen de arraylengte vergroten en verkleinen met behulp van de JavaScript-lengte-eigenschap.

bash aaneengeschakelde snaren

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Itereren door array-elementen

We kunnen array herhalen en toegang krijgen tot array-elementen met for en forEach-lus.

Voorbeeld: Het is een voorbeeld van een for-lus.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Voorbeeld: Het is het voorbeeld van Array.forEach() lus.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Aaneenschakeling van arrays

Combineer twee of meer arrays met behulp van de concat() methode. Ir retourneert een nieuwe array met samengevoegde array-elementen.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Conversie van een array naar string

We hebben een ingebouwde methode toString() to converteert een array naar een string.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Controleer het type array

Het JavaScript soort van operator wordt gebruikt om het type van een array te controleren. Het retourneert een object voor arrays.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Verschil tussen JavaScript-arrays en objecten

• JavaScript-arrays gebruiken indexen als getallen.
• objecten gebruiken indexen als namen.

Wanneer moet ik JavaScript-arrays en -objecten gebruiken?

• Arrays worden gebruikt als we willen dat elementnamen numeriek zijn.
• Objecten worden gebruikt als we willen dat elementnamen strings zijn.

Een JavaScript-array herkennen

Er zijn twee methoden waarmee we een JavaScript-array kunnen herkennen:

• Door het gebruiken van Array.isArray() methode
• Door het gebruiken van exemplaarvan methode

Hieronder ziet u een voorbeeld waarin beide benaderingen worden weergegeven:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Opmerking: Er wordt een veel voorkomende fout aangetroffen tijdens het schrijven van de arrays:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

De bovenstaande twee uitspraken zijn niet hetzelfde.

Uitgang: Deze instructie creëert een array met een element [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

Volledige referentie voor JavaScript-array

We hebben een volledige lijst met Javascript-arrays. Om deze te controleren, kunt u deze doornemen JavaScript-arrayreferentie artikel. Het bevat een gedetailleerde beschrijving en voorbeelden van alle Array-eigenschappen en -methoden.

Voorbeelden van JavaScript-arrays

JavaScript Array-voorbeelden bevatten een lijst met vragen die vooral in interviews worden gesteld. Controleer dit artikel Voorbeelden van JavaScript-arrays voor meer details.

JavaScript-cheatsheet

We hebben een Cheat Sheet over Javascript waarin we alle belangrijke Javascript-onderwerpen hebben behandeld om deze te controleren Javascript Cheat Sheet-Een basisgids voor JavaScript .