Heim  >  Artikel  >  Web-Frontend  >  Übersicht über die neuesten ES8-Funktionen

Übersicht über die neuesten ES8-Funktionen

巴扎黑
巴扎黑Original
2017-07-21 09:59:313681Durchsuche

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])

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'

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)

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']

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']]

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)

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
// }

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,);

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

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!

Stellungnahme:
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
Vorheriger Artikel:js-Ereignis – MausscrollenNächster Artikel:js-Ereignis – Mausscrollen