Neue Funktionen von JavaScript ES8

Fügen Sie hier eine Bildbeschreibung ein


Einführung

JavaScript ES8 (auch bekannt als ES2017) führt mehrere neue Sprachfunktionen ein. Hier sind einige der wichtigsten neuen Funktionen von ES8.

Asynchrone Funktion (Async/Await):

Die Schlüsselwörter „async“ und „await“ werden eingeführt, um das Schreiben asynchroner Vorgänge zu vereinfachen und den Code leichter lesbar und verständlich zu machen. Die asynchrone Funktion gibt ein Promise-Objekt zurück, und das Schlüsselwort „await“ kann innerhalb der asynchronen Funktion verwendet werden, um die Ausführung anzuhalten und auf die Auflösung des Promise-Objekts zu warten.

async function asyncFunction() {
    
    
  try {
    
    
    const result = await asyncOperation();
    console.log(result);
  } catch (error) {
    
    
    console.error(error);
  }
}

Dies bietet eine sauberere Syntax für die Verarbeitung asynchroner Vorgänge. Das Schlüsselwort async wird verwendet, um eine Funktion so zu markieren, dass sie ein Promise-Objekt zurückgibt. Innerhalb einer asynchronen Funktion können wir den Wait-Ausdruck verwenden, um die Ausführung der Funktion anzuhalten, bis ein Promise aufgelöst oder abgelehnt wird.

function delay(ms) {
    
    
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
    
    
  console.log('Start');

  await delay(2000);
  console.log('Data fetched');

  await delay(1000);
  console.log('Processing complete');
}

fetchData(); // 输出: Start -> (等待2秒) -> Data fetched -> (等待1秒) -> Processing complete

Object.getOwnPropertyDescriptors()-Methode:

Gibt Deskriptoren für alle eigenen Eigenschaften des angegebenen Objekts zurück, einschließlich aufzählbarer und nicht aufzählbarer Eigenschaften.

const obj = {
    
    
  prop1: 'value1',
  prop2: 'value2'
};

const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors.prop1);
// { value: 'value1', writable: true, enumerable: true, configurable: true }

console.log(descriptors.prop2);
// { value: 'value2', writable: true, enumerable: true, configurable: true }

Diese Methode gibt Deskriptoren aller Eigenschaften eines Objekts zurück (einschließlich aufzählbarer und nicht aufzählbarer Eigenschaften). Es kann verwendet werden, um eine vollständige Beschreibung einer Reihe von Eigenschaften zu erhalten, einschließlich des Werts, der Beschreibbarkeit, der Konfigurierbarkeit usw. der Eigenschaft.

const obj = {
    
    
  prop1: 42,
  prop2: 'hello',
};

const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop1.value); // 输出: 42
console.log(descriptors.prop2.writable); // 输出: true

Methode zum Auffüllen von Zeichenfolgen:

Es wurden Methoden zum Auffüllen von Zeichenfolgen eingeführt, mit denen bestimmte Zeichen vor oder nach einer Zeichenfolge auf eine bestimmte Länge aufgefüllt werden können.

const str = 'Hello';

console.log(str.padStart(10, '-'));
// "-----Hello"

console.log(str.padEnd(10, '*'));
// "Hello*****"

Methoden zum Auffüllen von Zeichenfolgen sind eine neue Funktion, die in JavaScript ES8 eingeführt wurde. Es ermöglicht uns, bestimmte Zeichen am Anfang oder Ende einer Zeichenfolge auf eine bestimmte Länge aufzufüllen. Dies ist nützlich, um die Ausgabe zu formatieren und Text auszurichten.

In dem von Ihnen bereitgestellten Beispielcode haben wir zwei Methoden zum Auffüllen von Zeichenfolgen verwendet: padStart() und padEnd(). Lassen Sie mich erklären, was sie tun:

Die Methode padStart(targetLength, padString) fügt Füllzeichen vor der ursprünglichen Zeichenfolge ein, bis die Zeichenfolge die angegebene Länge targetLength erreicht. Wenn padString nicht angegeben wird, werden standardmäßig Leerzeichen verwendet. Wenn die ursprüngliche Zeichenfolge bereits länger als die Ziellänge ist, wird die ursprüngliche Zeichenfolge selbst zurückgegeben. In Ihrem Beispiel gibt str.padStart(10, '-') „-----Hello“ zurück, aufgefüllt mit 5 Bindestrichen, sodass die Gesamtlänge der Zeichenfolge 10 beträgt.

Die Methode padEnd(targetLength, padString) ähnelt padStart(), außer dass sie Füllzeichen nach der ursprünglichen Zeichenfolge hinzufügt, bis die Zeichenfolge die angegebene Länge targetLength erreicht. Wenn padString nicht angegeben wird, werden standardmäßig Leerzeichen verwendet. Wenn die ursprüngliche Zeichenfolge bereits länger als die Ziellänge ist, wird ebenfalls die ursprüngliche Zeichenfolge selbst zurückgegeben. In Ihrem Beispiel gibt str.padEnd(10, '*') „Hello*****“ zurück, aufgefüllt mit 5 Sternchen, sodass die Gesamtlänge der Zeichenfolge 10 beträgt.

Diese Methoden zum Auffüllen von Zeichenfolgen sind nützlich für die Ausrichtung von Zeichenfolgen, die Generierung von Text mit fester Länge usw. Sie bieten eine einfache, intuitive Möglichkeit zum Bearbeiten von Zeichenfolgen und machen das Schreiben von Code bequemer und lesbarer.

Bitte beachten Sie, dass es sich bei der oben genannten Methode um eine neue Funktion handelt, die in ES8 eingeführt wurde und bei Verwendung in älteren JavaScript-Versionen zu Kompatibilitätsproblemen führen kann.

Shared Memory und Atomics:

SharedArrayBuffer- und Atomics-Objekte werden für die gemeinsame Nutzung des Speichers zwischen mehreren Agenten (z. B. Web Workern) eingeführt, und es werden atomare Operationen bereitgestellt, um die Sicherheit des gemeinsam genutzten Speichers zu gewährleisten und Race Conditions zu vermeiden.

// 创建一个共享内存
const buffer = new SharedArrayBuffer(8);

// 创建一个32位有符号整数视图
const view = new Int32Array(buffer);

// 在不同的Agent中读写共享内存
view[0] = 42;
console.log(view[0]); // 输出 42

Methoden zum Füllen von Zeichenfolgen (padStart() und padEnd()):

Diese beiden Methoden werden verwendet, um bestimmte Zeichen am Anfang oder Ende einer Zeichenfolge auf eine angegebene Länge aufzufüllen.

const str = 'Hello';
const paddedStr = str.padEnd(8, ' World');
console.log(paddedStr); // 输出: 'Hello World'

Zusammenfassen

Dies sind einige der Hauptfunktionen von JavaScript ES8. ES8 führt außerdem einige weitere kleine Syntax- und API-Verbesserungen ein, die für ein besseres Entwicklungserlebnis und eine bessere Effizienz sorgen.

おすすめ

転載: blog.csdn.net/weixin_48998573/article/details/131419739