Dies ist Teil 9 der JavaScript-Blogbeitragsreihe, die Sie von Anfänger zu Fortgeschrittenem führen wird. Diesmal werden wir die folgenden Themen erkunden: JavaScript-Methoden, Standardparameterwerte, das Date-Objekt in JavaScript und die Pfeilfunktion. Am Ende dieser Reihe werden Sie alle Grundlagen kennen, die Sie benötigen, um mit dem Programmieren in JavaScript zu beginnen. Wenn Sie den vorherigen Blogbeitrag über JavaScript-Objekte noch nicht gelesen haben, können Sie dies hier tun. Ohne weitere Umschweife, lassen Sie uns mit dem neunten Tutorial beginnen.
Bis jetzt haben wir viele Konzepte und Themen in JavaScript gesehen, aber es gibt immer noch einige häufig verwendete, die wir nicht entdeckt haben. In diesem Tutorial werden wir sehen, worum es dabei geht. Das erste sind die Standardparameterwerte in JavaScript.
Funktionen werden in der Programmierung äußerst häufig verwendet, und wenn etwas so oft verwendet wird, gibt es nicht nur Frameworks wie React, die JavaScript-Funktionen nutzen, sondern es wurden sogar weitere Optimierungen entwickelt, um noch mehr aus JavaScript-Funktionen herauszuholen. Eine der Hauptfunktionen, die wir in Funktionen haben, nennt sich Standardparameterwerte. Standardparameter ermöglichen es uns, sichereren Code zu schreiben, der sichere Annahmen über die Benutzereingabe treffen kann. Dies kommt auch dem Benutzer zugute, indem ihm eine Standardeinstellung bereitgestellt wird, die es einfacher macht, aus seinen Optionen zu wählen. Lassen Sie uns einige Beispiele dafür sehen.
// Angenommen, Sie entwickeln eine Website für ein Café // und die meisten Leute möchten einen mittelgroßen Americano // in Anbetracht dessen möchten Sie es den Leuten erleichtern, // ihren Kaffee mit weniger Aufwand zu bestellen function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){ return (numberOfCoffee + " " + sizeOfCoffee + " Größe " + typeOfCoffee + " wird zubereitet. "); } console.log("Standardbestellung:"); console.log(orderCoffee()); // Auf diese Weise wird es für einen durchschnittlichen Kunden, der online bestellt, // viel einfacher sein, seinen täglichen Kaffee zu bestellen // so sehr, dass er ihn mit einem einzigen Knopfdruck bestellen kann // alternativ können die Leute ihren Kaffee auch anpassen // indem sie die Eingaben ändern console.log("Benutzerdefinierte Bestellung:"); console.log(orderCoffee("latte", "large", 2)); console.log("Eine weitere benutzerdefinierte Bestellung:"); console.log(orderCoffee("macchiato", "small", 1)); // Es ist auch möglich, nur einen Teil der Eingaben zu ändern // und die Standardparameter // für die restlichen Eingabefelder zu nutzen console.log("Teilweise angepasste Bestellung:"); console.log(orderCoffee("iced coffee"));
Das Ausführen des obigen Codes gibt uns die folgende Ausgabe:
Das Date-Objekt in JavaScript wird ziemlich häufig verwendet, insbesondere in der Webentwicklung. Wir können das Date-Objekt verwenden, um zeitabhängige Funktionen auszuführen, wie z.B. die Anzeigeeinstellungen auf den Dunkelmodus, den Lichtmodus oder einen anderen Modus, den der Benutzer bevorzugen könnte, zu ändern. Wir können auch die Datumsinformationen nach Bedarf innerhalb des Projekts verwenden, an dem wir arbeiten. Hier sind einige Beispiele für das Date-Objekt in Aktion:
// Der erste Schritt besteht darin, eine Instanz des Date-Objekts zu erstellen // Wir können dies tun, indem wir Folgendes schreiben und // es einer Variablen oder Konstante unserer Wahl zuweisen let today = new Date(); console.log("Wir sind im Jahr: " + today.getFullYear()); console.log("Wir können auch den Monat in Zahlen erhalten:"); console.log(today.getMonth()); console.log("Außerdem können wir die Stunde des Tages so erhalten:"); console.log(today.getHours()); console.log("Wir können auch die genauen Minuten zusammen mit den Sekunden erhalten"); console.log(today.getMinutes()); console.log(today.getSeconds()); // Sobald wir diese Zahlen haben, können wir sie nach Belieben verwenden // Wenn wir wollen, können wir sie anzeigen oder Entscheidungen basierend darauf treffen. // Wenn wir den Monat mit einem Namen // anstelle einer Zahl anzeigen möchten, können wir das auch erreichen // mit dem Folgenden const months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]; console.log("Wir sind im Monat " + months[today.getMonth()]); // Was wir gerade getan haben, war, ein Array zu erstellen, um Monatsnamen zu speichern // und dann den richtigen Monat mit einem Indexwert auszuwählen, // der von der .getMonth()-Methode bereitgestellt wird. // Wenn wir den Dunkelmodus nach 20 Uhr aktivieren wollten, // könnten wir das mit dem folgenden Code tun // Eine der ersten Dinge, an die wir uns erinnern sollten, ist, dass // die Stunden im 24-Stunden-Format angegeben werden // das bedeutet, dass 20 Uhr 20 als Stunden bedeutet // Wir können auch eine Kurzform verwenden // und die Erstellung des neuen Date-Objekts // mit der getHours-Methode kombinieren let timeOfDay = new Date().getHours(); if (timeOfDay >= 20) { console.log("Dunkelmodus aktivieren..."); } else { console.log("Dunkelmodus nicht aktivieren"); } // Da die aktuelle Zeit nach 20 Uhr liegt, // erwarten wir in diesem Fall, dass der Dunkelmodus aktiviert wird. // was auch das Ergebnis ist, das wir sehen können, wie wir aus // der Konsolenausgabe sehen können.
Das Ausführen des obigen Codes gibt uns die folgenden Konsolenprotokolle:
Die map-Methode ist eine äußerst nützliche Methode, die Ihnen viele Zeilen Code sparen kann, und je nachdem, wie Sie sie verwenden, kann sie Ihren Code viel sauberer machen. Sie ersetzt im Wesentlichen die Verwendung einer for-Schleife, wenn Sie sie verwenden, um über ein Array zu iterieren. Hier sind einige Beispiele für die map()-Methode.
// Lassen Sie uns ein Array erstellen, das wir für das Mapping verwenden werden let someNumbers = [1, 2, 3, 4, 5]; // Lassen Sie uns auch die Funktionen erstellen, die wir // der map-Methode bereitstellen werden function doubleNums(num1){ return num1 * 2; } function squareNums(num1){ return num1 * num1; } function add100(num1){ return num1 + 100; } console.log("Verdoppelte Zahlenarray:"); console.log(someNumbers.map(doubleNums)); console.log("Quadrat der Zahlenarray:"); console.log(someNumbers.map(squareNums)); console.log("100 zu jedem Element im Zahlenarray hinzugefügt:"); console.log(someNumbers.map(add100)); // Die map()-Methode wird über jedes der // Elemente in einem gegebenen Array iterieren und die // bereitgestellte Funktion anwenden // Beachten Sie, dass wir keine Klammern // nach den Funktionsnamen einfügen, dies würde die Funktion aufrufen // Stattdessen übergeben wir den Funktionsnamen, // und die map()-Methode ruft sie auf, wenn sie benötigt wird
Das Ausführen des obigen Codes gibt uns die folgenden Konsolenprotokolle:
Die filter()-Methode, zusammen mit der map()-Methode, sind beide ziemlich gängige JavaScript-Methoden. Sie sind sehr ähnlich zu der map()-Methode, die wir gerade gesehen haben. Mit der map()-Methode können wir jede Funktion übergeben, und diese Funktion wird auf jedes der Elemente in einem Array angewendet. Mit der filter()-Methode übergeben wir ein Filterkriterium, und die Filtermethode wird über alle Elemente in einem Array iterieren und ein neues Array zurückgeben, in dem nur die Elemente, die das Kriterium erfüllen, verbleiben. Lassen Sie uns einige Beispiele dafür sehen:
// Lassen Sie uns zuerst ein Array erstellen // um die filter()-Methode anzuwenden let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; function checkEven(num1){ if (num1 % 2 == 0){ return num1; } } function checkOdd(num1){ if (num1 % 2 == 1){ return num1; } } function over13(num1){ if (num1 > 13){ return num1; } } function divisibleByFive(num){ if (num % 5 == 0){ return num; } } console.log("Gerade Zahlen aus der Liste:"); console.log(someNumbers.filter(checkEven)); console.log("Ungerade Zahlen aus der Liste:"); console.log(someNumbers.filter(checkOdd)); console.log("Zahlen über 13 aus dem Array:"); console.log(someNumbers.filter(over13)); console.log("Zahlen, die durch 5 teilbar sind, aus dem Array:"); console.log(someNumbers.filter(divisibleByFive));Das Ausführen des obigen Codes gibt uns die folgenden Konsolenprotokolle:
Erinnern Sie sich, als wir sagten, dass Funktionen in JavaScript äußerst häufig sind und viele Optimierungen an ihnen vorgenommen werden, um noch leistungsfähiger oder sauberer Code zu erhalten? Nun, Pfeilfunktionen sind eine davon. Pfeilfunktionen werden manchmal auch als fette Pfeile bezeichnet. Sie bieten im Wesentlichen eine viel kürzere Möglichkeit, Ihre Funktionen zu schreiben. Sie werden auch sehr häufig mit den JavaScript-Methoden verwendet, die wir gerade gesehen haben. Lassen Sie uns sie mit einigen Beispielen sehen:
// JavaScript bietet mehrere Ebenen der // Codeverkürzung mit Pfeilfunktionen, abhängig von Ihrem genauen Code // Im Wesentlichen ist der längste Weg, wie wir eine Funktion schreiben können, // der Weg, wie wir sie immer schreiben, ohne die Pfeilfunktionen zu verwenden // Lassen Sie uns mit einem Array beginnen, um die Pfeilfunktionen anzuwenden let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; console.log("Ursprüngliches Array:"); console.log(someNumbers); // In den vorherigen Beispielen haben wir viele Funktionen angewendet // nachdem wir sie als reguläre benannte Funktionen erstellt haben // In diesem Beispiel werden wir die genauen Transformationen anwenden, // damit Sie die beiden Extreme in der Code-Länge sehen können // Verdoppeln Sie jede Zahl im Array: console.log("Verdoppeln Sie jede Zahl im Array:") console.log(someNumbers.map(num => num * 2)); // Quadrat jeder Zahl im Array: console.log("Quadrat jeder Zahl im Array:") console.log(someNumbers.map(num => num * num)); // 100 zu jeder Zahl im Array hinzufügen: console.log("Fügen Sie 100 zu jeder Zahl im Array hinzu:") console.log(someNumbers.map(num => num + 100)); // Nur die geraden Zahlen im Array behalten: console.log("Nur die geraden Zahlen im Array behalten:") console.log(someNumbers.filter(num => num % 2 == 0)); // Nur die ungeraden Zahlen im Array behalten: console.log("Nur die ungeraden Zahlen im Array behalten:") console.log(someNumbers.filter(num => num % 2 == 1)); // Nur die Zahlen behalten, die durch 5 teilbar sind: console.log("Nur die Zahlen behalten, die durch 5 teilbar sind:") console.log(someNumbers.filter(num => num % 5 == 0)); // Nur die Zahlen behalten, die über 13 liegen: console.log("Nur die Zahlen behalten, die über 13 liegen:") console.log(someNumbers.filter(num => num > 13));
Das Ausführen des obigen Codes gibt uns die folgenden Konsolenprotokolle:
Im nächsten Tutorial werden wir einen Überblick über das geben, was wir gesehen haben, und sehen, was als Nächstes kommt.
JavaScript-Experte und Dozent, der IT-Abteilungen schult. Sein Hauptziel ist es, die Produktivität des Teams zu steigern, indem er anderen beibringt, wie man effektiv beim Programmieren zusammenarbeitet.
Wer ist ein Onboarding-Spezialist? Onboarding ist eines der Instrumente des Personalmanagements. Es ist die letzte…
Obwohl es so erscheinen mag, dass Crowdfunding und Crowdlending dieselben Konzepte sind, werden sie oft…
Ist es möglich, ein erfolgreiches Startup zu gründen, indem man Freiberufler einstellt? Ja, das ist…
Große und mittelständische Unternehmen mit einer eigenen Personalabteilung beschäftigen neben Personalfachleuten auch Personalanalysten. Wenn die…
Planen Sie, einen Online-Shop einzurichten, und fragen sich, wo Sie anfangen sollen? Wie man eine…
Wie macht man ein Stockfoto? Ist es schwierig, ein tolles Stockbild zu erstellen, das verkauft…