Funktionen von modernem JavaScript, die Sie möglicherweise nicht kennen

Trotz der Tatsache, dass ich in den letzten sieben Jahren fast jeden Arbeitstag in JavaScript schreibe, muss ich zugeben, dass ich Nachrichten über Innovationen von ES wenig Aufmerksamkeit schenke. Die Hauptfunktionen wie Async / Warten und Proxys sind eine Sache, aber jedes Jahr gibt es einen Strom kleiner, schrittweiser Änderungen, die nicht in mein Sichtfeld fallen, weil es immer etwas Wichtigeres zu studieren gibt.

In diesem Artikel habe ich die Fähigkeiten des modernen JS zusammengefasst, über die bei ihrem Erscheinen nicht viel gesprochen wurde. Einige von ihnen erhöhen nur die Benutzerfreundlichkeit, andere sind unglaublich praktisch und ersparen Ihnen das Schreiben einer Menge Code.

ES2015

Binäre und oktale Literale

JavaScript muss nicht oft binäre Manipulationen verwenden. Aber manchmal entstehen Aufgaben, die sonst nicht gelöst werden können. Wenn Sie beispielsweise Hochleistungscode für schwache Geräte schreiben, quetschen Sie Bits in den lokalen Speicher, führen RGB-Pixelmanipulationen in einem Browser durch oder arbeiten mit dicht gepackten Binärdatenformaten.

All dies erfordert möglicherweise viel Arbeit beim Ausblenden / Kombinieren von Binärzahlen. es schien mir immer, dass sie vergebens in Dezimalstellen versteckt waren. In solchen Fällen wurde das binäre 0b zu ES6: 0b .

 const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101; 

Dies vereinfacht die Arbeit mit Binärflags erheblich:

 // Pizza toppings const olives = 0b0001; const ham = 0b0010; const pineapple = 0b0100; const artechoke = 0b1000; const pizza_ham_pineapple = pineapple | ham; const pizza_four_seasons = olives | ham | artechoke; 

Gleiches gilt für Oktalzahlen. In der JS-Welt ist dies eine Nischenmöglichkeit, aber sie werden häufig für Netzwerke und einige Dateiformate verwendet. Sie können Oktalzahlen mit der 0o Syntax schreiben.

Number.isNaN ()

Nicht zu verwechseln mit window.isNaN() , dies ist eine neue Methode mit viel intuitiverem Verhalten.

Der Klassiker isNaN hat einige interessante Tricks:

 isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true 

Was gibt uns das? Erstens ist keiner dieser Parameter tatsächlich NaN . Wie üblich liegt das Problem bei allen „bevorzugten“ JavaScript-Eigenschaften: Typumwandlung. Die Argumente für window.isNaN werden mit der Funktion Number in Zahlen umgewandelt.

Die neue statische Number.isNaN() -Methode löst dieses Problem. Er gibt ein für alle Mal die Gleichheit der an ihn und NaN weitergegebenen Argumente zurück. Das ist absolut klar:

 Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false 

Signatur: Number.isNaN : (value: any) => boolean

ES2016

Potenzierungsoperator

Dies geschieht von Zeit zu Zeit. Daher ist es gut, eine wörtliche Syntax für die Potenzierung zur Verfügung zu haben:

 2**2 === 4 3**2 === 9 3**3 === 27 

Seltsam, aber ich war mir sicher, dass dies bereits in JavaScript existiert. Vielleicht mit Python verwechselt.

Array.prototype.includes ()

Es war schwer zu übersehen, aber wenn Sie in den letzten drei Jahren array.indexOf(x) !== -1 , freuen Sie sich über die neue includes Methode:

 [1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false 

=== verwendet den Same Value Zero-Algorithmus , der fast identisch mit der strengen Gleichheitsprüfung ( === ) ist, außer dass er NaN Werte verarbeiten kann. Dieser Algorithmus vergleicht Objekte auch anhand von Links und nicht anhand von Inhalten:

 const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true 

includes kann einen zweiten Parameter von fromIndex , mit dem Sie einen Verschiebungswert fromIndex können:

 // positions 0 1 2 3 4 const array = [1, 1, 1, 2, 2]; array.includes(1, 2) === true array.includes(1, 3) === false 

Nützlich

Signatur: Array.prototype.includes : (match: any, offset?: Int) => boolean

ES2017

Shared Memory und atomare Operationen

Dies sind einige großartige Funktionen, die einfach von unschätzbarem Wert sind, wenn Sie viel mit Web-Workern arbeiten müssen. Sie können den Speicher direkt für mehrere Prozesse freigeben und Sperren festlegen, um Rennbedingungen zu vermeiden.

Dies sind zwei großartige Funktionen mit ziemlich komplexen APIs, daher werde ich sie hier nicht beschreiben. Weitere Informationen erhalten Sie zu diesem Artikel: https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . Noch unterstützen nicht alle Browser diese Funktionen, aber ich hoffe, dass sich die Situation in den nächsten Jahren verbessern wird.

ES2018

Goldmine der regulären Ausdrücke

ES2018 bietet eine ganze Reihe neuer Funktionen für reguläre Ausdrücke:

Lookbehind-Übereinstimmungen (Übereinstimmung mit vorherigen Zeichen)

In Laufzeiten, die dies unterstützen, können Sie jetzt reguläre Ausdrücke schreiben, die nach Zeichen suchen, bevor Sie übereinstimmen. So finden Sie beispielsweise alle Zahlen, denen ein Dollarzeichen vorangestellt ist:

 const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400'] 

Es dreht sich alles um die neue Lookbehind-Gruppe, die Twin Lookahead-Gruppen:

 Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc) 

Leider können Sie die neue Lookbehind-Syntax heute nicht in ältere Browser übersetzen. Daher ist es durchaus möglich, dass Sie sie nur für eine Weile in Node verwenden können.

Benannte Erfassungsgruppen

Reguläre Ausdrücke können jetzt Unterproben auswählen und für die einfache Analyse verwenden. Bis vor kurzem konnten wir solche Fragmente nur mit Zahlen bezeichnen, zum Beispiel:

 const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers' 

Und jetzt gibt es eine Syntax zum Benennen dieser Unterproben (oder Datensatzgruppen): In den Klammern am Anfang setzen wir ?<titl> , wenn wir der Gruppe einen Namen geben möchten:

 const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers' 

Leider funktioniert dies jetzt nur auf Chrome und Node.

Jetzt können Punkte neue Linien markieren

Es ist nur erforderlich, das Flag /s /someRegex./s , /anotherRegex./sg . B. /someRegex./s , /anotherRegex./sg .

ES2019

Array.prototype.flat () und flatMap ()

Ich war sehr froh, dies auf MDN zu sehen.

Einfach ausgedrückt konvertiert flat() ein mehrdimensionales Array in ein eindimensionales Array mit einer bestimmten maximalen Tiefe:

 const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9] 

flatMap ist eine map gefolgt von flat mit einer Tiefe von 1. Dies ist nützlich, wenn Sie eine Funktion flatMap müssen, die ein Array zurückgibt, das Ergebnis jedoch keine verschachtelte Datenstruktur sein muss:

 const texts = ["Hello,", "today I", "will", "use FlatMap"]; // with a plain map const mapped = texts.map(text => text.split(' ')); mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; // with flatmap const flatMapped = texts.flatMap(text => text.split(' ')); flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap']; 

Unbegrenzter Fang

Jetzt können Sie Try / Catch-Ausdrücke schreiben, ohne auf Fehler zu verweisen:

 try { // something throws } catch { // don't have to do catch(e) } 

Übrigens werden Hooks, bei denen Sie den Wert von e nicht berücksichtigen, manchmal als Behandlung von Pokemon-Ausnahmen bezeichnet . Weil du sie alle fangen musst!

Methoden zum Trimmen von Zeichenfolgenwerten

Leicht, aber nett:

 const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';