Code klug! Seien Sie ein schnellerer, produktiverer und glücklicherer JavaScript-Entwickler, indem Sie diese wichtigsten und wiederkehrenden Funktionen in der Sprache beherrschen.
Ob Backend oder Frontend (oder sogar Raumschiffe), JavaScript ist überall. Es ist auch eine ziemlich flexible Sprache (was bedeutet, dass sie sowohl funktionale Hardcore-Programmiermuster als auch gute alte Klassen hat), und ihre Ähnlichkeit mit anderen „C-ähnlichen“ Sprachen erleichtert Entwicklern den Übergang von anderen Sprachen.
Wenn du möchtest Verbessere dein JS-SpielIch schlage vor, dass Sie die folgenden in der Sprache verfügbaren Kernfunktionen kennenlernen, üben und schließlich beherrschen. Nicht alle davon werden unbedingt zur Lösung von Problemen „benötigt“, aber sie können in einigen Fällen viel Gewicht für Sie aufbringen, während sie in anderen Fällen die Menge an Code reduzieren können, die Sie schreiben müssen.
map()
Es wäre ketzerisch, einen Artikel über wichtige JavaScript-Funktionen zu schreiben und nicht zu erwähnen map()! 😆😆 Zusammen mit filter() funktioniert reduce(), map() bildet eine Art heilige Dreifaltigkeit. Dies sind Funktionen, die Sie in Ihrer Karriere immer wieder verwenden werden. Sie sind also mehr als einen Blick wert. Lassen Sie uns sie einzeln angehen, beginnend mit map().
map() gehört zu den Funktionen, die Menschen, die JavaScript lernen, am meisten Probleme bereiten. Warum? Nicht weil es etwas an sich Komplexes gibt, sondern weil die Funktionsweise dieser Funktion eine Idee ist, die aus der sogenannten funktionalen Programmierung stammt. Und da wir nicht der funktionalen Programmierung ausgesetzt sind - unsere Schulen und die Branche sind voll von objektorientierten Sprachen -, scheint die Arbeitsweise für unser voreingenommenes Gehirn seltsam oder sogar falsch zu sein.
JavaScript ist weitaus funktionaler als objektorientiert, obwohl seine modernen Versionen ihr Bestes tun, um diese Tatsache zu verbergen. Aber das ist eine ganze Dose Würmer, die ich vielleicht eines Tages öffnen kann. 🤣 Okay, also map() . . .
map() ist eine sehr einfache Funktion; Es hängt sich an ein Array an und hilft uns beim Konvertieren jeder Element in etwas anderes, was zu einem neuen Array führt. Die genaue Konvertierung eines Elements wird als weitere Funktion bereitgestellt, die gemäß Konvention anonym ist.
Das ist alles dazu! Die Syntax mag etwas gewöhnungsbedürftig sein, aber im Grunde ist es das, was wir in einem tun map() Funktion. Warum möchten wir vielleicht verwenden map()? Kommt darauf an, was wir erreichen wollen. Nehmen wir zum Beispiel an, wir haben die Temperatur für jeden Tag der letzten Woche aufgezeichnet und als einfaches Array gespeichert. Jetzt wird uns jedoch mitgeteilt, dass die Instrumente nicht sehr genau waren und 1.5 Grad weniger Temperatur gemeldet haben, als sie sollten.
Wir können diese Korrektur mit dem durchführen map() Funktion wie folgt:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);
console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]Ein weiteres, sehr praktisches Beispiel stammt aus der Welt von React, in der das Erstellen von DOM-Elementlisten aus Arrays ein gängiges Muster ist. So etwas ist also üblich:
export default ({ products }) => {
return products.map(product => {
return (
<div className="product" key={product.id}>
<div className="p-name">{product.name}</div>
<div className="p-desc">{product.description}</div>
</div>
);
});
};Hier haben wir eine funktionale Reagieren Komponente, die eine Liste von Produkten als Requisiten erhält. Aus dieser Liste (Array) wird dann eine Liste von HTML-Divs erstellt, die im Wesentlichen jedes Produktobjekt in HTML konvertieren. Das Original products Objekt bleibt unberührt.
Das kann man argumentieren map() ist nichts als eine verherrlichte for Schleife und Sie wären völlig richtig. Beachten Sie jedoch, dass, sobald Sie dieses Argument vorbringen, Ihr objektorientierter, geschulter Verstand spricht, während diese Funktionen und ihre Begründung aus der funktionalen Programmierung stammen, bei der Einheitlichkeit, Kompaktheit und Eleganz hoch geschätzt werden. 🙂
filter()
filter() ist eine äußerst nützliche Funktion, die Sie in vielen Situationen immer wieder anwenden werden. Wie der Name schon sagt, filtert diese Funktion ein Array basierend auf den von Ihnen bereitgestellten Regeln / Logik und gibt ein neues Array zurück, das Elemente enthält, die diese Regeln erfüllen.
Lassen Sie uns unser Wetterbeispiel wiederverwenden. Angenommen, wir haben ein Array mit den Maximaltemperaturen für jeden Tag der letzten Woche. Jetzt wollen wir herausfinden, wie viele dieser Tage kälter waren. Ja, „kälter“ ist ein subjektiver Begriff. Nehmen wir also an, wir suchen nach Tagen, an denen die Temperatur unter 20 ° C liegt filter() Funktion wie folgt:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
console.log("Total colder days in week were: " + colderDays.length); // 1Beachten Sie, dass die anonyme Funktion, an die wir übergeben filter() muss einen booleschen Wert zurückgeben: true or false. Das ist wie filter() wird wissen, ob dieses Element in das gefilterte Array aufgenommen werden soll oder nicht. Sie können jede Menge komplexer Logik in diese anonyme Funktion schreiben. Sie können API-Aufrufe durchführen und Benutzereingaben lesen usw., solange Sie sicherstellen, dass Sie am Ende einen booleschen Wert zurückgeben.
In acht nehmen: Dies ist eine Randnotiz, die ich aufgrund meiner Erfahrung als JavaScript-Entwickler unbedingt bereitstellen muss. Unabhängig davon, ob es sich um Schlamperei oder falsche Grundlagen handelt, verursachen viele Programmierer bei der Verwendung subtile Fehler in ihren Programmen filter(). Schreiben wir den vorherigen Code neu, um den Fehler zu enthalten:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
if(colderDays) {
console.log("Yes, there were colder days last week");
} else {
console.log("No, there were no colder days");
}Merken Sie etwas? Großartige Arbeit, wenn Sie es getan haben! Das if Zustand gegen Ende prüft colderDays, das ist eigentlich ein Array! Sie werden überrascht sein, wie oft Menschen diesen Fehler machen, wenn sie um Termine oder Code in schlechter Stimmung rennen (aus welchem Grund auch immer). Das Problem mit dieser Bedingung ist, dass JavaScript in vielerlei Hinsicht eine seltsame und inkonsistente Sprache ist und die „Wahrhaftigkeit“ der Dinge eine davon ist. Während [] == true gibt false zurück und lässt Sie denken, dass der obige Code nicht kaputt ist. Die Realität ist, dass in einem if Zustand, [] bewertet als wahr! Mit anderen Worten, der Code, den wir geschrieben haben, wird niemals sagen, dass es letzte Woche keine kälteren Tage gab.
Das Update ist sehr einfach, wie im Code vor dem obigen Code angegeben. Wir prüfen auf colderDays.lengthDies gibt uns garantiert eine ganze Zahl (Null oder höher) und arbeitet daher konsistent in logischen Vergleichen. Beachten Sie, dass filter() wird immer, immer, immer Geben Sie ein Array zurück, leer oder nicht leer, damit wir uns darauf verlassen und unsere logischen Vergleiche sicher schreiben können.
Es war ein längerer Umweg als geplant, aber Fehler wie dieser sind es wert, in zehntausend Worten hervorgehoben zu werden, wenn nötig alle Großbuchstaben. Ich hoffe, Sie werden davon nicht gebissen und sparen sich Hunderte von Stunden Debugging-Aufwand! 🙂
reduce()
Von allen Funktionen in diesem Artikel sowie in der Standard-JavaScript-Bibliothek reduce() gehört zu den Spitzenreitern für die Kronen „verwirrend und seltsam“. Obwohl diese Funktion sehr wichtig ist und in vielen Situationen zu elegantem Code führt, wird sie von den meisten JavaScript-Entwicklern vermieden und sie bevorzugen es, stattdessen ausführlicheren Code zu schreiben.
Der Grund ist das - und ich werde hier ehrlich sein! - - reduce() ist sowohl im Konzept als auch in der Ausführung schwer zu verstehen. Wenn Sie die Beschreibung lesen, haben Sie sie mehrmals neu gelesen und bezweifeln dennoch, ob Sie sie falsch gelesen haben. und wenn Sie es in Aktion sehen und versuchen zu visualisieren, wie es funktioniert, dreht sich Ihr Gehirn in tausend Knoten! 🤭
Hab jetzt keine Angst. Das reduce() Funktion ist in Bezug auf Komplexität und Einschüchterung beispielsweise nicht annähernd B + Bäume und ihre Algorithmen. Es ist nur so, dass diese Art von Logik während des Tagesberufs eines durchschnittlichen Programmierers selten anzutreffen ist.
Nachdem ich das Tageslicht aus dir herausgeschreckt und dir dann sofort gesagt habe, dass du dir keine Sorgen machen sollst, möchte ich dir endlich zeigen, was diese Funktion ist und warum genau wir sie brauchen könnten.
Wie der Name andeutet, reduce() wird verwendet, um etwas zu reduzieren. Die Sache, die es reduziert, ist ein Array und die Sache, auf die es das gegebene Array reduziert, ist ein einzelner Wert (Zahl, Zeichenfolge, Funktion, Objekt, was auch immer). Hier ist eine einfachere Möglichkeit, es auszudrücken - reduce() wandelt ein Array in einen einzelnen Wert um. Beachten Sie, dass der Rückgabewert von reduce() ist kein Array, was bei der Fall ist map() funktioniert filter(). So viel verstanden zu haben, ist schon die halbe Miete. 🙂
Nun ist es ziemlich offensichtlich, dass wir, wenn wir ein Array transformieren (reduzieren) wollen, die notwendige Logik liefern müssen; Aufgrund Ihrer Erfahrung als JS-Entwickler haben Sie bereits vermutet, dass wir dies mithilfe einer Funktion tun. Diese Funktion nennen wir die Reduziererfunktion, die das erste Argument dafür ist reduce(). Das zweite Argument ist ein Startwert wie eine Zahl, eine Zeichenfolge usw. (Ich werde in einer Weile erklären, was zum Teufel dieser „Startwert“ ist).
Nach unserem bisherigen Verständnis können wir sagen, dass ein Aufruf an reduce() sieht aus wie das: array.reduce(reducerFunction, startingValue). Lassen Sie uns nun das Herzstück des Ganzen angehen: die Reduzierfunktion. Wie bereits festgestellt, sagt die Reduzierfunktion aus reduce() wie man das Array in einen einzelnen Wert konvertiert. Es sind zwei Argumente erforderlich: eine Variable als Akkumulator (keine Sorge, ich erkläre auch dieses Bit) und eine Variable zum Speichern des aktuellen Werts.
Ich weiß, ich weiß . . . Das war eine Menge Terminologie für eine einzelne Funktion, die in JavaScript nicht einmal obligatorisch ist. 😝😝 Und deshalb rennen die Leute weg reduce(). Wenn Sie es jedoch Schritt für Schritt lernen, werden Sie es nicht nur verstehen, sondern auch schätzen, wenn Sie ein besserer Entwickler werden.
Okay, zurück zum Thema. Der "Startwert" wird an übergeben reduce() ist. . . Nun, der Startwert für die Berechnung, die Sie verwenden möchten. Wenn Sie beispielsweise die Reduzierungsfunktion multiplizieren möchten, erhalten Sie einen Startwert von 1 macht Sinn; Außerdem können Sie mit beginnen 0, Und so weiter.
Schauen wir uns nun die Signatur für die Reduzierungsfunktion an. Eine Reduzierfunktion wird an übergeben reduce() hat die folgende Form: reducerFunction(accumulator, currentValue). "Akkumulator" ist nur ein ausgefallener Name für die Variable, die das Ergebnis der Berechnung sammelt und enthält. Es ist genau so, als würde man eine Variable namens verwenden total um alle Elemente in einem Array mit so etwas wie zu summieren total += arr[i]. Genau so funktioniert der Reduzierer in reduce() wird angewendet: Der Akkumulator wird zunächst auf den von Ihnen angegebenen Startwert gesetzt, und dann werden nacheinander die Elemente im Array besucht, die Berechnung durchgeführt und das Ergebnis im Akkumulator gespeichert usw. . .
Was ist dieser „aktuelle Wert“ in einer Reduzierfunktion? Es ist die gleiche Idee, die Sie sich mental vorstellen würden, wenn ich Sie auffordere, ein Array zu durchlaufen: Sie würden eine Variable nehmen, um bei Index Null zu beginnen und sie schrittweise vorwärts zu bewegen. Wenn ich Sie dabei auffordere, plötzlich anzuhalten, befinden Sie sich dabei auf einem der Elemente des Arrays, oder? Dies ist das, was wir unter aktuellem Wert verstehen: Dies ist der Wert der Variablen, die zur Darstellung des aktuell betrachteten Array-Elements verwendet wird (denken Sie daran, ein Array zu durchlaufen, wenn dies hilfreich ist).
Nach all dem ist es Zeit, ein einfaches Beispiel zu sehen und zu sehen, wie all dieser Jargon in einem tatsächlichen zusammenkommt reduce() Anruf. Nehmen wir an, wir haben ein Array, das das erste enthält n natürliche Zahlen (1, 2, 3 . . . n) und wir sind daran interessiert, die Fakultät von zu finden n. Wir wissen das zu finden n! Wir müssen einfach alles multiplizieren, was uns zu dieser Implementierung führt:
const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120In diesen nur drei Codezeilen ist viel los. Packen wir sie also im Rahmen der (sehr langen) Diskussion, die wir bisher geführt haben, einzeln aus. Wie es offensichtlich ist, numbers ist das Array, das alle Zahlen enthält, die wir multiplizieren möchten. Als nächstes werfen Sie einen Blick auf die numbers.reduce() Aufruf, der besagt, dass der Startwert für acc sollte sein 1 (weil es keine Multiplikation beeinflusst oder zerstört). Überprüfen Sie als nächstes den Reduzierfunktionskörper `(acc, item) => acc * item, was einfach besagt, dass der Rückgabewert für jede Iteration über das Array das Element sein sollte, multipliziert mit dem, was sich bereits im Akkumulator befindet. Die Iteration und tatsächliche explizite Speicherung der Multiplikation im Akkumulator ist das, was hinter den Kulissen passiert, und einer der Hauptgründe reduce() ist so ein Stolperstein für JavaScript-Entwickler.
Warum reduce()?
Es ist eine wirklich gute Frage, und um ehrlich zu sein, habe ich keine sichere Antwort. Wie auch immer reduce() Dies kann durch Schleifen erfolgen. forEach()usw. Diese Techniken führen jedoch zu viel mehr Code, was das Lesen erschwert, insbesondere wenn Sie es eilig haben. Dann gibt es die Sorge um Unveränderlichkeit: mit reduce() Mit ähnlichen Funktionen können Sie sicher sein, dass Ihre Originaldaten nicht mutiert wurden. Dies an sich beseitigt ganze Fehlerklassen, insbesondere in verteilten Anwendungen.
Schließlich reduce() ist weitaus flexibler in dem Sinne, dass der Akkumulator bei Bedarf ein Objekt, ein Array oder sogar eine Funktion sein kann; Gleiches gilt für den Startwert und andere Teile des Funktionsaufrufs - fast alles kann eingehen und fast alles kann herauskommen, sodass die Gestaltung von wiederverwendbarem Code äußerst flexibel ist.
Wenn Sie immer noch nicht überzeugt sind, ist das auch vollkommen in Ordnung. Die JavaScript-Community selbst ist stark gespalten über die „Kompaktheit“, „Eleganz“ und „Kraft“ von reduce()Es ist also in Ordnung, wenn Sie es nicht verwenden. 🙂 Aber sehen Sie sich einige an nette Beispiele bevor Sie sich für bin entscheiden reduce().
some()
Angenommen, Sie haben eine Reihe von Objekten, wobei jedes Objekt eine Person darstellt. Sie möchten wissen, ob sich Personen im Array befinden, die älter als 35 Jahre sind. Beachten Sie, dass Sie nicht zählen müssen, wie viele dieser Personen vorhanden sind, geschweige denn eine Liste von ihnen abrufen müssen. Was wir hier sagen, ist das Äquivalent von "einem oder mehreren" oder "mindestens einem".
Wie machen Sie das?
Ja, Sie können eine Flag-Variable erstellen und das Array durchlaufen, um dieses Problem wie folgt zu lösen:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
let foundOver35 = false;
for (let i = 0; i < persons.length; i ++) {
if(persons[i].age > 35) {
foundOver35 = true;
break;
}
}
if(foundOver35) {
console.log("Yup, there are a few people here!")
}Das Problem? Der Code ist meiner Meinung nach zu C-ähnlich oder Java-ähnlich. "Verbose" ist ein anderes Wort, das mir in den Sinn kommt. Erfahrene JS denken vielleicht an „hässlich“, „schrecklich“ usw. 😝 Und zu Recht würde ich argumentieren. Eine Möglichkeit, diesen Code zu verbessern, besteht darin, so etwas wie zu verwenden map(), aber selbst dann ist die Lösung etwas klobig.
Es stellt sich heraus, dass wir eine ziemlich nette Funktion namens haben some() bereits in der Kernsprache verfügbar. Diese Funktion arbeitet mit Arrays und akzeptiert eine benutzerdefinierte Filterfunktion, die einen Booleschen Wert von zurückgibt true or false. Im Wesentlichen macht es das, was wir in den letzten Minuten versucht haben, nur sehr prägnant und elegant. So können wir es verwenden:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
if(persons.some(person => {
return person.age > 35
})) {
console.log("Found some people!")
}Gleiche Eingabe, gleiches Ergebnis wie zuvor; Beachten Sie jedoch die massive Reduzierung des Codes! Beachten Sie auch, wie drastisch die kognitive Belastung reduziert wird, da wir den Code nicht mehr Zeile für Zeile analysieren müssen, als wären wir selbst der Dolmetscher! Der Code liest sich jetzt fast wie eine natürliche Sprache.
every()
Genau wie some()haben wir eine andere nützliche Funktion namens every(). Wie Sie inzwischen erraten können, gibt auch dies einen booleschen Wert zurück, je nachdem, ob aller Die Elemente im Array bestehen den angegebenen Test. Natürlich wird der zu bestehende Test die meiste Zeit als anonyme Funktion bereitgestellt. Ich werde Ihnen den Schmerz ersparen, wie eine naive Version des Codes aussehen könnte every() wird genutzt:
const entries = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entries.every(entry => {
return Number.isInteger(entry.id) && entry.id > 0;
})) {
console.log("All the entries have a valid id")
}Es ist offensichtlich, dass der Code alle Objekte im Array auf ihre Gültigkeit überprüft id Eigentum. Die Definition von "gültig" hängt vom Problemkontext ab, aber wie Sie sehen, habe ich für diesen Code nicht negative Ganzzahlen berücksichtigt. Wieder einmal sehen wir, wie einfach und elegant der Code zu lesen ist, was das einzige Ziel dieser (und ähnlicher) Funktion (en) ist.
includes()
Wie überprüfen Sie die Existenz von Unterzeichenfolgen und Array-Elementen? Wenn du wie ich bist, greifst du schnell nach indexOf() Suchen Sie dann in den Dokumenten nach den möglichen Rückgabewerten. Dies ist eine erhebliche Unannehmlichkeit, und die Rückgabewerte sind schwer zu merken (schnell - was bewirkt die Rückgabe eines Prozesses? 2 zum Betriebssystem bedeuten?).
Aber es gibt eine schöne Alternative, die wir nutzen können: includes(). Die Verwendung ist so einfach wie der Name und der resultierende Code ist extrem herzerwärmend. Denken Sie daran, dass der Abgleich von durchgeführt wird includes() Es wird zwischen Groß- und Kleinschreibung unterschieden, aber ich denke, das erwarten wir alle intuitiv. Und jetzt Zeit für Code!
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expectedErwarten Sie jedoch nicht zu viel von dieser bescheidenen Methode:
const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" methodEs kann nicht in Objekte schauen, da es einfach nicht für Objekte definiert ist. Aber hey, wir wissen, dass es auf Arrays funktioniert, also können wir hier vielleicht ein paar Tricks machen. . . 🤔.
const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});Was passiert also, wenn Sie diesen Code ausführen? Es explodiert nicht, aber die Ausgabe ist auch enttäuschend: false. 😫😫 Eigentlich hat dies mit Objekten, Zeigern und der Art und Weise zu tun, wie JavaScript den Speicher sieht und verwaltet, der eine eigene Welt ist. Wenn Sie tiefer tauchen möchten, können Sie den Sprung wagen (vielleicht beginnen Sie hier), aber ich höre gleich hier auf.
We kann Lassen Sie den obigen Code sich verhalten, wenn wir ihn wie folgt umschreiben, aber an diesem Punkt wird er meiner Meinung nach mehr oder weniger zum Witz:
const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // trueTrotzdem zeigt es, dass wir machen können includes() funktioniert an Objekten, also denke ich, dass es keine totale Katastrophe ist. 😄
slice()
Angenommen, wir haben eine Zeichenfolge, und ich bitte Sie, einen Teil davon zurückzugeben, der mit „r“ beginnt und mit „z“ endet (die tatsächlichen Zeichen sind nicht wichtig). Wie würden Sie es angehen? Vielleicht würden Sie eine neue Zeichenfolge erstellen und damit alle erforderlichen Zeichen speichern und zurückgeben. Oder wenn Sie wie die meisten Programmierer sind, geben Sie mir im Gegenzug zwei Array-Indizes: einen für den Beginn des Teilstrings und einen für das Ende.
Beide Ansätze sind in Ordnung, aber es gibt ein Konzept namens Slicing, das in solchen Situationen eine gute Lösung bietet. Zum Glück gibt es keine abstruse Theorie, der man folgen könnte. Schneiden bedeutet genau das, wonach es sich anhört - aus dem gegebenen einen kleineren String / Array zu erstellen, ähnlich wie wir Obstscheiben erstellen. Lassen Sie uns anhand eines einfachen Beispiels sehen, was ich meine:
const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all beenWenn wir slice()Wir stellen JavaScript zwei Indizes zur Verfügung - den einen, bei dem das Slicing gestartet werden soll, und den anderen, bei dem das Slicing gestoppt werden soll. Der Haken bei slice() ist, dass der Endindex ist nicht enthalten Im Endergebnis sehen wir, dass das Wort „Warten“ in der neuen Überschrift im obigen Code fehlt.
Konzepte wie das Schneiden sind insbesondere in anderen Sprachen wichtiger Python. Wenn Sie diese Entwickler fragen, werden sie sagen, dass sie sich ein Leben ohne diese Funktionalität nicht vorstellen können, und das zu Recht, wenn die Sprache eine sehr übersichtliche Syntax für das Schneiden bietet.
Das Schneiden ist ordentlich und äußerst bequem, und es gibt keinen Grund, es nicht zu verwenden. Es ist auch kein Syntaxzucker, der mit einer Leistungsbeeinträchtigung behaftet ist, da flache Kopien des ursprünglichen Arrays / Strings erstellt werden. Für JavaScript-Entwickler empfehle ich dringend, sich damit vertraut zu machen slice() und füge es deinem Arsenal hinzu!
splice()
Das Verfahren splice() klingt wie ein Cousin von slice()und in gewisser Weise können wir argumentieren, dass es ist. Beide erstellen neue Arrays / Strings aus den ursprünglichen, mit einem kleinen, aber wichtigen Unterschied - splice() entfernt, ändert oder fügt aber Elemente hinzu modifiziert das ursprüngliche Array. Diese „Zerstörung“ des ursprünglichen Arrays kann zu großen Problemen führen, wenn Sie nicht vorsichtig sind oder tiefe Kopien und Referenzen nicht verstehen. Ich frage mich, was die Entwickler davon abgehalten hat, den gleichen Ansatz wie für zu verwenden slice() und lassen Sie das ursprüngliche Array unberührt, aber ich denke, wir können einer Sprache mehr verzeihen in nur zehn Tagen erstellt.
Lassen Sie uns trotz meiner Beschwerden einen Blick darauf werfen, wie splice() funktioniert. Ich werde ein Beispiel zeigen, in dem wir einige Elemente aus einem Array entfernen, da dies die häufigste Verwendung für diese Methode ist. Ich werde auch keine Beispiele für das Hinzufügen und Einfügen angeben, da diese leicht nachgeschlagen werden können und auch einfach sind.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]Der Anruf bei splice() oben heißt es: am Index beginnen 2 (also die dritte Stelle) des Arrays und entfernen Sie ein Element. In dem angegebenen Array ist 'Käse' das dritte Element, daher wird es aus dem Array entfernt und das Array von Elementen wird erwartungsgemäß gekürzt. Übrigens werden die entfernten Gegenstände von zurückgegeben splice() in der Form oder einem Array. Wenn wir also wollten, hätten wir 'Käse' in einer Variablen erfassen können.
Durch meine Erfahrung, indexOf() funktioniert splice() Wir haben große Synergien - wir finden den Index eines Elements und entfernen ihn dann aus dem angegebenen Array. Beachten Sie jedoch, dass dies nicht immer die effizienteste Methode ist und die Verwendung von Objektschlüsseln (das Äquivalent einer Hash-Map) häufig viel schneller ist.
shift()
shift() ist eine Art Bequemlichkeitsmethode und wird verwendet, um das erste Element eines Arrays zu entfernen. Beachten Sie, dass das Gleiche mit getan werden kann splice(), Aber shift() ist ein bisschen leichter zu merken und intuitiv, wenn Sie nur das erste Element abhacken müssen.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]unshift()
Ebenso shift() entfernt das erste Element aus einem Array, unshift() Fügt dem Anfang des Arrays ein neues Element hinzu. Die Verwendung ist ebenso einfach und kompakt:
const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]Das heißt, ich kann mir nicht helfen und die neuen Spieler warnen: im Gegensatz zu den populären push() funktioniert pop() Methoden, shift() funktioniert unshift() sind äußerst ineffizient (aufgrund der Funktionsweise der zugrunde liegenden Algorithmen). Wenn Sie also mit großen Arrays arbeiten (z. B. über 2000 Elemente), können zu viele dieser Funktionsaufrufe Ihre Anwendung zum Stillstand bringen.
fill()
Manchmal müssen Sie mehrere Elemente in einen einzigen Wert ändern oder sogar das gesamte Array sozusagen „zurücksetzen“. In diesen Situationen fill() erspart Ihnen Schleifen und Fehler nacheinander. Es kann verwendet werden, um einen Teil oder das gesamte Array durch den angegebenen Wert zu ersetzen. Sehen wir uns einige Beispiele an:
const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]
const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]Weitere erwähnenswerte Funktionen
Während die obige Liste den meisten JavaScript-Entwicklern begegnet und sie in ihrer Karriere verwendet, ist sie keineswegs vollständig. Es gibt so viele kleinere, aber nützliche Funktionen (Methoden) in JavaScript, dass es nicht möglich ist, sie alle in einem einzigen Artikel zu behandeln. Das heißt, einige, die mir in den Sinn kommen, sind wie folgt:
reverse()sort()entries()fill()find()flat()
Ich ermutige Sie, diese zumindest nachzuschlagen, damit Sie eine Vorstellung davon haben, dass solche Annehmlichkeiten existieren.
Conclusion
JavaScript ist eine große Sprache, trotz der geringen Anzahl zu lernender Kernkonzepte. Die vielen Funktionen (Methoden), die uns zur Verfügung stehen, machen den Großteil dieser Größe aus. Da JavaScript jedoch für die meisten eine Sekundärsprache ist EntwicklerWir tauchen nicht tief genug ein und verpassen viele schöne und nützliche Funktionen, die es bietet. Eigentlich gilt das Gleiche für funktionale Programmierkonzepte, aber das ist ein Thema für einen anderen Tag! 😅
Wenn immer möglich, verbringen Sie einige Zeit damit, die Kernsprache (und wenn möglich berühmte Dienstprogrammbibliotheken wie z Lodash). Selbst ein paar Minuten, die für diese Bemühungen aufgewendet werden, führen zu massiven Produktivitätssteigerungen und weitaus saubererem und kompakterem Code.
