Einführung
Arrays in JavaScript besteht aus einer Liste von Elementen. JavaScript hat viele nützliche eingebaute Methoden, um mit Arrays zu arbeiten. Methoden, die das ursprüngliche Array ändern, werden als * mutator * -Methoden bezeichnet. Methoden, die einen neuen Wert oder eine neue Darstellung zurückgeben, werden als https://www.digitalocean.com/community/tutorials/how-to-use-array-methods- bezeichnet. in-javascript-accessor-methoden [* accessor * methoden]. In diesem Tutorial konzentrieren wir uns auf Mutatormethoden.
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].
Arrays ähneln strings, da beide aus einer Folge von Elementen bestehen, die ist über die Indexnummer erreichbar. Beachten Sie jedoch, dass Zeichenfolgen ein unveränderlicher Datentyp sind und daher nicht geändert werden können. Arrays hingegen sind veränderlich, was bedeutet, dass viele Array-Methoden das ursprüngliche Array und nicht eine Kopie des Arrays beeinflussen.
In diesem Lernprogramm werden Elemente hinzugefügt und entfernt, Elemente in einem Array umgekehrt, ersetzt und auf andere Weise geändert.
isArray ()
Bevor wir uns mit Mutator-Methoden befassen, schauen wir uns die Methode "+ isArray () " an, um zu testen, ob Objekte Arrays sind. Dies ist eine https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#booleans[Boolean] -Methode, die " true " zurückgibt, wenn der Wert einer Variablen einem Array entspricht. Wenn das Objekt kein Array ist, gibt diese Methode " false" zurück.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an array
Array.isArray(fish);OutputtrueDie Methode "+ isArray () " ist nützlich, da der Operator " typeof ", den wir normalerweise zum Testen von Rückgaben verwenden, " object " ist, wenn er mit Arrays verwendet wird, und manchmal den Unterschied zwischen einem Objekt und einem " Array +" - Objekt kennt notwendig.
Beachten Sie, dass "+ isArray () +" anders geschrieben ist als die meisten Array-Methoden, wobei die Array-Variable als Argument für die Methode angegeben wird.
Nachdem wir nun wissen, wie wir überprüfen können, ob es sich bei einem Objekt um ein Array handelt, fahren wir mit den Mutator-Methoden fort.
Pop()
Die erste Mutator-Methode, die wir uns ansehen werden, ist die + pop () + - Methode, die das letzte Element vom Ende eines Arrays entfernt.
Wir beginnen mit unserem Array "+ fish +".
let fish = [ "piranha", "barracuda", "koi", "eel" ];Initialisieren wir die Methode "+ pop () ", um das letzte Element zu entfernen. In diesem Fall ist es das String-Literal "" Aal "+".
// Use pop method to remove an item from the end of an array
fish.pop();Wir rufen unser Array auf, um sicherzustellen, dass das Array ohne das letzte Element zurückgegeben wird:
fish;Output[ 'piranha', 'barracuda', 'koi' ]Wir haben erfolgreich "" Aal "" aus dem Array "+ fish " entfernt. Die Methode ` pop () +` akzeptiert keine zusätzlichen Parameter.
Verschiebung()
Eine andere Mutatormethode, die + shift () + Methode, entfernt das erste Element vom Anfang eines Arrays.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Wir werden "+ shift () " verwenden, um "" piranha "" aus dem Index " 0 +" zu entfernen und alle übrigen Elemente um eine Indexnummer nach unten zu verschieben.
// Use shift method to remove an item from the beginning of an array
fish.shift();
fish;Output[ 'barracuda', 'koi', 'eel' ]In diesem Beispiel wurde "" Piranha "" entfernt und jedes Element um eine Indexnummer nach unten verschoben. Aus diesem Grund wird im Allgemeinen die Methode + pop () + bevorzugt, da die anderen Array-Elemente ihre Indexpositionen beibehalten.
drücken()
Die Mutatormethode + push () + fügt ein oder mehrere neue Elemente am Ende eines Arrays hinzu.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Um am Ende ein Item hinzuzufügen, schreiben wir das neue Element als Parameter der Funktion.
// Use push method to add an item to the end of an array
fish.push("swordfish");
fish;Output[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]Es ist auch möglich, dem Array mehrere neue Werte hinzuzufügen. Zum Beispiel hätte "+ fish.push" ("swordfish", "dragonfish") + "dem Index" + 4 + "und" + 5 + "Elemente hinzugefügt.
ausschalten ()
Die Array-Methode + unshift () + mutator fügt am Anfang eines Arrays ein oder mehrere neue Elemente hinzu.
let fish = [ "piranha", "barracuda", "koi", "eel" ];// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");
fish;Output[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]Im obigen Beispiel wurde "" shark "" zur Indexposition "+ 0 " hinzugefügt, wobei alle anderen Array-Elemente um eins verschoben wurden. Genau wie bei ` shift () +` können Sie dem Array mehrere durch Kommas getrennte Elemente gleichzeitig hinzufügen.
+ pop () + und + push () + wirken sich auf das Ende eines Arrays aus, und + shift () + und + unshift () + wirken sich auf den Anfang eines Arrays aus. Eine einfache Möglichkeit, sich daran zu erinnern, besteht darin, zu bedenken, dass + shift () + und + unshift () + alle Indexnummern des zurückgegebenen Arrays ändern
spleißen()
Die Methode + splice () + kann ein Element an einer beliebigen Position in einem Array hinzufügen oder entfernen. Eine Mutatormethode, + splice () +, kann entweder hinzugefügt oder entfernt oder gleichzeitig hinzugefügt und entfernt werden.
+ splice () + benötigt drei Parameter - die Indexnummer, bei der begonnen werden soll, die Anzahl der zu entfernenden Elemente und die Anzahl der hinzuzufügenden Elemente (optional).
splice(index number, number of items to remove, items to add)+ splice (0, 0," new ") + würde den String " new " an den Anfang eines Arrays setzen und nichts löschen.
Schauen wir uns ein paar Beispiele an, wie + splice () + Elemente in einem Array hinzufügen und entfernen kann.
Hinzufügen mit + splice () +
Wenn wir unseren zweiten Parameter (zu entfernende Elemente) auf "+ 0 " setzen, löscht " splice () " null Elemente. Auf diese Weise können wir festlegen, dass ein Element nur ab einer Indexnummer hinzugefügt werden soll. Dadurch wird " splice () " leistungsfähiger als " push () " oder " unshift () +", wodurch nur Elemente hinzugefügt werden das Ende oder der Anfang eines Arrays.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");
fish;Output[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]Die neue Zeichenfolge "" Mantarochen "" wurde dem Array hinzugefügt, beginnend mit dem Index "+ 1 +".
Entfernen mit + splice () +
Wenn Sie den dritten Parameter (hinzuzufügende Elemente) leer lassen, können Sie ein Element einfach von einem beliebigen Punkt im Array entfernen.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items, starting at index position 1
fish.splice(1, 2);
fish;Output[ 'piranha', 'eel' ]Wir haben zwei Elemente aus dem Array gelöscht, beginnend mit dem Index "+ 1 ", "" Barracuda "+". Wenn das zweite Argument entfernt wird, werden alle Elemente bis zum Ende des Arrays entfernt.
Hinzufügen und Entfernen mit + splice () +
Wenn Sie alle Parameter gleichzeitig verwenden, können Sie gleichzeitig Elemente zu einem Array hinzufügen und daraus entfernen.
Um dies zu demonstrieren, entfernen wir dieselben Elemente wie oben und fügen an ihren Positionen ein neues hinzu.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add one
fish.splice(1, 2, "manta ray");
fish;Output[ 'piranha', 'manta ray', 'eel' ]+ splice () + ist eine leistungsstarke Methode zum Ändern eines beliebigen Teils eines Arrays. Beachten Sie, dass + splice () + nicht mit + slice () + eines Accessor-Arrays verwechselt werden darf, das eine Kopie eines Abschnitts eines Arrays erstellt.
umkehren()
Die Methode + reverse () + kehrt die Reihenfolge der Elemente in einem Array um.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Mit + reverse () + wird das letzte Element zum ersten und das erste zum letzten Element.
// Reverse the fish array
fish.reverse();
fish;Output[ 'eel', 'koi', 'barracuda', 'piranha' ]Die Array-Methode + reverse () + hat keine Parameter.
füllen()
Die Methode + fill () + ersetzt alle Elemente in einem Array durch einen statischen Wert.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Im Array "+ fish " haben wir vier Elemente. Wenden wir " fill () +" an.
// Replace all values in the array with "shark"
fish.fill("shark");
fish;Output[ 'shark', 'shark', 'shark', 'shark' ]Alle vier Elemente im Array wurden durch den gleichen Wert "" shark "" ersetzt. + fill () + akzeptiert auch optionale Argumente für Start- und Endpunkte.
fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]Mit + fill () + können wir ein oder mehrere Elemente in einem Array durch einen statischen Wert ersetzen.
Sortieren()
Die Methode + sort () + sortiert die Elemente in einem Array basierend auf dem ersten Zeichen im Element. In dem Fall, dass das erste Zeichen identisch ist, wird es die Zeile entlang fortgesetzt und das zweite Zeichen verglichen und so weiter.
Standardmäßig alphabetisiert + sort () + ein Array von Zeichenfolgen, die entweder in Groß- oder Kleinbuchstaben geschrieben sind.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Sort items in array
fish.sort();
fish;Output[ 'barracuda', 'eel', 'koi', 'piranha' ]Da + sort () + auf dem ersten Unicode-Zeichen basiert, werden Großbuchstaben vor Kleinbuchstaben sortiert.
Ändern wir unser ursprüngliches Array so, dass eine unserer Zeichenfolgen mit einem Großbuchstaben beginnt.
let fish = [ "piranha", "barracuda", "Koi", "eel" ];
fish.sort();
fish;Output[ 'Koi', 'barracuda', 'eel', 'piranha' ]Zahlen stehen vor Groß- und Kleinbuchstaben.
Wir können das Array erneut ändern, um eine Zahl in eines der Zeichenfolgenelemente aufzunehmen.
let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
fish.sort();Output[ '1 eel', 'Koi', 'barracuda', 'piranha' ]+ sort () + sortiert ein Array von Zahlen standardmäßig nicht nach Größe. Stattdessen wird nur das erste Zeichen in der Nummer überprüft.
let numbers = [ 42, 23, 16, 15, 4, 8 ];
numbers.sort();Output[ 15, 16, 23, 4, 42, 8 ]Um Zahlen richtig zu sortieren, können Sie eine Vergleichsfunktion als Argument erstellen.
// Function to sort numbers by size
const sortNumerically = (a, b) => {
return a - b;
}
numbers.sort(sortNumerically);Output[ 4, 8, 15, 16, 23, 42 ]Mit der Vergleichsfunktion "+ sortNumerically " konnten wir wie vorgesehen sortieren. ` sort () +` wendet die Änderung auf das ursprüngliche Array an.
Fazit
In diesem Tutorial haben wir die wichtigsten Mutator-Array-Methoden in JavaScript besprochen. Mutator-Methoden ändern das ursprüngliche Array, in dem sie verwendet werden, im Gegensatz zum Erstellen einer Kopie wie Accessor-Methoden. Wir haben gelernt, wie Sie Elemente am Anfang oder Ende eines Arrays hinzufügen und entfernen sowie den Wert von Array-Elementen sortieren, umkehren und ersetzen.
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.