JavaScript hat einen eingebauten ...-Operator, mit dem du einfacher mit einer unbestimmten Anzahl von Elementen arbeiten kannst. Je nach Kontext wird er entweder Rest-Operator oder Spread-Operator genannt.
Wenn ... auf der linken Seite einer Zuweisung steht, werden diese drei Punkte als rest-Operator bezeichnet. Die drei Punkte zusammen mit einem Variablennamen nennt man ein Rest-Element. Es sammelt null oder mehr Werte und speichert sie in einem einzigen Array.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Beachte, dass in JavaScript, anders als in manchen anderen Sprachen, ein rest-Element kein abschließendes Komma haben darf. Es muss das letzte Element in einer destrukturierenden Zuweisung sein. Das folgende Beispiel wirft einen SyntaxError:
const [...items, last] = [2, 4, 8, 16]
Ähnlich wie bei Arrays kann der Rest-Operator auch verwendet werden, um eine oder mehrere Eigenschaften eines Objekts zu sammeln und in einem einzigen Objekt zu speichern.
const { street, ...address } = {
street: 'Platz der Republik 1',
postalCode: '11011',
city: 'Berlin',
};
street;
// => 'Platz der Republik 1'
address;
// => {postalCode: '11011', city: 'Berlin'}
Wenn ... in einer Funktionsdefinition neben dem letzten Argument steht, nennt man diesen Parameter einen Rest-Parameter. Er ermöglicht es der Funktion, eine unbestimmte Anzahl von Argumenten als Array zu akzeptieren.
function concat(...strings) {
return strings.join(' ');
}
concat('one');
// => 'one'
concat('one', 'two', 'three');
// => 'one two three'
Wenn ... auf der rechten Seite einer Zuweisung steht, wird es als spread-Operator bezeichnet. Er erweitert ein Array zu einer Liste von Elementen. Anders als das Rest-Element kann es überall in einem Array-Literal-Ausdruck stehen, und es können mehr als eines vorkommen.
const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];
oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];
woow;
// => ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]
Ähnlich wie bei Arrays kann der Spread-Operator auch verwendet werden, um Eigenschaften von einem Objekt in ein anderes zu kopieren.
let address = {
postalCode: '11011',
city: 'Berlin',
};
address = { ...address, country: 'Germany' };
// => {
// postalCode: '11011',
// city: 'Berlin',
// country: 'Germany',
// }
Dein Freund Linus ist Lokführer und fährt Güterzüge zwischen Städten. Er ist großartig darin, Züge zu steuern, aber mit Logistik oder Computern kennt er sich nicht so gut aus. Er würde gerne deine Programmierhilfe in Anspruch nehmen, um Zugdaten zu organisieren und Fehler in den Routendaten zu korrigieren.
Übe, indem du den Rest- oder Spread-Operator verwendest, um die folgenden Aufgaben zu lösen.
Dein Freund hat die Kennung (ID) jedes Waggons mitgeschrieben, aber er weiß nie genau, wie viele Waggons das System zu einem bestimmten Zeitpunkt verarbeiten muss.
Für den Rest des Logistikprogramms wäre es viel einfacher, wenn diese Daten in einem einheitlichen array zusammengefasst wären.
Implementiere eine Funktion getListOfWagons, die eine beliebige Anzahl von Waggon-IDs entgegennimmt, welche die IDs der einzelnen Waggons sind.
Jede ID ist eine positive Ganzzahl.
Die Funktion soll die übergebenen IDs dann als einzelnes array zurückgeben.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
So langsam bekommst du ein Gefühl für die Daten und dafür, wie sie im Logistikprogramm verwendet werden. Das ID-System weist der Lokomotive immer die ID 1 zu, während die übrigen Waggons des Zuges eine zufällig gewählte ID größer als 1 erhalten.
Dein Freund musste zwei neue Waggons an den Zug anhängen und hat vergessen, das System zu aktualisieren!
Jetzt müssen die ersten beiden Waggons im array des Zuges ans Ende verschoben werden, sonst gerät alles durcheinander.
Linus wäre dir sehr dankbar, wenn du seine Fehler behebst.
Implementiere eine Funktion fixListOfWagons, die ein Array mit der ID jedes Waggons entgegennimmt.
Sie returnt ein array, in dem die ersten beiden Elemente ans Ende des arrays verschoben wurden, damit die Lokomotive vorne stehen kann.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
Oh je, einige Waggons scheinen verloren gegangen zu sein.
Zum Glück hat dein Freund gerade ein weiteres array gefunden, das offenbar die fehlenden Waggon-IDs enthält, und er möchte, dass du sie in das Haupt-array mit den Waggon-IDs einfügst.
Er weiß nur noch, dass die fehlenden Werte direkt hinter der dafür vorgesehenen Lokomotive eingefügt werden sollen.
Schreibe angesichts dieser neuen Informationen eine Funktion namens correctListOfWagons, die zwei Arrays mit den IDs der einzelnen Waggons als Argumente entgegennimmt.
Die Waggon-IDs des zweiten arrays sollen im ersten array direkt hinter der Lokomotive (ID 1) eingefügt werden.
eachWagonsID = [1, 5, 20, 7, 4, 8];
missingWagons = [3, 17, 6, 15];
correctListOfWagons(eachWagonsID, missingWagons);
// => [1, 3, 17, 6, 15, 5, 20, 7, 4, 8]
Jetzt, wo alle Waggondaten korrekt sind, möchte dein Freund, dass du die Routinginformationen des Systems aktualisierst.
Die anfänglichen Routinginformationen wurden als object erstellt, und dein Freund möchte, dass du sie mit den bereitgestellten Ergänzungen aktualisierst.
Jede Route benötigt etwas andere Informationen, deshalb wäre deinem Freund eine allgemeine Lösung wirklich lieber.
Implementiere eine Funktion extendRouteInformation, die zwei objects entgegennimmt.
Das erste object enthält, zwischen welchen Städten die Zugroute verläuft.
Das zweite object enthält weitere Routingdetails wie die Geschwindigkeit oder die Länge des Zuges.
Die Funktion soll ein zusammengeführtes object mit allen Routinginformationen zurückgeben.
Die Variable moreRouteInformation kann verschiedene Eigenschaften enthalten.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
Dein Freund hat bemerkt, dass er die Ankunftszeit in den Routinginformationen nicht braucht. Deshalb möchte dein Freund, dass du die Ankunftszeit von den Routinginformationen trennst.
Implementiere eine Funktion separateTimeOfArrival, die ein Objekt mit den Routinginformationen entgegennimmt.
Die Funktion soll ein Array zurückgeben, dessen erstes Element die Ankunftszeit ist und dessen zweites Element ein Objekt mit den Routinginformationen ohne Ankunftszeit ist.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Melde dich bei Exercism an, um JavaScript mit 37 Konzepte159 Übungen und echtem menschlichen Mentoring zu lernen und zu meistern, alles kostenlos.