JavaSkript-Array-Methoden: Erstellen mit Beispiel

Was ist ein Array in JavaSkript?

Ein Array ist ein Objekt, das a speichern kann Sammlung von GegenständenArrays sind besonders nützlich, wenn Sie große Datenmengen desselben Typs speichern müssen. Angenommen, Sie möchten die Daten von 500 Mitarbeitern speichern. Mit Variablen müssten Sie 500 Variablen erstellen, während Sie dasselbe mit einem einzigen Array erreichen können. Sie können auf die Elemente eines Arrays zugreifen, indem Sie dessen Namen verwenden. Indexnummerund der Index des ersten Elements eines Arrays ist null.

Im Gegensatz zu Arrays in streng typisierten Sprachen, ein JavaSkript-Arrays sind dynamisch. Ihre Länge wächst automatisch, wenn ein neues Element zugewiesen wird, und ein einzelnes Array kann gleichzeitig Zeichenketten, Zahlen, boolesche Werte, Objekte und sogar andere Arrays enthalten. Diese Flexibilität macht Arrays zum Standardcontainer für Listendaten sowohl in Browser-Skripten als auch in serverseitigem Code.

Wie man ein Array erstellt in JavaSkript

Sie können ein Array erstellen in JavaSkript wie unten angegeben.

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

Hier initialisieren Sie Ihr Array, sobald es mit den Werten „John“, „Ann“ und „Kevin“ erstellt wird. Der Index von „John“, „Ann“ und „Kevin“ ist 0, 1 bzw. 2. Wenn Sie dem Students-Array weitere Elemente hinzufügen möchten, können Sie dies folgendermaßen tun:

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

Sie können ein Array auch mithilfe des Array-Konstruktors wie folgt erstellen:

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

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Wie man auf Array-Elemente zugreift und diese ändert

Jedes Element befindet sich an einer nummerierten Position. Die Notation in eckigen Klammern liest einen Wert, weist einen neuen Wert zu oder fügt einen neuen Eintrag hinzu, wenn der Index der aktuellen Länge entspricht.

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

JavaSkript-Array-Methoden

Das Array-Objekt verfügt über viele Eigenschaften und Methoden, die Entwicklern helfen, Arrays einfach und effizient zu verwalten. Sie können den Wert einer Eigenschaft durch Angabe von arrayname.property und die Ausgabe einer Methode durch Angabe von arrayname.method() abrufen.

1. Längeneigenschaft –> Wenn Sie die Anzahl der Elemente in einem Array wissen möchten, können Sie die Längeneigenschaft verwenden.
2. Prototyp-Eigenschaft –> Wenn Sie neue Eigenschaften und Methoden hinzufügen möchten, können Sie die Prototyp-Eigenschaft verwenden.
3. umgekehrte Methode –> Sie können die Reihenfolge der Elemente in einem Array mithilfe einer Umkehrmethode umkehren.
4. Sortiermethode –> Sie können die Elemente in einem Array mit der Sortiermethode sortieren.
5. Pop-Methode –> Sie können das letzte Element eines Arrays mithilfe einer Pop-Methode entfernen.
6. Schichtmethode –> Mit der shift-Methode können Sie das erste Element eines Arrays entfernen.
7. Push-Methode –> Sie können einen Wert als letztes Element des Arrays hinzufügen.

Die untenstehende Referenztabelle gruppiert die am häufigsten verwendeten Methoden, sodass Sie auf einen Blick erkennen können, welche Methoden das ursprüngliche Array verändern und welche einen neuen Wert zurückgeben.

Elemente hinzufügen und entfernen

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);

Suchen, Kopieren und Verbinden

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

Iterationsmethoden: forEach, map, filter und reduce

Modernes JavaDas Skript bevorzugt Callback-gesteuerte Methoden gegenüber manuellen Indexschleifen, da die Absicht der Operation direkt im Methodennamen angegeben ist.

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);

JavaSkript-Array-Beispiel mit Quellcode Code

Das folgende Skript erstellt ein Array von Studenten, fügt über die Prototyp-Eigenschaft eine benutzerdefinierte Anzeigemethode hinzu und demonstriert anschließend nacheinander die Funktionen `length`, `sort`, `reverse`, `pop` und `push`. Probieren Sie es selbst aus:

<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>

Erwartete Ausgabe:

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

Beachten Sie, dass `sort` „Aaron“ vor „Ann“ einordnet, da Groß- und Kleinbuchstaben anhand ihrer Zeichencodes verglichen werden. Beachten Sie außerdem, dass `pop` „Aaron“ aus dem umgekehrten Array entfernt hat, was bestätigt, dass sowohl `sort` als auch `reverse` das ursprüngliche Array verändert haben.

Wie man eine Schleife durchläuft JavaSkript-Array

Vier Toilettenping Es stehen verschiedene Stile zur Verfügung, und jeder eignet sich für eine andere Situation. Die klassische for-Schleife ermöglicht die volle Kontrolle über den Index, for…of liest Werte direkt, forEach drückt die Absicht klar aus, und for…in sollte für Objekteigenschaften reserviert bleiben.

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);
}

Eine ausführlichere Behandlung der Schleifensyntax, einschließlich while und do…while, findet sich im Artikel über wie man Schleifen verwendet JavaSkript.

Mehrdimensionale Arrays in JavaSkript

JavaDas Skript kennt keinen dedizierten Matrixtyp. Ein Grid ist einfach ein Array, dessen Elemente selbst Arrays sind, und es werden zwei Indexausdrücke verwendet, um auf eine einzelne Zelle zuzugreifen.

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]

Ausgang:

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

Arrays kommen in fast jedem praktischen Skript vor, von der Formularvalidierung bis zur Datendarstellung. Weiter mit dem praktisch JavaSkriptcodebeispiele, Rezension JavaSkriptzeichenfolgen zur Textverarbeitung und lesen Sie mehr darüber intern und extern JavaSkript um zu entscheiden, wo diese Skripte auf einer Seite platziert werden sollen. Entwickler, die eine statische Typüberprüfung für Array-Inhalte wünschen, können zum nächsten Schritt übergehen. TypeScript Lernprogramm.

Häufig gestellte Fragen