JavaScript Array Methoden: Maken met Voorbeeld

Wat is een array in JavaScript?

Een array is een object dat een verzameling van itemsArrays zijn erg handig wanneer je grote hoeveelheden data van hetzelfde type moet opslaan. Stel dat je de gegevens van 500 werknemers wilt opslaan. Als je variabelen gebruikt, moet je 500 variabelen aanmaken, terwijl je hetzelfde kunt doen met één enkele array. Je kunt de items in een array benaderen door ernaar te verwijzen. indexnummerEn de index van het eerste element van een array is nul.

In tegenstelling tot arrays in strikt getypeerde talen, is een JavaEen scriptarray is dynamisch. De lengte ervan groeit automatisch wanneer een nieuw element wordt toegewezen, en een enkele array kan tegelijkertijd strings, getallen, booleans, objecten en zelfs andere arrays bevatten. Deze flexibiliteit maakt arrays de standaardcontainer voor lijstgegevens in zowel browserscripts als servercode.

Hoe maak je een array aan in JavaScript

Je kunt er een array van maken JavaScript zoals hieronder gegeven.

var students = ["John", "Ann", "Kevin"];

Hier initialiseert u uw array zoals en wanneer deze wordt gemaakt met de waarden “John”, “Ann” en “Kevin”. De index van “John”, “Ann” en “Kevin” is respectievelijk 0, 1 en 2. Als je meer elementen aan de studentenarray wilt toevoegen, kun je dat als volgt doen:

students[3] = "Emma";
students[4] = "Rose";

Je kunt ook een array maken met behulp van de Array-constructor, bijvoorbeeld zo:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Hoe krijg je toegang tot en kun je array-elementen wijzigen?

Elk element bevindt zich op een genummerde positie. De notatie tussen vierkante haken geeft een waarde weer, kent een nieuwe waarde toe of voegt een nieuw element toe wanneer de index gelijk is aan de huidige lengte.

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaScript Array-methoden

Het Array-object heeft veel eigenschappen en methoden waarmee ontwikkelaars eenvoudig en efficiënt met arrays kunnen omgaan. U kunt de waarde van een eigenschap verkrijgen door arrayname.property op te geven, en de uitvoer van een methode door arrayname.method() op te geven.

1. lengte eigenschap –> Als u het aantal elementen in een array wilt weten, kunt u de eigenschap length gebruiken.
2. prototype eigendom –> Als u nieuwe eigenschappen en methoden wilt toevoegen, kunt u de prototype-eigenschap gebruiken.
3. omgekeerde methode –> U kunt de volgorde van items in een array omkeren met behulp van een omgekeerde methode.
4. sorteermethode –> Je kunt de items in een array sorteren met behulp van de sorteermethode.
5. pop-methode –> U kunt het laatste item van een array verwijderen met behulp van een pop-methode.
6. verschuivingsmethode –> Je kunt het eerste element van een array verwijderen met behulp van de shift-methode.
7. push-methode –> U kunt een waarde toevoegen als laatste item van de array.

De onderstaande referentietabel groepeert de meest gebruikte methoden, zodat u in één oogopslag kunt zien welke de oorspronkelijke array wijzigen en welke een nieuwe waarde retourneren.

Elementen toevoegen en verwijderen

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Zoeken, kopiëren en samenvoegen

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Iteratiemethoden: forEach, map, filter en reduce

MODERN JavaScript geeft de voorkeur aan callback-gestuurde methoden boven handmatige indexloops, omdat het doel van de bewerking direct in de methodenaam wordt vermeld.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaVoorbeeld van een scriptarray met broncode Code

Het onderstaande script bouwt een array met studenten op, voegt een aangepaste weergavemethode toe via de prototype-eigenschap en demonstreert vervolgens de functies lengte, sorteren, omkeren, verwijderen en toevoegen in de juiste volgorde. Probeer het zelf:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Verwachte resultaten:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Merk op dat sort "Aaron" vóór "Ann" plaatst, omdat hoofdletters en kleine letters worden vergeleken op basis van hun tekencodes. Merk ook op dat pop "Aaron" uit de omgekeerde array heeft verwijderd, wat bevestigt dat zowel sort als reverse de oorspronkelijke array op zijn plaats hebben gewijzigd.

Hoe je een lus kunt doorlopen JavaScriptarray

Vier toilettenping Er zijn verschillende stijlen beschikbaar, en elke stijl is geschikt voor een andere situatie. De klassieke `for`-lus biedt volledige controle over de index, `for…of` leest waarden direct in, `forEach` drukt de intentie duidelijk uit en `for…in` moet worden gereserveerd voor objecteigenschappen.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Een uitgebreidere behandeling van de syntaxis van lussen, inclusief while en do…while, is te vinden in het artikel over hoe lussen te gebruiken in JavaScript.

Multidimensionale arrays in JavaScript

JavaScript heeft geen specifiek matrixtype. Een raster is simpelweg een array waarvan de elementen zelf ook arrays zijn, en er worden twee indexuitdrukkingen gebruikt om een ​​enkele cel te bereiken.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Output:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Arrays komen in vrijwel elk praktisch script voor, van formuliervalidatie tot gegevensweergave. Ga verder met de praktisch JavaScriptcodevoorbeelden, beoordeling JavaScriptstrings voor tekstverwerking, en lees meer over intern en extern JavaScript om te bepalen waar deze scripts op een pagina thuishoren. Ontwikkelaars die statische typecontrole willen uitvoeren op array-inhoud kunnen verdergaan met de TypeScript zelfstudie.

Veelgestelde vragen