JavaScript-Arrays


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Ein Array ist eine spezielle Variable, die mehr als einen Wert enthalten kann:

const cars = ["Saab", "Volvo", "BMW"];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Warum Arrays verwenden?

Wenn Sie über eine Liste mit Elementen verfügen (z. B. eine Liste mit Autonamen), speichern Sie diese Autos in einzelnen Variablen könnten so aussehen:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Was aber, wenn Sie die Autos durchgehen und ein bestimmtes finden möchten? Und was wäre, wenn Sie nicht 3, sondern 300 Autos hätten?

Die Lösung ist ein Array!

Ein Array kann viele Werte unter einem einzigen Namen enthalten, und das ist auch möglich Greifen Sie auf die Werte zu, indem Sie auf eine Indexnummer verweisen.


Erstellen eines Arrays

Die Verwendung eines Array-Literals ist die einfachste Möglichkeit, ein JavaScript-Array zu erstellen.

Syntax:

const array_name = [item1, item2, ...];       

Es ist üblich, Arrays mit dem Schlüsselwort const zu deklarieren.

Erfahren Sie mehr über const mit Arrays im Kapitel: JS Array Const.

Beispiel

const cars = ["Saab", "Volvo", "BMW"];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Leerzeichen und Zeilenumbrüche sind nicht wichtig. Eine Deklaration kann sich über mehrere Zeilen erstrecken:

Beispiel

const cars = [
  "Saab",
    "Volvo",
    "BMW"
];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Sie können auch ein Array erstellen und dann die Elemente bereitstellen:

Beispiel

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Verwendung des JavaScript-Schlüsselworts new

Das folgende Beispiel erstellt ebenfalls ein Array und weist ihm Werte zu:

Beispiel

const cars = new Array("Saab", "Volvo", "BMW");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Die beiden obigen Beispiele machen genau das Gleiche.

Es ist nicht erforderlich, new Array() zu verwenden.

Aus Gründen der Einfachheit, Lesbarkeit und Ausführungsgeschwindigkeit verwenden Sie die Array-Literal-Methode.



Zugreifen auf Array-Elemente

Sie greifen auf ein Array-Element zu, indem Sie auf die Indexnummer verweisen:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Hinweis: Array-Indizes beginnen mit 0.

[0] ist das erste Element. [1] ist das zweite Element.


Ändern eines Array-Elements

Diese Anweisung ändert den Wert des ersten Elements in cars:

cars[0] = "Opel";

Beispiel

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>


Konvertieren eines Arrays in einen String

Die JavaScript-Methode toString() konvertiert ein Array in ein Zeichenfolge von (durch Kommas getrennten) Array-Werten.

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Ergebnis :

Banana,Orange,Apple,Mango

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Greifen Sie auf das vollständige Array zu

Mit JavaScript kann auf das gesamte Array zugegriffen werden, indem auf das Array verwiesen wird Name:

Beispiel

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>


Arrays sind Objekte

Arrays sind eine besondere Art von Objekten. Der Operator typeof in JavaScript gibt „Objekt“ für zurück Arrays.

JavaScript-Arrays lassen sich jedoch am besten als Arrays beschreiben.

Arrays verwenden Zahlen, um auf ihre „Elemente“ zuzugreifen. In diesem Beispiel: person[0] gibt John zurück:

Array:

const person = ["John", "Doe", 46];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Objekte verwenden Namen, um auf ihre „Mitglieder“ zuzugreifen. In diesem Beispiel, person.firstName gibt John zurück:

Objekt :

const person = {firstName:"John", lastName:"Doe", age:46};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>


Array-Elemente können Objekte sein

JavaScript-Variablen können Objekte sein. Arrays sind spezielle Arten von Objekten.

Aus diesem Grund können Sie Variablen unterschiedlichen Typs in der haben gleiches Array.

Sie können Objekte in einem Array haben. Sie können Funktionen in einem Array haben. Du kannst haben Arrays in einem Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array-Eigenschaften und -Methoden

Die wahre Stärke von JavaScript-Arrays sind die integrierten Array-Eigenschaften und Methoden:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Array-Methoden werden in den nächsten Kapiteln behandelt.


Die Längeneigenschaft

Die Eigenschaft length eines Arrays gibt die Länge eines Arrays zurück (die Anzahl der Arrays). Elemente).

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Die Eigenschaft length ist immer um eins größer als der höchste Array-Index.


Zugriff auf das erste Array-Element

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>

</body>
</html>

Zugriff auf das letzte Array-Element

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>

</body>
</html>

Schleifenförmige Array-Elemente

Eine Möglichkeit, ein Array zu durchlaufen, ist die Verwendung einer for-Schleife:

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text 
  += "</ul>";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Sie können auch die Funktion Array.forEach() verwenden:

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function for each array element:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Array-Elemente hinzufügen

Der einfachste Weg, ein neues Element zu einem Array hinzuzufügen, ist die Verwendung der Methode push():

Beispiel

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Ein neues Element kann auch mithilfe der Eigenschaft length zu einem Array hinzugefügt werden:

Beispiel

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

WARNUNG!
<p>Das Hinzufügen von Elementen mit hohen Indizes kann undefinierte „Löcher“ in einem Array erzeugen:

Beispiel

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Assoziative Arrays

Viele Programmiersprachen unterstützen Arrays mit benannten Indizes.

Arrays mit benannten Indizes werden als assoziativ bezeichnet Arrays (oder Hashes).

JavaScript unterstützt Arrays mit benannten Indizes nicht.

In JavaScript verwenden Arrays immer nummerierte Indizes.

Beispiel

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

WARNUNG!!
Wenn Sie benannte Indizes verwenden, definiert JavaScript das Array in ein Objekt um.

Danach führen einige Array-Methoden und -Eigenschaften zu falschen Ergebnissen Ergebnisse.

Beispiel:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>


Der Unterschied zwischen Arrays und Objekten

In JavaScript verwenden Arrays nummerierte Indizes.

In JavaScript verwenden Objekte benannte Indizes.

Arrays sind eine besondere Art von Objekten mit nummerierten Indizes.


Wann man Arrays verwendet. Wann werden Objekte verwendet?

  • JavaScript unterstützt keine assoziativen Arrays.

  • Sie sollten objects verwenden, wenn Sie die Elementnamen verwenden möchten Zeichenfolgen (Text).

  • Sie sollten Arrays verwenden, wenn die Elementnamen wie folgt aussehen sollen Zahlen.


JavaScript neues Array()

JavaScript verfügt über einen integrierten Array-Konstruktor new Array().

Aber Sie können stattdessen getrost [] verwenden.

Diese beiden unterschiedlichen Anweisungen erstellen beide ein neues leeres Array mit dem Namen „points“:

const points = new Array();
const points = [];

Diese beiden unterschiedlichen Anweisungen erstellen beide ein neues Array mit 6 Zahlen:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

<p id="demo"></p>

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Das Schlüsselwort new kann zu unerwarteten Ergebnissen führen:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>
// Create an array with two elements:
const points = new Array(40, 100);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>
// Create an array with one element ???
const points = new Array(40);  

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

Ein häufiger Fehler

const points = [40];

ist nicht dasselbe wie:

const points = new Array(40);
// Create an array with one element:
const points = [40];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Create an Array with one element.</p>

<p id="demo"></p>

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>
// Create an array with 40 undefined elements:
const points = new Array(40);  

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

So erkennen Sie ein Array

Eine häufig gestellte Frage lautet: Woher weiß ich, ob eine Variable ein Array ist?

Das Problem besteht darin, dass der JavaScript-Operator typeof zurückgibt „Objekt“:

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

Der Operator „typeof“ gibt ein Objekt zurück, da ein JavaScript-Array ein ist Objekt.

Lösung 1:

Um dieses Problem zu lösen, hat ECMAScript 5 (JavaScript 2009) eine neue Methode Array.isArray() definiert:

Array.isArray(fruits);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Lösung 2:

Der Operator instanceof gibt true zurück, wenn ein Objekt erstellt wird von einem gegebenen Konstruktor:

const fruits = ["Banana", "Orange", "Apple"];
    
fruits instanceof Array;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

Vollständige Array-Referenz

Eine vollständige Array-Referenz finden Sie in unserem:

Vollständige JavaScript-Array-Referenz.

Die Referenz enthält Beschreibungen und Beispiele aller Arrays Eigenschaften und Methoden.