Hilfreiche JavaScript-Einzeiler für saubereren Code
JavaScript ist heute unbestreitbar eine der beliebtesten Programmiersprachen der Welt. Sie ist die Heimat der Vanilla-Programmierung, mehrerer Frameworks, komplexer APIs und einer breiten Palette von Bibliotheken, Modulen und Funktionen.
Egal, ob Sie ein Neuling oder ein erfahrener Entwickler sind, die Verwendung von Einzeilern ist eine großartige Möglichkeit, mehr mit JavaScript zu tun. In diesem Artikel werden über 25 JavaScript-Einzeiler vorgestellt, die Ihnen die Programmierung erleichtern und Ihren Code sauberer machen. Sie sind einfach, leicht zu merken und leistungsstark.
Los geht’s!
Wahlberechtigung
Diese Funktion prüft, ob ein Bürger wahlberechtigt ist. Wir setzen das Mindestalter für das Wahlrecht auf 18 Jahre fest. Wir verwenden einen sogenannten ternären Operator.
// So prüfen Sie die Wahlberechtigung
let age = 25;
let votingelig = (age >= 18) ? "Sie sind wahlberechtigt." : "Sie sind noch nicht wahlberechtigt";
document.write(votingelig);Um das letzte Vorkommen eines Wertes zu ermitteln
Wir können das letzte Vorkommen einer Zeichenkette mit der Methode lastIndexOf() abrufen, um diesen bestimmten Wert zu finden/zu suchen.
let lastoccurance = 'Jerusalem'.lastIndexOf('e');
document.write(lastoccurance);Abrufen des Domänennamens aus einer E-Mail
Hier verwenden wir die Methoden substring() und IndexOf(), um eine Teilzeichenkette aus einer Zeichenkette zu extrahieren.
let getdomain = 'codecodablog@gmail.com'.substring('codecodablog@gmail.com'.indexOf('@') + 1);
document.write(getdomain);Keine Fünfen
Dieses Programm zielt darauf ab, die Anzahl der Zahlen innerhalb eines bestimmten Bereichs zu ermitteln, zählt aber keine Zahlen mit einer 5 darin. Der Zahlenbereich zwischen 4 und 16 ergibt beispielsweise 11, weil 5 und 15 ausgelassen wurden. Das Ergebnis kann jedoch eine 5 enthalten.
//Zählen einer Reihe von Zahlen, aber keine Fünfen
nofives = (a, b) => Array.from(Array(b - a + 1), (b, i) => a + i).filter(b => !/5/.test(b)).length;
document.write(nofives(12,49));Finde die Länge des kürzesten Wortes
Geben Sie diesem Programm eine beliebige Textfolge und es zeigt die Länge des kürzesten Wortes.
//So ermitteln Sie die Länge des kürzesten Wortes im Text
const findShortestword = (s) => s.split(" ").sort((a, b) => b.length - a.length).pop().length;
document.write(findShortestword("Schlechte Situationen können nicht andauern"));Text in Camel Case ohne Leerzeichen umwandeln
camelCase ist eine Textcharakterisierung, bei der der erste Buchstabe eines Wortes in Großbuchstaben steht. Dieses Programm wandelt eine Zeichenkette in beliebiger Groß- und Kleinschreibung in camelCase um und entfernt die Leerzeichen innerhalb des Textes. Obwohl es unübersichtlich aussieht, ist es sehr einfach.
//Programm zur Konvertierung von Text in camelCase ohne Leerzeichen
String.prototype.camelCase=function(){
return this.trim().split(' ').map((w,e) => w.split('').map((q,r) =>
{
if (r==0) {
return q.toUpperCase()
}
else
{
return q.toLowerCase()
}
}).join('')).join('');
}
document.write("mein Name ist Effiong".camelCase());Verfügbarkeit des CEOs prüfen
Diese Funktion prüft die Verfügbarkeit eines Geschäftsführers gemäß seines Terminkalenders.
Angenommen, er hat eine Textnachricht, wenn er nicht erreichbar ist. In diesem Fall sollte das Programm eine automatische Nachricht senden, die dem SMS-Schreiber mitteilt, dass der CEO nicht verfügbar ist und wann er verfügbar sein wird. Wenn die aktuelle Zeit keinen Termin hat, ist die Ausgabe wahr.
Das Programm benötigt zwei Argumente - den Terminplan und die aktuelle Uhrzeit.
// um die Verfügbarkeit eines CEOs zu prüfen
const checkAvailability = (s,c) => s.reduce(((x,y) => y[0] < c && y[1] > c ? y[1] : x), true);
document.write(checkAvailability([["08:30", "1:20"], ["12:20", "15:50"]], "13:00"));Trimmen von Zeichen
Mit der Methode trim() möchten wir eine Zeichenkette ohne Leerzeichen ausgeben – wir entfernen diese am Anfang und am Ende des Textes.
//So trimmen Sie einen String
let trimvalue = ' Jerusalem '.trim();
document.write(trimvalue);Überprüfen, ob eine Zahl positiv, negativ oder null ist
Hier wird geprüft, ob eine Zahl positiv, negativ oder null ist
// Programm zur Prüfung, ob eine Zahl positiv, negativ oder null ist
let d = -10;
let result = (d >= 0) ? (d == 0 ? "zero" : "positive") : "negative";
document.write('Number is ${result}.');Berechnung der Quadratwurzel aus Zahlen
Um die Quadratwurzel aus einer Reihe von Zahlen zu ermitteln, verwenden wir die eingebauten Funktionen map() und Math().
//einfache Berechnungen zur Ermittlung der Quadratwurzel aus einer Reihe von Zahlen
let sqroot = [9, 36, 49].map(Math.sqrt);
document.write(sqroot);Ein festes Dezimalkomma erhalten
Das Aufrunden von Zahlen auf eine bestimmte Anzahl von Dezimalstellen ist eine allgemeine Operation in der Mathematik. Daher können wir solche Aktionen mit der JavaScript-Funktion Math() durchführen.
Erster Wert: die Zahl, auf die aufgerundet werden soll
Zweiter Wert: der Betrag, auf den die Zahl aufgerundet werden soll
//Programm zum Aufrunden von Zahlen auf eine bestimmte Dezimalstelle
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
document.write(toFixed(88.143786364, 5));Verwendung der Filterfunktion
In den folgenden beiden Einzeilern werden wir die Filterfunktion verwenden, um aus einem vorhandenen Array ein neues Array mit Elementen zu erstellen, die unter ein bestimmtes Kriterium fallen.
Glückszahl
Angenommen, wir haben einen Zahlenbereich von 1 bis 12, wollen aber nur Zahlen kleiner als 9 herausfiltern, weil Zahlen gleich oder kleiner als 9 unsere Glückszahlen sind. Das können wir ganz einfach mit der Methode filter() erreichen.
//Filterung nicht größer als 9
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let luckynos = nums.filter(nos => nos <= 9);
document.write(luckynos);Movie characters and the movies they belong to
Das Filtern vieler Zahlen ist nicht der einzige Einzeiler, den wir mit der Funktion filter() machen können. Filter() arbeitet mit Objekten und Eigenschaften in Hashtabellen. Nach der Zuordnung von Werten zu jedem Index können wir bestimmte Werte und Indizes herausfiltern.
let characters = [
{movie: 'Avatar Last Airbender', character: 'Sokka'},
{movie: 'Moana', character: 'Maui'},
{movie: 'Avatar Last Airbender', character: 'Azula'},
{movie: 'Moana', character: 'Sina'}
]
let char= characters.filter(char => char.movie == 'Avatar Last Airbender')
document.write(char);Die Summe der Zahlen
Um die Summe der Zahlen in einem bestimmten Array zu berechnen, verwenden wir die Funktion reduce(). Die Funktion reduce() reduziert, wie ihr Name schon sagt, ein Array auf einen einzigen Wert. Ihr Rückgabewert wird in Form von Summen gespeichert.
//Berechnen der Summe der Zahlen
const Sum = nos => nos.reduce((a,b) => a + b, 0);
document.write(Sum([8, 34, 6, 29, 2, 1]));Berechnung des Durchschnitts einer Reihe von Zahlen
Um den Durchschnitt einer Reihe von Zahlen zu berechnen, werden diese zunächst summiert und dann durch die Gesamtzahl/Länge der Zahlen geteilt. Die Methode reduce() in JavaScript vereinfacht diesen Vorgang erheblich.
//Durchschnitt berechnen
arr = [1,2,3,4,5,6,7,8,9,10,11,12]
let avg = (array) => array.reduce((a, b) => a + b) / array.length;
document.write(avg(arr));Um den maximalen Wert zu erhalten
Bei einer Verteilung von Zahlen in einem Array wird erwartet, dass wir die Zahl mit dem höchsten Wert zurückgeben. Dazu verwenden wir die Funktion max() und den Spread-Operator (...). Der Spread-Operator ermöglicht es, einen Ausdruck an Stellen zu erweitern, an denen mehrere Elemente/Argumente erwartet werden.
//maximaler Wert
const maxnum = nos => Math.max(...nos);
document.write(maxnum([5, 10, 15, 20, 25, 30, 35]));Um den Mindestwert zu erhalten
Diese Funktion ist genau das Gegenteil von der Ermittlung des Maximalwerts: Wir wollen den Minimalwert.
//Mindestwert
const minnum = nos => Math.min(...nos);
document.write(minnum([5, 10, 15, 20, 25, 30, 35]));Umkehrung einer Zeichenkette (String)
JavaScript verfügt über eine Methode zum Umkehren von Arrays. Sie heißt reverse(). Leider funktioniert sie nicht bei Zeichenketten. Um eine Zeichenkette umzukehren, müssen wir sie zunächst mit split() in ein Array umwandeln, die umgekehrte Operation durchführen und sie dann mit join() wieder in eine Zeichenkette umwandeln.
//Umkehrung einer Zeichenkette
let strreverse = str => str.split('').reverse().join('');
document.write(strreverse('Dies ist eine umgekehrte Zeichenfolge'));Berechnen einer Zufallszahl aus einer Reihe von Zahlen
Mit der Funktion Math() erhalten wir eine Zufallszahl aus einer Reihe von Zahlen.
//Berechnung einer Zufallszahl aus einer Reihe von Zahlen
let a = Math.floor(Math.random() * (45 - 35 + 1)) + 35
document.write(a);Umwandlung einer Zeichenkette in ein Array
Um eine Zeichenkette in ein Array umzuwandeln, verwenden wir die Methode split(). split() teilt eine Zeichenkette in ein Array von Teilzeichenketten auf. split() akzeptiert ein Trennzeichen als einen seiner Parameter, um zu bestimmen, wo jede Aufteilung stattfinden soll.
Fehlt das Trennzeichen, gibt der Split die gesamte Zeichenkette zurück.
//Konvertierung einer Zeichenkette in ein Array
let str = 'Dies ist eine Zeichenkette'.split(' ');
document.write(str);Ausführen einer Funktion für jedes Element eines Arrays
Um eine Funktion für jedes Element eines Arrays auszuführen, wird die Methode forEach() verwendet.
let letters = ['X', 'Y', 'Z'];
letters.forEach(function (e) {
document.write(e);
});Zuweisung mehrerer Variablen
JavaScript ist flexibel genug, um uns die Neuzuweisung von Variablen zu ermöglichen - in einer einzigen Zeile:
//multiple assignment
let [w,x,y,z] = [30,84,28,"BABY"]
document.write(w, x, y, z);Die ungerade ganze Zahl
In diesem Programm besteht ein Array aus ganzen Zahlen, entweder ungerade oder gerade Zahlen, mit Ausnahme einer einzigen ganzen Zahl. Diese ganze Zahl ist ein Ausreißer. Das Programm identifiziert diesen Ausreißer und gibt seinen Wert zurück.
//Programm zur Identifizierung eines Ausreißers
const Outlier = n => {
let odd = n.filter(x => x % 2 != 0), even = n.filter(x => x % 2 == 0);
return odd.length == 1 ? odd.pop() : even.pop();
}
document.write(Outlier(([2,6,8,10,3])));Sortieren eines Arrays nach der Länge der Zeichenkette (Stringlänge)
In einem Array mit Wörtern unterschiedlicher Länge sortieren wir die Wörter in der Reihenfolge vom kürzesten zum längsten Wort.
//Wörter vom kürzesten zum längsten sortieren
let sortByLength = arr => arr.sort((a,b) => a.length - b.length);
document.write(sortByLength(['Versuch', 'Leben', 'Nicht', 'Ich', 'Erneut']));Einstufung neuer Mitglieder
Ein neuer Club hat zwei Kategorien von Mitgliedern, „Senior“ und „Open“. Wir müssen neue Mitglieder in eine der beiden Kategorien einordnen. Um ein „Senior“ zu sein, muss ein Mitglied mindestens 55 Jahre alt sein und ein Handicap von mehr als sieben haben. In diesem Club reichen die Handicaps von -2 bis +26, je besser der Spieler, desto niedriger das Handicap.
Jede Eingabe für ein einzelnes Mitglied besteht aus Alter und Handicap.
//open oder senior
const openOrSenior =
(members) => members.map(([age, handicap]) => (age >= 55) && (handicap > 7) ? 'Senior' : 'Open')
document.write(openOrSenior([[45, 12],[55,21],[19, -2],[104, 20]]));Prüfung auf Xe und Os
Dieses Programm prüft, ob eine Zeichenkette die gleiche Anzahl von Xen und Os enthält. Der Rückgabewert ist ein Boolescher Wert, der Groß- und Kleinschreibung nicht berücksichtigt.
//Prüfung, ob eine Zeichenkette die gleiche Anzahl von Xen und Os enthält
let XO = str => str.toLowerCase().split('x').length === str.toLowerCase().split('o').length;
document.write(XO("xxxtooo"));Prüfung auf gerade und ungerade Zahlen
Diese Funktion prüft, ob eine Zahl gerade oder ungerade ist. Der Rückgabewert ist ein Boolescher Wert. Er gibt entweder true oder false zurück.
//Programm zur Prüfung, ob eine Zahl gerade oder ungerade ist
const isEvenOdd = num => num % 2 === 0;
document.write(isEvenOdd(3));Zum Anfang einer Seite scrollen
Um ein Programm zu schreiben, das es uns ermöglicht, an den oberen Rand einer Seite zu scrollen, benötigen wir die Methode window.scrollTo(). Diese Methode nimmt die x- und y-Koordinaten des Bildschirms entgegen. Wenn wir diese Koordinaten auf 0 und 0 setzen, bringen sie uns direkt an den Anfang der Seite.
Hinweis: Diese Methode funktioniert nicht mit dem Internet Explorer.
//scrollen Sie zum Anfang der Seite
const toppage = () => window.scrollTo(0, 0);
toppage();Prüfen, ob ein bestimmter Tag ein Werktag ist
JavaScript verfügt über eingebaute Datumsfunktionen. Diese machen es uns leicht, Daten und Kalenderfunktionen zu manipulieren. Eine davon ist die Funktion getDay(). Mit ihr können wir ein bestimmtes Datum ermitteln und mit einer kleinen Berechnung herausfinden, ob dieses Datum auf einen Werktag fällt. Das Ergebnis ist ein boolescher Wert.
//zu prüfen, ob ein bestimmter Tag ein Werktag ist
const wkday = (date) => date.getDay() % 6 !==0
document.write(wkday(new Date (2021, 2, 22)));So prüfen Sie auf Palindrome
Palindrome sind Wörter, die in umgekehrter Reihenfolge die gleiche Schreibweise haben. Wir können in einer einfachen einzeiligen Anweisung nach Palindromen suchen.
Die Ausgabe ist ein Boolescher Wert.
//Programm zur Prüfung auf Palindrome
const isPalindrome = str => str === str.split('').reverse().join('');
document.write(isPalindrome('civic'));Obwohl Einzeiler cool sind und manchmal auch zum Angeben dienen, haben sie einige Einschränkungen.
- Sie sollten nicht zu komplex sein, denn das erschwert die Fehlersuche und Wartung.
- Sie sind ideal für einfache und klare Aussagen.
Fazit
Das Verständnis der eingebauten Funktionen spielt eine wichtige Rolle beim Schreiben von kürzerem und effizientem JavaScript-Code. Zum Beispiel sind Einzeiler gepaart mit sauberen UI-Elementen ein Rezept für eine hervorragende mobile App.
Pfeilfunktionen, die in ECMAScript 6 (ES6) eingeführt wurden, machen ebenfalls Spaß, wenn man kürzere Funktionen schreibt. Sie benötigen nur eine Anweisung, die einen Wert zurückgibt. Außerdem benötigen wir Klammern, die Funktion und das Schlüsselwort „return“, was sie zur perfekten Syntax für Einzeiler macht.
Ternäre Operatoren verringern auch die übermäßige Verwendung von „if“ in bedingten Anweisungen, so dass einfache logische Anweisungen in nur eine Zeile passen.
Auf dem Weg zum Profi sind JavaScript-Einzeiler ein Beweis dafür, dass selbst die grundlegende Syntax von JavaScript ein enormes Potenzial birgt. Wir hoffen, dass wir gerade einem kreativen Programmierer geholfen haben, dem Erreichen hoher Ambitionen näher zu kommen.
Wenn Sie weitere Praxiserfahrung mit Überlegungen von Entwicklern oder Programmiertipps suchen, besuchen Sie bitte unsere Blog-Seite.
