So verwenden Sie Array-Methoden in JavaScript: Accessor-Methoden

Einführung

Das JavaScript-Array ist ein Datentyp, der aus einer Liste von Elementen besteht. Es gibt viele nützliche integrierte Methoden, um mit Arrays in JavaScript zu arbeiten. Methoden, die das ursprüngliche Array ändern, werden als * mutator * -Methoden bezeichnet, und Methoden, die einen neuen Wert oder eine neue Darstellung zurückgeben, werden als * accessor * -Methoden bezeichnet. In diesem Tutorial konzentrieren wir uns auf Accessormethoden.

Um dieses Lernprogramm optimal nutzen zu können, sollten Sie mit dem Erstellen, Indizieren, Ändern und Durchlaufen von Arrays vertraut sein, die Sie im Lernprogramm https://www.digitalocean.com/community/tutorials/understanding nachlesen können -arrays-in-Javascript [Grundlegendes zu Arrays in JavaScript].

In diesem Lernprogramm werden Methoden beschrieben, mit denen Arrays verkettet, Arrays in Zeichenfolgen konvertiert, Teile eines Arrays in ein neues Array kopiert und die Indizes von Arrays ermittelt werden.

concat ()

Die Methode + concat () + fügt zwei oder mehr Arrays zu einem neuen Array zusammen.

Im folgenden Beispiel werden zwei Arrays von Schalentierarten erstellt und zu einem neuen Array kombiniert.

// Create arrays of monovalves and bivalves
let monovalves = [ "abalone", "conch" ];
let bivalves = [ "oyster", "mussel", "clam" ];

// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves);

Sobald wir das neue Array aufrufen, werden wir feststellen, dass es aus einer Kombination der beiden ursprünglichen Arrays besteht:

shellfish;

Output[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

Die Methode + concat () + kann mehrere Argumente annehmen, sodass Sie effektiv viele Arrays mit einer einzigen Methode verketten können.

Beitreten()

Die Methode + join () + konvertiert alle Elemente eines Arrays in einen neuen String.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

Wenn kein Argument angegeben wird, ist die Ausgabe von + join () + eine durch Kommas getrennte Zeichenfolge ohne zusätzliche Leerzeichen.

// Join the elements of an array into a string
let fishString = fish.join();

fishString;

Output'piranha,barracuda,koi,eel'

Um ein Leerzeichen oder ein anderes Trennzeichen einzufügen, können Sie der Methode + join () + eine Zeichenfolge Ihres Trennzeichens als Parameter hinzufügen. Dieser Parameter enthält das gewünschte Trennzeichen zwischen den einzelnen Array-Elementen.

// Join the elements of an array into a string
let fishString = fish.join(', ');

fishString;

Output'piranha, barracuda, koi, eel'

Im obigen Beispiel trennte das Schreiben von "", "" mit Leerzeichen die Array-Elemente besser lesbar. Eine leere Zeichenfolge, die als Argument angegeben wird, entfernt die Standardkommas vollständig.

Scheibe()

Die Methode + slice () + kopiert einen Teil eines Arrays in ein neues Array.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

Angenommen, wir möchten die letzten beiden Elemente im Array in ein neues Array kopieren. Wir würden mit der Indexnummer des ersten Elements beginnen, das wir wollen, nämlich "+ 2 " für " koi ". Wir würden mit der Indexnummer _nach_ dem letzten Element enden, das wir wollen. Da das letzte Element, " aal ", die Indexnummer " 3 " hat, würden wir " 4 +" setzen.

// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 4);

fishWithShortNames;

Output[ 'koi', 'eel' ]

In diesem speziellen Fall ist das zweite Argument eigentlich unnötig, da "+ aal " das letzte Element im Array ist. ` slice () +` beginnt am ersten Index und endet am Ende des Arrays, wenn kein zweites Argument angegeben wird.

// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2);

fishWithShortNames;

Output[ 'koi', 'eel' ]

+ slice () + ist nicht zu verwechseln mit https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methods#splice () [ Mutator-Methode + splice () +], mit der Elemente zum ursprünglichen Array hinzugefügt oder daraus gelöscht werden können.

Index von()

Die Methode + indexOf () + gibt die Indexnummer der ersten Instanz eines Elements zurück.

Im folgenden Beispiel haben wir eine Zeichenfolge, in der "+ Barracuda +" zweimal aufgeführt ist.

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

Wir werden + indexOf () + verwenden, um die erste Instanz zu finden.

// Find the first instance of an element
fish.indexOf("barracuda");

Output1

Wenn das angegebene Argument ein Wert ist, der im Array nicht vorhanden ist, gibt die Konsole "+ -1 +" zurück.

fish.indexOf("shark");

Output-1

Die Methode + indexOf () + ist besonders nützlich in Arrays, die viele Elemente enthalten.

lastIndexOf ()

Die Methode + lastIndexOf () + gibt die Indexnummer der letzten Instanz eines Elements zurück.

Wir können das gleiche Beispiel mit + indexOf () + testen, das zweimal + barracuda + enthält.

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

// Find the last instance of an element
fish.lastIndexOf("barracuda");

Output3

+ lastIndexOf () + durchsucht das Array ab dem Ende und gibt die erste gefundene Indexnummer zurück.

Fazit

In diesem Tutorial haben wir die wichtigsten integrierten Accessor-Array-Methoden in JavaScript vorgestellt. Accessor-Methoden erstellen eine neue Kopie oder Darstellung eines Arrays, anstatt das Original zu mutieren oder zu modifizieren.

Wir haben gelernt, wie Sie Arrays miteinander verketten, indem Sie sie Ende-zu-Ende kombinieren, und wie Sie Arrays in durch Kommas getrennte Zeichenfolgen konvertieren. Wir haben auch gelernt, wie Sie Teile eines Arrays in ein neues Array kopieren und den ersten und den letzten Index eines bestimmten Elements in einem Array finden.

Informationen zu den Grundlagen von Arrays finden Sie unter Arrays in JavaScript verstehen. Eine vollständige Liste aller Array-Methoden finden Sie unter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array[Array reference im Mozilla Developer Network.

TOC