Grundlegendes zu Arrays in JavaScript

Einführung

Einarray in JavaScript ist eine Art globales Objekt, das zum Speichern von Daten verwendet wird. Arrays bestehen aus einer geordneten Sammlung oder Liste mit null oder mehr Datentypen und verwenden nummerierte Indizes ab0, um auf bestimmte Elemente zuzugreifen.

Arrays sind sehr nützlich, da sie mehrere Werte in einer einzigen Variablen speichern. Dadurch kann unser Code komprimiert und organisiert werden, sodass er besser lesbar und besser pflegbar ist. Arrays können beliebigedata type enthalten, einschließlichnumbers,strings undobjects.

Um zu demonstrieren, wie nützlich Arrays sein können, sollten Sie erwägen, die fünf Ozeane der Welt ihren eigenen Variablen zuzuweisen.

oceans.js

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

Diese Methode ist sehr ausführlich und kann schnell schwierig zu warten und zu verfolgen sein.

Mithilfe von Arrays können wir unsere Daten vereinfachen.

oceans.js

// Assign the five oceans
let oceans = [
    "Pacific",
    "Atlantic",
    "Indian",
    "Arctic",
    "Antarctic",
];

Anstatt fünf separate Variablen zu erstellen, haben wir jetzt eine Variable, die alle fünf Elemente enthält. Wir haben eckige Klammern -[] - verwendet, um ein Array zu erstellen.

Um auf ein bestimmtes Element zuzugreifen, hängen Sie den Index an die Variable an.

// Print out the first item of the oceans array
oceans[0];

OutputPacific

In diesem Lernprogramm erfahren Sie, wie Sie Arrays erstellen. wie sie indiziert sind; wie Elemente in einem Array hinzugefügt, geändert, entfernt oder darauf zugegriffen werden; und wie man Arrays durchläuft.

Erstellen eines Arrays

Es gibt zwei Möglichkeiten, ein Array in JavaScript zu erstellen:

Das Array-Literal, das eckige Klammern verwendet.
Der Array-Konstruktor, der das Schlüsselwortnewverwendet.

Lassen Sie uns zeigen, wie Sie mit dem Array-Literal, das mit[] initialisiert wird, ein Array von Haiarten erstellen.

sharks.js

// Initialize array of shark species with array literal
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

Hier sind die gleichen Daten, die mit dem Array-Konstruktor erstellt wurden, der mitnew Array() initialisiert wird.

sharks.js

// Initialize array of shark species with array constructor
let sharks = new Array(
    "Hammerhead",
    "Great White",
    "Tiger",
);

Beide Methoden erstellen ein Array. Die Array-Literal-Methode (eckige Klammern) ist jedoch weitaus häufiger und bevorzugter, da die Konstruktormethode vonnew Array()Inkonsistenzen und unerwartete Ergebnisse aufweisen kann. Es ist hilfreich, sich des Array-Konstruktors bewusst zu sein, falls er später auftritt.

Wir können ein ganzes Array ausdrucken, das das gleiche wie unsere Eingabe anzeigt.

// Print out the entire sharks array
sharks;

Output[ 'Hammerhead', 'Great White', 'Tiger' ]

Arrays werden häufig verwendet, um Listen mit ähnlichen Datentypen zu gruppieren. Sie können jedoch technisch alle Werte oder Wertemischungen enthalten, einschließlich anderer Arrays.

// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

Nachdem Sie ein Array erstellt haben, können Sie es auf verschiedene Arten bearbeiten. Zunächst müssen Sie jedoch verstehen, wie Arrays indiziert werden.

[.note] #Note: Möglicherweise wird das letzte Element in einem Array mit oder ohne Komma angezeigt. Dies ist alstrailing comma bekannt. Es ist üblich, sie wegzulassen, aber im Allgemeinen wird es bevorzugt, sie in Ihren Code aufzunehmen, da dies die Unterschiede in der Versionskontrolle klarer macht und das Hinzufügen und Entfernen von Elementen ohne Fehler erleichtert. Beachten Sie, dass nachfolgende Kommas inJSON files.
# nicht zulässig sind.

Indizierung von Arrays

Wenn Sie etwas überindexing and manipulating strings in JavaScript gelernt haben, sind Sie möglicherweise bereits mit dem Konzept der Indizierung von Arrays vertraut, da eine Zeichenfolge einem Array ähnlich ist.

Arrays haben keine Name / Wert-Paare. Stattdessen werden sie mit ganzzahligen Werten indiziert, die mit0 beginnen. Hier ist ein Beispielarray, dasseaCreatures zugewiesen ist.

seacreatures.js

let seaCreatures = [
    "octopus",
    "squid",
    "shark",
    "seahorse",
    "starfish",
];

Hier ist eine Aufschlüsselung, wie jedes Element im ArrayseaCreaturesindiziert wird.

Tintenfisch	Tintenfisch	Hai	Seepferdchen	Seestern
0	1	2	3	4

Tintenfisch

Hai

Seepferdchen

Seestern

Das erste Element im Array istoctopus, das bei0 indiziert ist. Das letzte Element iststarfish, das bei4 indiziert ist. Das Zählen beginnt mit0 in Indizes, was unserer natürlichen Intuition widerspricht, mit dem Zählen bei 1 zu beginnen. Daher muss besonders darauf geachtet werden, sich daran zu erinnern, bis es natürlich wird.

Mit der Eigenschaftlengthkönnen wir herausfinden, wie viele Elemente sich in einem Array befinden.

seaCreatures.length;

Output5

Obwohl die Indizes vonseaCreatures aus0 bis4 bestehen, gibt die Eigenschaftlength die tatsächliche Anzahl der Elemente im Array aus, beginnend mit 1.

Wenn wir die Indexnummer eines bestimmten Elements in einem Array ermitteln möchten, z. B.seahorse, können wir die MethodeindexOf() verwenden.

seaCreatures.indexOf("seahorse");

Output3

Wenn keine Indexnummer gefunden wird, z. B. für einen nicht vorhandenen Wert, gibt die Konsole-1 zurück.

seaCreatures.indexOf("cuttlefish");

Output-1

Mit Indexnummern, die Elementen in einem Array entsprechen, können wir diskret auf jedes Element zugreifen, um mit diesen Elementen zu arbeiten.

Zugreifen auf Elemente in einem Array

Auf ein Element in einem JavaScript-Array wird zugegriffen, indem auf die Indexnummer des Elements in eckigen Klammern verwiesen wird.

seaCreatures[1];

Outputsquid

Wir wissen, dass0 immer das erste Element in einem Array ausgibt. Wir können das letzte Element in einem Array auch finden, indem wir eine Operation für die Eigenschaftlengthausführen und diese als neue Indexnummer anwenden.

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Outputstarfish

Wenn Sie versuchen, auf ein nicht vorhandenes Element zuzugreifen, werdenundefined zurückgegeben.

seaCreatures[10];

Outputundefined

Um auf Elemente in einem verschachtelten Array zuzugreifen, fügen Sie eine weitere Indexnummer hinzu, die dem inneren Array entspricht.

let nestedArray = [
    [
        "salmon",
        "halibut",
    ],
    [
        "coral",
        "reef",
    ]
];

nestedArray[1][0];

Outputcoral

Im obigen Beispiel haben wir auf das Array an Position1 der VariablennestedArray und dann auf das Element an Position0 im inneren Array zugegriffen.

Hinzufügen eines Elements zu einem Array

In unserer VariablenseaCreatures hatten wir fünf Elemente, die aus den Indizes von0 bis4 bestanden. Wenn wir dem Array ein neues Element hinzufügen möchten, können wir dem nächsten Index einen Wert zuweisen.

seaCreatures[5] = "whale";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale' ]

Wenn wir ein Element hinzufügen und versehentlich einen Index überspringen, wird ein undefiniertes Element im Array erstellt.

seaCreatures[7] = "pufferfish";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish' ]

Beim Versuch, auf das zusätzliche Array-Element zuzugreifen, wirdundefined zurückgegeben.

seaCreatures[6]

Outputundefined

Solche Probleme können mit der Methodepush() vermieden werden, mit der ein Element am Ende eines Arrays hinzugefügt wird.

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    ,
    'whale',
    'pufferfish',
    'lobster' ]

Am anderen Ende des Spektrums fügt die Methodeunshift()am Anfang eines Arrays ein Element hinzu.

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish',
    'lobster' ]

Zwischenpush() undunshift() können Sie Elemente an den Anfang und das Ende eines Arrays anhängen.

Entfernen eines Elements aus einem Array

Wenn wir ein bestimmtes Element aus einem Array entfernen möchten, verwenden wir die Methodesplice(). Im ArrayseaCreatures haben wir versehentlich zuvor ein undefiniertes Array-Element erstellt. Entfernen wir das jetzt.

seaCreatures.splice(7, 1);

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish',
    'lobster' ]

Bei der Methodesplice() steht der erste Parameter für die zu entfernende Indexnummer (in diesem Fall7), und der zweite Parameter gibt an, wie viele Elemente entfernt werden sollen. Wir setzen1, was bedeutet, dass nur ein Element entfernt wird.

Die Methodesplice() ändert die ursprüngliche Variable. Wenn Sie möchten, dass die ursprüngliche Variable unverändert bleibt, verwenden Sieslice() und weisen Sie das Ergebnis einer neuen Variablen zu.

let newArray = slice(7, 1);

Die Methodepop() entfernt das letzte Element in einem Array.

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

lobster wurde als letztes Element des Arrays entfernt. Um das erste Element des Arrays zu entfernen, verwenden wir die Methodeshift().

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

Durch Verwendung vonpop() undshift() können Elemente vom Anfang und Ende von Arrays entfernt werden. Die Verwendung vonpop() wird nach Möglichkeit bevorzugt, da die übrigen Elemente im Array ihre ursprünglichen Indexnummern beibehalten.

Elemente in Arrays ändern

Wir können jeden Wert in einem Array überschreiben, indem wir einen neuen Wert mit dem Zuweisungsoperator zuweisen, genau wie wir es mit einer regulären Variablen tun würden.

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

Output[ 'manatee',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

Eine andere Möglichkeit, einen Wert zu ändern, besteht darin, die Methodesplice()mit einem neuen Parameter zu verwenden. Wenn wir den Wert vonseahorse ändern möchten, der das Element bei Index3 ist, können wir ihn entfernen und an seiner Stelle ein neues Element hinzufügen.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

Output[ 'manatee',
    'squid',
    'shark',
    'sea lion',
    'starfish',
    'whale',
    'pufferfish' ]

Im obigen Beispiel haben wirseahorse aus dem Array entfernt und einen neuen Wert in den Index3 verschoben.

Durchschleifen eines Arrays

Wir können das gesamte Array mit dem Schlüsselwortfor durchlaufen und dabei die Eigenschaftlength nutzen. In diesem Beispiel können wir ein Array vonshellfish erstellen und jede Indexnummer sowie jeden Wert auf der Konsole ausdrucken.

// Create an array of shellfish species
let shellfish = [
    "oyster",
    "shrimp",
    "clam",
    "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

Output0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

Wir können auch diefor...of-Schleife verwenden, eine neuere Funktion von JavaScript.

// Create an array of aquatic mammals
let mammals = [
    "dolphin",
    "whale",
    "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
    console.log(mammal);
}

Outputdolphin
whale
manatee

Diefor...of-Schleife ruft nicht die Indexnummer der Elemente im Array ab, ist jedoch im Allgemeinen eine einfachere und präzisere Methode zum Durchlaufen eines Arrays.

Die Verwendung von Schleifen ist äußerst nützlich, um den gesamten Wert eines Arrays auszudrucken, z. B. beim Anzeigen von Elementen aus einer Datenbank auf einer Website.

Fazit

Arrays sind ein äußerst vielseitiger und grundlegender Bestandteil der Programmierung in JavaScript. In diesem Tutorial haben wir gelernt, wie Sie ein Array erstellen, wie Arrays indiziert werden und einige der häufigsten Aufgaben bei der Arbeit in Arrays, z. B. das Erstellen, Entfernen und Ändern von Elementen. Wir haben auch zwei Methoden zum Durchlaufen von Arrays gelernt, die als übliche Methode zum Anzeigen von Daten verwendet werden.

Weitere Informationen zu anderen Datentypen in JavaScript finden Sie in unserem Lernprogramm "https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[Datentypen in JavaScript verstehen".

TOC