Heim > Web-Frontend > js-Tutorial > Hauptteil

Übersicht über die neuesten ES8-Funktionen

巴扎黑
Freigeben: 2017-07-21 09:59:31
Original
3694 Leute haben es durchsucht

Die aus ES8 zusammengestellte Funktionsübersicht von ECMAScript 2017 (ES8) wurde veröffentlicht. Hier sind die wichtigsten neuen Funktionen, zusammengefasst in der Artikelreihe „Moderne JavaScript-Entwicklung: Syntax-Grundlagen und praktische Fertigkeiten“ des Autors Beenden Sie die wöchentliche Checklistenreihe, um Informationen aus erster Hand zu erhalten.

ECMAScript 2017 oder ES8 wurde Ende Juni 2017 offiziell von TC39 veröffentlicht. Sie können die Vollversion hier durchsuchen; zu den repräsentativen Funktionen von ES8 gehören String-Padding und Objektwert Traversierung, Erfassung von Objektattributdeskriptoren, Funktionsparameterliste und nachgestellte Kommas in Aufrufen, asynchrone Funktionen, gemeinsam genutzter Speicher und atomare Operationen usw.

String-Füllung

ES8 verfügt über integrierte String-Füllfunktionen, nämlich padStart und padEnd. Diese Funktion kann sicherstellen, dass die Zeichenfolge eine feste Größe erreicht, indem sie den Kopf oder das Ende der Zeichenfolge füllt. Länge; Entwickler können die aufgefüllte Zeichenfolge angeben oder Standardleerzeichen verwenden. Die Funktion wird wie folgt deklariert:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])
Nach dem Login kopieren

Wie oben gezeigt, ist der erste Parameter der Funktion die Ziellänge. Das ist die Länge der endgültig generierten Zeichenfolge. Der zweite Parameter ist die angegebene Füllzeichenfolge:

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'
Nach dem Login kopieren

Objektwertdurchquerung

Object.values ​​​​Funktion wird Gibt das angegebene Array aufzählbarer Attributwerte des Objekts zurück. Die Reihenfolge der Werte im Array stimmt mit der For-In-Schleife überein. Die Funktionsdeklaration lautet:

Object.values(obj)
Nach dem Login kopieren

Der erste Parameter obj ist derjenige, der durchlaufen werden muss. Das Zielobjekt, das ein Objekt oder ein Array sein kann (ein Array kann als ein Objekt betrachtet werden, dessen Schlüssel Indizes sind):

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']
Nach dem Login kopieren

und die Object.entries-Methode Dann werden die aufzählbaren Eigenschaften und Werte eines Objekts in Form eines zweidimensionalen Arrays zurückgegeben. Die Reihenfolge im Array ist konsistent mit Object.values. Die Deklaration und Verwendung dieser Funktion sind:

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
Nach dem Login kopieren

Eigenschaftsdeskriptoren des Objekts abrufen

getOwnPropertyDescriptors-Funktion gibt den Deskriptor einer angegebenen Eigenschaft des angegebenen Objekts zurück. Diese Eigenschaft muss vom Objekt selbst definiert werden und darf nicht von der Prototypenkette geerbt werden. Die Funktionsdeklaration lautet:

Object.getOwnPropertyDescriptor(obj, prop)
Nach dem Login kopieren

obj ist das Quellobjekt und prop ist der Eigenschaftsname, der angezeigt werden muss; die im Ergebnis enthaltenen Schlüssel können konfigurierbar, aufzählbar, beschreibbar, get, set und value sein.

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }
Nach dem Login kopieren

Nachgestellte Kommas in Funktionsparameterlisten und -aufrufen

Mit dieser Funktion können wir beim Definieren oder Aufrufen von Funktionen Nr. nachgestellte Kommas hinzufügen Fehler gemeldet:

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);
Nach dem Login kopieren

Asynchrone Funktion

ES8 ermöglicht die Verwendung der async/await-Syntax zum Definieren und Ausführen asynchroner Funktionen, Schlüsselwort async Gibt ein AsyncFunction-Objekt zurück. Obwohl die Implementierungsprinzipien von asynchronen Funktionen und Iteratoren ähnlich sind, werden sie nicht in Iteratorfunktionen konvertiert:

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

console.log(1);
sayHello();
console.log(2);

// 调用结果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds
Nach dem Login kopieren

Gemeinsamer Speicher und atomare Operationen

Gemeinsamer Speicher ermöglicht mehreren Threads das gleichzeitige Lesen und Schreiben von Daten, während atomare Operationen die Parallelitätskontrolle ermöglichen, um die sequentielle Ausführung mehrerer konkurrierender Threads sicherzustellen. In diesem Abschnitt werden der neue Konstruktor SharedArrayBuffer und das Namespace-Objekt Atomics vorgestellt, das statische Methoden enthält. Das Atomic-Objekt ähnelt Math. Wir können seine Instanz nicht direkt erstellen, sondern können nur die von ihm bereitgestellten statischen Methoden verwenden:

  • add /sub – einen Wert an einer bestimmten Position hinzufügen oder subtrahieren

  • und/oder /xor – Bitoperationen ausführen

  • laden – Wert abrufen

Das obige ist der detaillierte Inhalt vonÜbersicht über die neuesten ES8-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage