Übersicht über die neuesten ES8-Funktionen

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