Einführung in ECMAScript 2017 (ES8)

Inhaltsverzeichnis

Vorwort
ES7 Übersicht
1. Objekt.Einträge
2. Objektwerte
3. String.prototype.padEnd
4. String.prototype.padStart
5. Object.getOwnPropertyDescriptor
6. Nachgestellte Kommas
7. SharedArrayBuffer
8. Atomics
9. Async-Funktionen

Vorwort

Hallo, in der Vergangenheit habe ich bereits über Neuerungen in ES6 nachgedacht und jetzt ist es an der Zeit, ES8 auseinander zu nehmen, da es viele neue Dinge gebracht hat. Ich habe ES7 (2016) nicht separat betrachtet, da diese Version nur 2 Neuerungen brachte. Dies ist Array.prototype.includes () und der Exponentiationsoperator. Bevor Sie ES8 starten, schauen wir uns die Neuerungen von ES7 an.

ES7 Übersicht

Die Methode includes () bestimmt, ob das Array ein bestimmtes Element enthält. Abhängig davon wird true oder false zurückgegeben.

Array.prototype.includes(searchElement[, fromIndex = 0]) : Boolean 

searchElement - Das zu durchsuchende Element.

fromIndex - Die Position im Array, von der aus die Suche nach dem searchElement-Element gestartet werden soll. Bei negativen Werten wird die Suche beginnend mit dem Index array.length + fromIndex aufsteigend ausgeführt. Der Standardwert ist 0.

Beispiele

 [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true 

includes () kann auf andere Arten von Objekten angewendet werden (z. B. arrayähnliche Objekte). Beispiel: Verwenden der Methode includes () für ein Argumentobjekt.

 (function() { console.log([].includes.call(arguments, 'a')); // true console.log([].includes.call(arguments, 'd')); // false })('a','b','c'); 

Der Potenzierungsoperator (**) gibt eine Potenz mit der Basis a und einem natürlichen Exponenten b zurück. Erhöhen von a auf die Potenz von b.

 a ** b 

Beispiele

 2 ** 3 // 8 3 ** 2 // 9 3 ** 2.5 // 15.588457268119896 10 ** -1 // 0.1 NaN ** 2 // NaN 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 64 -(2 ** 2) // -4 (-2) ** 2 // 4 

1. Objekt.Einträge

Object.entries () gibt ein Array zurück, dessen Elemente Arrays sind, die der aufgezählten Eigenschaft des direkt im Objekt gefundenen Paars [key, value] entsprechen. Die Reihenfolge der Eigenschaften ist dieselbe wie beim manuellen Durchlaufen der Eigenschaften eines Objekts.

 Object.entries(obj) : Array 

obj - Ein Objekt, dessen aufgezählte Eigenschaften als Array [Schlüssel, Wert] zurückgegeben werden.

Object.entries () gibt die Eigenschaften in derselben Reihenfolge zurück wie in der for ... in-Schleife (der Unterschied besteht darin, dass for-in auch Eigenschaften aus der Prototypkette auflistet). Die Reihenfolge der Elemente im Array, die Object.entries () zurückgibt, ist unabhängig von der Deklaration des Objekts. Wenn eine bestimmte Reihenfolge erforderlich ist, muss das Array sortiert werden, bevor die Methode aufgerufen wird.

Beispiele

 var obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] //    var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] //    c random   var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] // getFoo  ,    var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); my_obj.foo = "bar"; console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ] // non-object     object console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`) // "one": 1 // "two": 2 

Objekt in Karte konvertieren

Der neue Map () -Konstruktor akzeptiert die Wiederholung von Werten. Mit Object.entries können Sie Object auf einfache Weise in Map konvertieren. Dies ist prägnanter als die Verwendung eines Arrays mit 2 Elementen, aber Schlüssel können nur Zeichenfolgen sein.

 var obj = { foo: "bar", baz: 42 }; var map = new Map(Object.entries(obj)); console.log(map); // Map {"foo" => "bar", "baz" => 42} 

Warum ist der Rückgabewert von Object.entries () ein Array und kein Iterator?
Der entsprechende Anwendungsfall ist in diesem Fall Object.keys () und nicht beispielsweise Map.prototype.entries ().

Warum gibt Object.entries () nur aufgezählte native Eigenschaften mit Zeichenfolgenschlüsseln zurück?

Auch dies geschieht, um mit Object.keys () übereinzustimmen. Diese Methode ignoriert auch Eigenschaften, deren Schlüssel Zeichen sind. Am Ende gibt es möglicherweise eine Reflect.ownEntries () -Methode, die alle ihre eigenen Eigenschaften zurückgibt.

Siehe object.entries in der offiziellen Spezifikation sowie in den MDN-Webdokumenten .

2. Objektwerte

Object.values ​​() gibt ein Array zurück, dessen Elemente die Werte der im Objekt gefundenen Aufzählungseigenschaften sind. Die Reihenfolge ist dieselbe, als würden Sie das Objekt manuell durchlaufen.

 Object.values(obj) : Array 

obj - Ein Objekt, dessen Werte der aufgezählten Eigenschaften zurückgegeben werden.

Die Object.values ​​() -Methode gibt ein Array von Werten der aufgezählten Eigenschaften des Objekts in derselben Reihenfolge wie die for ... in-Schleife zurück. Der Unterschied zwischen einer Schleife und einer Methode besteht darin, dass die Schleife Eigenschaften von und von der Prototypkette auflistet.

Beispiele

 var obj = { foo: "bar", baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] //    var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c'] 

Der Unterschied zwischen Object.entries und Object.values ​​() besteht darin, dass das erste ein Array von Arrays zurückgibt, das den Namen und den Wert der Eigenschaft enthält, während das zweite nur ein Array mit dem Wert der Eigenschaften zurückgibt.

Beispielunterschied zwischen Object.values ​​() und Object.entries ()

 const object = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object)); // ["somestring", 42, false] console.log(Object.entries(object)); // [ ["a", "somestring"], ["b", 42], ["c", false] ] 

Siehe Object.values ​​() in der offiziellen Spezifikation sowie in MDN Web Docs .

3. String.prototype.padEnd

Die padEnd () -Methode vervollständigt die aktuelle Zeile mit der angegebenen Zeichenfolge (wird möglicherweise wiederholt), sodass die resultierende Zeichenfolge die angegebene Länge erreicht. Die Addition wird am Ende (rechts) der aktuellen Zeile angewendet.

 String.prototype.padEnd(maxLength [ , fillString ]) : String 

maxLength - Die Länge der resultierenden Zeile, nachdem die aktuelle Zeile aufgefüllt wurde. Wenn dieser Parameter kleiner als die Länge der aktuellen Zeile ist, wird die aktuelle Zeile so wie sie ist zurückgegeben.
fillString - Ein String, der die aktuelle Zeile mit ergänzt. Wenn diese Zeile zu lang ist, wird sie abgeschnitten und die am weitesten links stehende wird angewendet. "" (0x0020 SPACE) ist der Standardwert für diesen Parameter.

Beispiele

 'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "foo"); // "abcfoofoof" 'abc'.padEnd(6,"123456"); // "abc123" 

Zu den Anwendungsfällen für das Auffüllen von Zeichenfolgen gehören:

• Hinzufügen eines Zählers oder einer Kennung zu einem Dateinamen oder einer URL: 'file 001.txt'
• Konsolenausgangsausrichtung: „Test 001: ✓“
• Drucken Sie hexadezimale oder binäre Zahlen mit einer festen Anzahl von Ziffern: '0x00FF'

Siehe String.prototype.padEnd in der offiziellen Spezifikation sowie in den MDN-Webdokumenten .

4. String.prototype.padStart

Die padStart () -Methode füllt die aktuelle Zeile mit einer anderen Zeile (ggf. mehrmals), sodass die resultierende Zeile die angegebene Länge erreicht. Das Befüllen erfolgt am Anfang (links) der aktuellen Zeile.

 String.prototype.padStart(maxLength [, fillString]) : String 

maxLength - Die Länge der Zusammenfassungszeile nach Abschluss der aktuellen Zeile. Wenn der Wert kleiner als die Länge der aktuellen Zeile ist, wird die aktuelle Zeile unverändert zurückgegeben.

fillString - Ein String zum Füllen der aktuellen Zeile. Wenn diese Zeichenfolge für die angegebene Länge zu lang ist, wird sie abgeschnitten. Der Standardwert ist "" (0x0020 SPACE).

Beispiele

 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc" 

Warum heißen die Auffüllmethoden padLeft und padRight nicht?

Bei bidirektionalen Sprachen oder Sprachen von rechts nach links funktionieren die Begriffe "links" und "rechts" nicht. Daher folgt die Benennung von padStart und padEnd vorhandenen Namen, die mit startsWith und endsWith beginnen.

Siehe String.prototype.padStart in der offiziellen Spezifikation sowie in den MDN-Webdokumenten .

5. Object.getOwnPropertyDescriptor

Die Object.getOwnPropertyDescriptor () -Methode gibt einen Eigenschaftsdeskriptor für die eigene Eigenschaft (dh eine Eigenschaft, die sich direkt im Objekt befindet und nicht über die Prototypkette empfangen wird) des übergebenen Objekts zurück. Wenn die Eigenschaft nicht vorhanden ist, wird undefiniert zurückgegeben.

 Object.getOwnPropertyDescriptor(obj, prop) : Object 

obj - Das Objekt, in dem die Eigenschaft gesucht wird.

prop - Der Name der Eigenschaft, deren Beschreibung zurückgegeben wird.

Mit dieser Methode können Sie die genaue Beschreibung der Eigenschaft anzeigen. Eine Eigenschaft in JavaScript besteht aus einem Zeichenfolgennamen und einem Eigenschaftsdeskriptor.

Ein Eigenschaftsdeskriptor ist ein Datensatz mit einigen der folgenden Attribute:

• value - Der mit der Eigenschaft verknüpfte Wert (nur im Datendeskriptor).
• writable - true, wenn der mit der Eigenschaft verknüpfte Wert geändert werden kann, andernfalls false (nur im Datendeskriptor).
• get - Eine Funktion, die den Wert der Eigenschaft zurückgibt, oder undefiniert, wenn keine solche Funktion vorhanden ist (nur im Zugriffsdeskriptor).
• set - Eine Funktion, die den Wert einer Eigenschaft ändert oder undefiniert ist, wenn keine solche Funktion vorhanden ist (nur im Zugriffsdeskriptor).
• konfigurierbar - true, wenn der Handle-Typ dieser Eigenschaft geändert werden kann und wenn die Eigenschaft aus dem Objekt entfernt werden kann, das sie enthält, andernfalls false.
• enumerable - true, wenn diese Eigenschaft verfügbar ist, wenn die Eigenschaften des Objekts aufgelistet werden, das sie enthält, andernfalls false.

Beispiele

 obj = { get foo() { return 10; } }; console.log(Object.getOwnPropertyDescriptor(obj, 'foo')); // {set: undefined, enumerable: true, configurable: true, get: ƒ} obj2 = { bar: 42 }; console.log(Object.getOwnPropertyDescriptor(obj2, 'bar')); // {value: 42, writable: true, enumerable: true, configurable: true} 

Anwendungsfälle für Object.getOwnPropertyDescriptor ()

Erster Anwendungsfall: Kopieren von Eigenschaften in ein Objekt
Ab ES6 verfügt JavaScript bereits über eine Werkzeugmethode zum Kopieren von Eigenschaften: Object.assign (). Diese Methode verwendet jedoch einfache Abruf- und Festlegungsoperationen, um eine Eigenschaft zu kopieren, deren Schlüssel der Schlüssel ist:

 const value = source[key]; // get target[key] = value; // set 

Dies bedeutet, dass Eigenschaften mit anderen als den standardmäßig festgelegten Attributen (Methoden zum Abrufen, Festlegen, Schreiben usw.) nicht korrekt kopiert werden. Das folgende Beispiel veranschaulicht diese Einschränkung. Die Quelle des Objekts hat ein Installationsprogramm, dessen Schlüssel foo lautet:

 const source = { set foo(value) { console.log(value); } }; console.log(Object.getOwnPropertyDescriptor(source, 'foo')); // { get: undefined, set: [Function: foo], enumerable: true, configurable: true } 

Das Kopieren der foo-Eigenschaft in das Zielobjekt mit Object.assign () schlägt fehl:

 const target1 = {}; Object.assign(target1, source); console.log(Object.getOwnPropertyDescriptor(target1, 'foo')); // { value: undefined, writable: true, enumerable: true, configurable: true } 

Glücklicherweise funktioniert die Verwendung von Object.getOwnPropertyDescriptors () zusammen mit Object.defineProperties ():

 const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); console.log(Object.getOwnPropertyDescriptor(target2, 'foo')); // { get: undefined, set: [Function: foo], enumerable: true, configurable: true } 

Zweiter Anwendungsfall: Klonen von Objekten
Das flache Klonen ähnelt dem Kopieren von Eigenschaften, daher ist Object.getOwnPropertyDescriptors () auch hier eine gute Wahl.

Dieses Mal verwenden wir Object.create (), das zwei Parameter hat:
Der erste Parameter gibt den Prototyp des zurückgegebenen Objekts an.

Ein optionaler zweiter Parameter ist eine Sammlung von Eigenschaftsbeschreibungen, die den von Object.getOwnPropertyDescriptors () zurückgegebenen ähnlich sind.

 const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); 

Dritter Anwendungsfall: plattformübergreifende Objektliterale mit beliebigen Prototypen.

Die syntaktisch beste Möglichkeit, ein Objektliteral zum Erstellen eines Objekts mit einem beliebigen Prototyp zu verwenden, ist die Verwendung der speziellen Eigenschaft __proto__:

 const obj = { __proto__: prot, foo: 123, }; 

Leider ist diese Funktion nur in Browsern verfügbar. Die allgemeine Problemumgehung lautet Object.create () und die Zuweisung:

 const obj = Object.create(prot); obj.foo = 123; 

Sie können aber auch Object.getOwnPropertyDescriptors () verwenden:

 const obj = Object.create( prot, Object.getOwnPropertyDescriptors({ foo: 123, }) ); 

Eine andere Alternative ist Object.assign ():

 const obj = Object.assign( Object.create(prot), { foo: 123, } ); 

Fallstricke: Kopiermethoden mit super.

Die Methode, die Super verwendet, ist eng an sein Ausgangsobjekt (das Objekt, in dem es gespeichert ist) gebunden. Derzeit gibt es keine Möglichkeit, eine solche Methode auf ein anderes Objekt zu kopieren oder zu verschieben.

Siehe Object.getOwnPropertyDescriptor in der offiziellen Spezifikation sowie in MDN-Webdokumenten .

6. Nachgestellte Kommas

Hängende Kommas (nachstehende Kommas) - können hilfreich sein, wenn Sie dem JavaScript-Code neue Elemente, Parameter oder Eigenschaften hinzufügen. Wenn Sie eine neue Eigenschaft hinzufügen möchten, fügen Sie einfach eine neue Zeile hinzu, ohne die vorherige zu ändern, sofern das Komma bereits verwendet wird. Dadurch werden die Unterschiede in der Versionskontrolle klarer und Codeänderungen können weniger problematisch sein.

Anführungszeichen in Literalen

Arrays

JavaScript ignoriert Kommas in Arrays:

 var arr = [ 0, 1, 2, ]; console.log(arr); // [0, 1, 2] console.log(arr.length); // 3 var arr2 = [0, 1, 2,,,]; console.log(arr2.length); // 5 arr2.forEach((e) => console.log(e)); // 0 1 2 console.log(arr.map((e) => e)); // 0 1 2 

Wenn mehr als ein Baumelpunkt verwendet wird, werden Löcher erzeugt. Ein Array mit "Löchern" wird als dünn bezeichnet (ein dichtes Array hat keine "Löcher"). Wenn Sie ein Array beispielsweise mit Array.prototype.forEach () oder Array.prototype.map () iterieren, werden Löcher übersprungen.

Die Objekte

 var object = { foo: "bar", baz: "qwerty", age: 42, }; console.log(object); // {foo: "bar", baz: "qwerty", age: 42} 

Kommas in Funktionen

Parameterdefinition

Die folgenden Definitionen der Funktionsparameter sind gültig und einander äquivalent. Baumelnde Kommas wirken sich nicht auf die Eigenschaft length einer Funktion oder deren Argumente aus.

 function f(p) {} function f(p,) {} (p) => {}; (p,) => {}; 

Methodendefinition

Das Komma funktioniert auch beim Definieren von Methoden für Klassen oder Objekte.

 class C { one(a,) {}, two(a, b,) {}, } var obj = { one(a,) {}, two(a, b,) {}, }; 

Funktionsaufruf

Die folgenden Funktionsaufrufe sind gültig und einander gleichwertig.

 f(p); f(p,); Math.max(10, 20); Math.max(10, 20,); 

Ungültige Kommas

Das Definieren von Funktionsparametern oder das Aufrufen einer Funktion, die nur ein Komma enthält, löst einen SyntaxError aus. Außerdem sind bei Verwendung der übrigen Parameter Hängekommas nicht zulässig.

 function f(,) {} // SyntaxError: missing formal parameter (,) => {}; // SyntaxError: expected expression, got ',' f(,) // SyntaxError: expected expression, got ',' function f(...p,) {} // SyntaxError: parameter after rest parameter (...p,) => {} // SyntaxError: expected closing parenthesis, got ',' 

Hängende Kommas bei der Destrukturierung

Hängende Kommas können bei destruktiver Zuordnung auch links verwendet werden.

 //      [a, b,] = [1, 2]; //      var o = { p: 42, q: true, }; var {p, q,} = o; 

Mit den verbleibenden Parametern wird erneut ein SyntaxError ausgelöst.

 var [a, ...b,] = [1, 2, 3]; // Uncaught SyntaxError: Rest element must be last element 

JSON Dangling Commas

Hängende Kommas in einem Objekt sind nur in ECMAScript 5 zulässig. Da JSON auf einer älteren JavaScript-Syntax als ES5 basiert, sind hängende Kommas in JSON nicht zulässig .

Beide Zeilen werfen einen SyntaxError

 JSON.parse('[1, 2, 3, 4, ]'); JSON.parse('{"foo" : 1, }'); // Uncaught SyntaxError: Unexpected token ] in JSON // Uncaught SyntaxError: Unexpected token } in JSON 

Warum sind Kommas nützlich?

Es gibt zwei Vorteile.

Erstens ist das Neuanordnen von Elementen einfacher, da Sie keine Kommas hinzufügen oder entfernen müssen, wenn das letzte Element seine Position ändert.

Zweitens können Versionskontrollsysteme nachverfolgen, was sich wirklich geändert hat. Zum Beispiel von:

 [ 'Foo' ] : [ 'Foo', '' ] 

bewirkt, dass sowohl die Zeile mit 'foo' als auch die Zeile mit 'bar' als geändert markiert werden, obwohl die einzige echte Änderung darin besteht, die letzte Zeile hinzuzufügen.

Siehe Nachgestellte Kommas in MDN-Webdokumenten .

7. SharedArrayBuffer

Das SharedArrayBuffer-Objekt wird zum Erstellen eines geteilten Puffers mit fester Länge zum Speichern primitiver Binärdaten verwendet, ähnlich dem ArrayBuffer-Objekt. Im Gegensatz dazu können SharedArrayBuffer-Instanzen zum Erstellen einer Ansicht im gemeinsam genutzten Speicher verwendet werden. SharedArrayBuffer kann nicht getrennt werden.

 new SharedArrayBuffer(length) : Object 

length - Die Größe in Byte, um das Pufferarray zu erstellen.

return - Ein neues SharedArrayBuffer-Objekt der angegebenen Länge. Sein Inhalt nach der Initialisierung ist 0.

PostMessage und strukturiertes Klonen werden verwendet, um den Speicher mithilfe eines SharedArrayBuffer-Objekts zwischen einem Agenten im Cluster und einem anderen aufzuteilen (der Agent kann entweder das Hauptprogramm der Webseite oder einer der Web-Worker sein).

Der strukturierte Klonalgorithmus akzeptiert SharedArrayBuffers und TypedArrays, die SharedArrayBuffers zugeordnet sind. In beiden Fällen wird das SharedArrayBuffer-Objekt an den Empfänger übergeben, wodurch ein neues privates SharedArrayBuffer-Objekt im empfangenden Agenten erstellt wird (wie bei ArrayBuffer). Der gemeinsam genutzte Datenblock, auf den von beiden SharedArrayBuffer-Objekten verwiesen wird, ist jedoch derselbe Datenblock, und Effekte von Drittanbietern im Block in einem der Agenten werden möglicherweise im anderen Agenten sichtbar.

 var sab = new SharedArrayBuffer(1024); worker.postMessage(sab); 

Shared Memory kann gleichzeitig in Workern oder im Haupt-Thread erstellt und geändert werden. Je nach System (CPU, Betriebssystem, Browser) kann es einige Zeit dauern, bis die Änderungen in alle Kontexte übertragen werden. Zur Synchronisation werden atomare Operationen benötigt.

Shared Array Buffers ist ein primitiver Baustein für Parallelitätsabstraktionen höherer Ebenen. Mit ihnen können Sie die Bytes eines SharedArrayBuffer-Objekts für mehrere Worker und den Hauptthread freigeben (der Puffer wird für den Zugriff auf Bytes freigegeben und in ein typisiertes Array eingeschlossen). Diese Art des Austauschs hat zwei Vorteile:
Sie können Daten zwischen Mitarbeitern schneller austauschen.

Die Koordination zwischen Arbeitnehmern wird einfacher und schneller (im Vergleich zu postMessage ()).

Die Implementierung des Arbeiters ist wie folgt.

 // worker.js self.addEventListener ('message', function (event) { const {sharedBuffer} = event.data; const sharedArray = new Int32Array (sharedBuffer); // ··· }); 

Zuerst extrahieren wir den Puffer des gemeinsam genutzten Arrays, das an uns gesendet wurde, und verpacken ihn dann in ein typisiertes Array, damit wir ihn lokal verwenden können.

Eigenschaften und Methoden von SharedArrayBuffer.

SharedArrayBuffer.length - Die Länge des SharedArrayBuffer-Konstruktors, dessen Wert 1 ist.
SharedArrayBuffer.prototype - Ermöglicht zusätzliche Eigenschaften für alle SharedArrayBuffer-Objekte.

SharedArrayBuffer-Instanzen
Die Eigenschaften

SharedArrayBuffer.prototype.constructor - Definiert eine Funktion, die einen Prototyp eines Objekts erstellt. Der Anfangswert ist der standardmäßige integrierte SharedArrayBuffer-Konstruktor.

SharedArrayBuffer.prototype.byteLength (schreibgeschützt) - Die Größe des Arrays in Byte. Dies wird festgelegt, wenn das Array erstellt wird und kann nicht geändert werden.

Methoden

SharedArrayBuffer.prototype.slice () - Gibt einen neuen SharedArrayBuffer zurück, dessen Inhalt eine Kopie der Bytes dieses SharedArrayBuffer vom Anfang bis zum Ende des Exklusivs ist. Wenn der Anfang oder das Ende negativ ist, bezieht sich dies auf den Index vom Ende des Arrays, nicht vom Anfang. Diese Methode hat den gleichen Algorithmus wie Array.prototype.slice ().

 //  SharedArrayBuffer     const buffer = new SharedArrayBuffer(16); const int32View = new Int32Array(buffer); //  view // produces Int32Array [0, 0, 0, 0] int32View[1] = 42; const sliced = new Int32Array(buffer.slice(4,12)); console.log(sliced); // Int32Array [42, 0] 

 sab.slice([begin, end]) : Object 

begin - Der Nullindex, bei dem die Extraktion beginnt. Sie können einen negativen Index verwenden, der den Versatz vom Ende der Sequenz angibt. slice (-2) extrahiert die letzten beiden Elemente einer Sequenz. Wenn der Anfang nicht definiert ist, beginnt das Slice bei Index 0.
Ende - Der auf Null basierende Index, auf den extrahiert werden soll.

Zum Beispiel ruft slice (1,4) das zweite Element über das vierte Element ab (Elemente mit den Indizes 1, 2 und 3). Sie können einen negativen Index verwenden, der den Versatz vom Ende der Sequenz angibt. slice (2, -1) ruft das dritte Element über das vorletzte Element in der Sequenz ab. Wenn end weggelassen wird, ruft slice das Ende der Sequenz ab (sab.byteLength).

Beispiele

 var sab = new SharedArrayBuffer(1024); sab.slice(); // SharedArrayBuffer { byteLength: 1024 } sab.slice(2); // SharedArrayBuffer { byteLength: 1022 } sab.slice(-2); // SharedArrayBuffer { byteLength: 2 } sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 } 

Siehe SharedArrayBuffer in der offiziellen Spezifikation sowie in den MDN-Webdokumenten .

8. Atomics

Das Atomics-Objekt stellt atomare Operationen als statische Methoden zur Verfügung. Wird mit einem SharedArrayBuffer-Objekt verwendet.

Atomic-Operationen werden im Atomics-Modul installiert. Im Gegensatz zu anderen globalen Objekten ist Atomics kein Konstruktor. Es kann nicht mit dem neuen Operator oder zum Aufrufen eines Atomics-Objekts als Funktion verwendet werden. Alle Atomics-Eigenschaften und -Methoden sind statisch (z. B. ein Math-Objekt).

Wenn der Speicher gemeinsam genutzt wird, können mehrere Threads dieselben Daten lesen und in den Speicher schreiben. Atomare Operationen garantieren, dass die erwarteten Werte geschrieben und gelesen und die Operationen abgeschlossen werden, bevor die nächste Operation ihre Arbeit aufnimmt, und dass sie nicht unterbrochen werden.

Die Eigenschaften

Atomics [Symbol.toStringTag] - Der Wert dieser Eigenschaft ist Atomics.

Methoden

Atomare Operationen

• Atomics.add () - Fügt den angezeigten Wert an der angegebenen Position im Array zum aktuellen Wert hinzu. Gibt den vorherigen Wert an dieser Position zurück.
• Atomics.and () - Berechnet ein bitweises AND an der angegebenen Array-Position. Gibt den vorherigen Wert an dieser Position zurück.
• Atomics.compareExchange () - Speichert den angezeigten Wert an der angegebenen Position des Arrays, sofern er dem angezeigten Wert entspricht. Gibt den vorherigen Wert zurück.
• Atomics.exchange() — . .
• Atomics.load() — .
• Atomics.or() — OR . .
• Atomics.store() — . .
• Atomics.sub() — . .
• Atomics.xor() — XOR . .

Atomics.add() . , , .

 Atomics.add(typedArray, index, value) : mixed 

• typedArray — . Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array Uint32Array.
• index — typedArray value.
• value — .
• return — (typedArray[index]).

• TypeError, typedArray .
• TypeError, typedArray .
• RangeError, index typedArray.

 var sab = new SharedArrayBuffer(1024); var ta = new Uint8Array(sab); Atomics.add(ta, 0, 12); //  0,   Atomics.load(ta, 0); // 12 

Atomics.add() , MDN Web Docs .

Wait notify

wait() wake() futexes («fast user-space mutex» — mutex ) Linux , true, .

Atomics.wait()
, -. «ok», «not-equal» «timed-out». , ( wait() ).

• Atomics.wait() — , -. «ok», «not-equal» «timed-out». , ( wait() ).
• Atomics.wake() — , . , .
• Atomics.isLockFree(size) — , . true, ( ). .

workers. , .

, , :

 while (sharedArray [0] === 123); 

sharedArray [0] ( sharedArray — , - ). :

 const tmp = sharedArray [0]; while (tmp === 123); 

, .

— :

 // main.js sharedArray [1] = 11; sharedArray [2] = 22; 

, . , , :

 // worker.js while (sharedArray [2]! == 22); console.log (sharedArray [1]); // 0  11 

workers, .

Atomics, .

: .

Atomics workers. , :

 Atomics.load (TypedArray <T>, index) : T Atomics.store (TypedArray <T>, index, value: T) : T 

, , Atomics (, ) , . , , Atomics.

, , Atomics ( sharedArray):

 // main.js console.log ('notified...'); Atomics.store (sharedArray, 0, 123); // worker.js while (Atomics.load (sharedArray, 0)! == 123); console.log ('notified'); 

: .

while , Atomics , : Atomics.wait (Int32Array, index, value, timeout) Atomics.wake (Int32Array, index, count).

: atomic operations
Atomics , . Zum Beispiel:

 Atomics.add (TypedArray <T>, index, value) : T 

, : index += value;

c .

— (): — , .

«Tear-Free Reads» , , :

• , Typed Arrays ( DataViews).
• : sharedArray.byteOffset% sharedArray.BYTES_PER_ELEMENT === 0
• .

, , :

• DateViews;
• ;
• ;

, Atomics .

Shared Array Buffers

Shared Array Buffers JavaScript « ». JavaScript « »: , . , , , .

Shared Array Buffers (RTC): , , . , RTC: Shared Array Buffers, .

, RTC. await.

Shared Array Buffers emscripten pthreads asm.js. emscripten:

[En] [Shared Array Buffers allow] Emscripten applications to share the main memory heap between web workers. This along with primitives for low level atomics and futex support enables Emscripten to implement support for the Pthreads (POSIX threads) API.

[Ru] [Shared Array Buffers ] Emscripten -. futex Emscripten API Pthreads ( POSIX).

C C ++ asm.js.

, WebAssembly. , web workers , , WebAssembly . , WebAssembly.

,

( 32 ). , — . , , :

• TextEncoder TextDecoder: Uint8Array, .
• stringview.js: , . .
• FlatJS: JavaScript (, ) (ArrayBuffer SharedArrayBuffer). JavaScript + FlatJS JavaScript. JavaScript (TypeScript . .) .
• TurboScript: JavaScript- . asm.js WebAssembly.

, , — — . , .

, Shared Array?

. ( " A Taste of JavaScript's New Parallel Primitives ”», , web workers. 4 web workers , , , , 6,9 (1 web worker) 25,4 (4 web workers). web workers , .

, , .

Shared Array Buffers :

• Shared memory – a brief tutorial by Lars T. Hansen
• A Taste of JavaScript's New Parallel Primitives by Lars T. Hansen
• SharedArrayBuffer and Atomics Stage 2.95 to Stage 3 (PDF), slides by Shu-yu Guo and Lars T. Hansen (2016-11-30) [c, ES]
• The Basics of Web Workers by Eric Bidelman [ web workers].

JavaScript, :

• “ The Path to Parallel JavaScript ” by Dave Herman [ , JavaScript PJS]
• “ Write massively-parallel GPU code for the browser with WebGL ” by Steve Sanderson [ , , WebGL GPU].
• “ Concurrency is not parallelism ” by Rob Pike [Rob Pike «concurrency» «parallelism» ].
• " Using Web Workers " from MDN [ MDN, web workers].
• " Shared memory and atomics " by Axel Rauschmayer [ js Shared Array Buffers Atomics]

Atomics Object , MDN Web Docs .

9. Async functions

Async function AsyncFunction constructor

AsyncFunction async function. JavaScript AsyncFunction.

, AsyncFunction . , .

 Object.getPrototypeOf(async function(){}).constructor 

 new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody) 

arg1, arg2,… argN — , . , JavaScript , ; , «x», «theValue», «a,b».

functionBody — , JavaScript.

async function, AsyncFunction constructor , . , async function expression , .

, , , .

AsyncFunction constructor ( new) , .

async functions AsyncFunction constructor, ; . , , AsyncFunction constructor. eval async function.

async function AsyncFunction constructor

 function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); }, 2000); }); } var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);'); a(10, 20).then(v => { console.log(v); //  30  4  }); 

async function

async function , AsyncFunction. async-, async function.

 async function name([param[, param[, ... param]]]) { // body } 

name — .
param — , .
statements — , .

async Promise. , Promise , . async , Promise (throws) .

async await, async Promise, async .

await . SyntaxError.

async/await promises Promises. Promises callback-, async/await promises.

Beispiel

 function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); }, 2000); }); } async function add1(x) { const a = await resolveAfter2Seconds(20); const b = await resolveAfter2Seconds(30); return x + a + b; } add1(10).then(v => { console.log(v); //  60  4  }); async function add2(x) { const a = resolveAfter2Seconds(20); const b = resolveAfter2Seconds(30); return x + await a + await b; } add2(10).then(v => { console.log(v); //  60  2  }); 

?

JS- .js , . , . .

, JS — , . , , , , . , . (You-Dont-Know-JS/async & performance, Jake Archibald).

 // ajax(..)  Ajax-,   var data = ajax( "http://some.url.1" ); console.log( data );// !  `data`     Ajax- 

? console.log() , .

«» , :

 ajax( "http://some.url.1", function myCallbackFunction(data){ console.log( data ); // ,   ! } ); 

.

3 getUser, getPosts, getComments.

 const { getUser, getPosts, getComments } = require('./db'); getUser(1, (error, user) => { if(error) return console.error(error); getPosts(user.id, (error, posts) => { if(error) return console.error(error); getComments(posts[0].id, (error, comment) => { if(error) return console.error(error); console.log(comments); }); }); }); 

, . Callback Hell . , () , .

Promise ( , . . .

 getUser(1) .then(user => getPosts(user,id)) .then(posts => getComments(posts[0].id)) .then(comments => console.log(comments)) .catch(error => console.error(error)); 

Promise Generators ( . , Promise, — , . try...catch. — Promise , . , co . .

 co(function* () { try { let user = yield getUser(1); let posts = yield getPosts(user.id); let comments = yield getComments(posts[0].id); console.log(comments); } catch (error) { console.log(error); } }); function co(generator) { const iterator = generator(); return new Promise((resolve, reject) => { function run(prev) { const { value, done } = iterator.next(prev); if (done) resolve(value); else if (value instanceof Promise) value.then(run, reject); else run(value); } run(); }); } 

.
(Calback functions) — , .

(Promises) — , .

(Generators) — , , .

(Promises) (Generators), , .

, , :

 function getUser(id) { return { id: 1 }; } let user = getUser(1); console.log(user); // { id: 1 } 

( async), Promise id.

 async function getUser(id) { return { id: 1 }; } let user = getUser(1); console.log(user); // Promise { {id: 1} } 

, , Promis ( Promis ). , .

then().

 async function getUser(id) { return { id: 1 }; } getUser(1) .then(user => console.log(user)); // { id: 1 } 

await .

( HTTP .

 fetch(`https://jsonplaceholder.typicode.com/users/1`) .then(data => data.json()) .then(data => console.log(data)); 

Promise.
, .

 async function sendRequest() { let response= await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } async function main() { var a = await sendRequest(); console.log(a); } main(); 

async . main(). then(), .

 async function sendRequest() { let response= await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } sendRequest() .then((data) => console.log(data)); 

fetch(). await, : fetch() response. : fetch() .

Promise async function

 //  Promise function sendRequest() { return fetch(`https://jsonplaceholder.typicode.com/users/1`) .then(data => data.json()); } //  async function async function sendRequest() { let response = await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } 

await , .

try...catch.

 async function sendRequest() { let response = await fetch(`https://jsonplaceholder.typicode.com/users/1`); try { throw new Error("Unexpected error"); return response.json(); } catch(error) { console.log(error); // Error: Unexpected error at sendRequest } } 

…

  //    async; await; async; await; async; await; async; await; In the System(); The function.sleep()s tonight~ 

Async Function Definitions , MDN Web Docs .