5 neue Funktionen von ES10

In diesem Jahr wird ECMAScript 2019 (kurz ES2019) veröffentlicht. Zu den neuen Funktionen gehören Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), Beschreibungsattribut von Symbolobjekten, optionale Catch-Bindung usw.

1. Object.fromEntries()

Konvertieren Sie in JavaScript Daten von einem Format in ein anderes. Sehr häufig. Um die Konvertierung von Objekten in Arrays zu erleichtern, hat ES2017 die Methode Object.entrie() eingeführt. Diese Methode verwendet ein Objekt als Parameter und gibt ein Array der eigenen aufzählbaren Eigenschaftspaare mit Zeichenfolgenschlüssel des Objekts in der Form [Schlüssel, Wert] zurück. Zum Beispiel:

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

Aber was ist, wenn wir das Gegenteil tun und die Liste der Schlüssel-Wert-Paare in ein Objekt umwandeln möchten? Einige Programmiersprachen, wie zum Beispiel Python, bieten zu diesem Zweck die Funktion dict() an. Es gibt auch die Funktion _.fromPairs in Underscore.js und Lodash.

ES2019 hat die Methode Object.fromEntries() eingeführt, um JavaScript eine ähnliche Funktionalität zu verleihen. Mit dieser statischen Methode können Sie eine Liste von Schlüssel-Wert-Paaren einfach in ein Objekt konvertieren:

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

Wie Sie Wie Sie sehen, macht Object.fromEntries() genau das Gegenteil von Object.entries(). Während es früher möglich war, die gleiche Funktionalität wie Object.fromEntries() zu implementieren, war die Art und Weise, wie sie implementiert wurde, etwas kompliziert:

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const Array.from(myArray).reduce((acc, [key, val]) 
=> Object.assign(acc, {[key]: val}), {})

console.log(obj);    // => {one: 1, two: 2, three: 3}

Denken Sie daran, dass das an Object.fromEntries() übergebene Argument jedes Objekt sein kann, das implementiert das iterierbare Protokoll, solange es ein Array-ähnliches Objekt mit zwei Elementen zurückgibt.

Im folgenden Code nimmt Object.fromEntries() beispielsweise ein Map-Objekt als Parameter und erstellt ein neues Objekt, dessen Schlüssel und entsprechende Werte durch die Paare in der Map gegeben sind:

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

Die Object.fromEntries()-Methode ist auch sehr nützlich zum Konvertieren von Objekten. Beachten Sie den folgenden Code:

const obj = {a: 4, b: 9, c: 16};

// 将对象转换为数组
const arr = Object.entries(obj);

// 计算数字的平方根
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// 将数组转换回对象
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

Der obige Code wandelt den Wert im Objekt in seine Quadratwurzel um. Dazu wird zunächst das Objekt in ein Array konvertiert und anschließend mit der Methode „map()“ die Quadratwurzel der Werte im Array ermittelt. Das Ergebnis ist ein Array, das wieder in das Objekt konvertiert werden kann.

Ein weiterer Fall der Verwendung von Object.fromEntries() ist die Verarbeitung der Abfragezeichenfolge der URL, wie in diesem Beispiel gezeigt

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

In diesem Code wird die Abfragezeichenfolge an URLSearchParams( ) Konstrukteur. Der Rückgabewert (d. h. die Objektinstanz URLSearchParams) wird dann an die Methode Object.fromEntries() übergeben und das Ergebnis ist ein Objekt, das jeden Parameter als Eigenschaft enthält. Bei der

Object.fromEntries()-Methode handelt es sich derzeit um einen Vorschlag der Stufe 4, was bedeutet, dass sie zur Aufnahme in den ES2019-Standard bereit ist.

2. trimStart() und trimEnd()

Die Methoden trimStart() und trimEnd() werden genauso implementiert wie trimLeft() und trimRight(). Diese Methoden befinden sich derzeit in Phase 4 und werden der Spezifikation hinzugefügt, um sie an padStart() und padEnd() anzupassen. Schauen Sie sich einige Beispiele an:

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// 相同结果
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"

Für Webkompatibilität trimLeft() und trimRight() bleiben als Aliase für trimStart() und trimEnd() bestehen.

3. flat() und flatMap()

Die flat()-Methode kann ein mehrdimensionales Array in ein eindimensionales Array

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

Früher verwenden wir häufig Reduce() oder Concat(), um mehrdimensionale Arrays zu reduzieren:

const arr = ['a', 'b', ['c', 'd']];
const flattend = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

Beachten Sie, dass Nullwerte im bereitgestellten Array verworfen werden:

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

flat() Akzeptiert außerdem einen optionalen Parameter, der die Anzahl der Ebenen angibt, auf denen das verschachtelte Array reduziert werden soll. Wenn keine Argumente angegeben werden, wird der Standardwert 1 verwendet:

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]

flatMap()-Methode kombiniert map() und flat() in einer einzigen Methode. Es erstellt zunächst ein neues Array unter Verwendung des Rückgabewerts der bereitgestellten Funktion und verkettet dann alle Subarray-Elemente dieses Arrays. Hier ist ein Beispiel:

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

Das Array wird auf eine Tiefenstufe von 1 reduziert. Wenn Sie Elemente aus dem Ergebnis entfernen möchten, geben Sie einfach ein leeres Array zurück:

const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];

// do not include items bigger than 9
arr.flatMap(value => {
  if (value >= 10) {
    return [];
  } else {
    return Math.round(value);
  }
});  

// returns:
// => [7, 8, 9]

mit Ausnahme des aktuellen Element wird verarbeitet. Darüber hinaus erhält die Callback-Funktion den Index des Elements und eine Referenz auf das Array selbst. Die Methoden flat() und flatMap() befinden sich derzeit in Stufe 4.

4. Beschreibungsattribut des Symbolobjekts

Beim Erstellen eines Symbols können Sie ihm zu Debugging-Zwecken eine Beschreibung (Beschreibung) hinzufügen. Manchmal ist es nützlich, direkt auf die Beschreibung im Code zugreifen zu können.

ES2019 fügt dem Symbol-Objekt eine schreibgeschützte Attributbeschreibung hinzu, die eine Zeichenfolge zurückgibt, die die Symbolbeschreibung enthält.

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar

5. Optionaler Catch

Der Catch in der try-catch-Anweisung ist manchmal nutzlos:

try {
  // 使用浏览器可能尚未实现的功能
} catch (unused) {
  // 这里回调函数中已经帮我们处理好的错误
}

Dieser Code Die Informationen im Catch-Rückruf ist nicht sinnvoll. Aber es ist so geschrieben, um SyntaxError-Fehler zu vermeiden. ES2019 kann die Klammern um „catch“ weglassen:

try {
  // ...
} catch {
  // ....
}

Außerdem: Die String.prototype.matchAll

matchAll()-Methode von ES2020 ist ein ES2020-Phase-4-Vorschlag, der alle Übereinstimmungen für reguläre Ausdrücke (Iterator-Objekt) zurückgibt einschließlich Erfassungsgruppen).

Um mit der match()-Methode konsistent zu sein, wählte TC39 „matchAll“ anstelle anderer vorgeschlagener Namen wie „matches“ oder Rubys „scan“. Betrachten Sie ein einfaches Beispiel:

const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);

for (const match of matches) {
  console.log(match);
}

// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

Die einfangende Gruppe in diesem regulären Ausdruck entspricht den Zeichen „Dr“, gefolgt von einem Punkt und einem Leerzeichen. w+ stimmt ein oder mehrere Mal mit einem beliebigen Wortzeichen überein. Und das g-Flag weist die Engine an, in der gesamten Zeichenfolge nach Mustern zu suchen.

Zuvor musste man die Methode exec() in einer Schleife verwenden, um das gleiche Ergebnis zu erzielen, was nicht sehr effizient war:

const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;

while ((matches = re.exec(str)) !== null) {
  console.log(matches);
}

// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

重要的是要注意尽管match() 方法可以与全局标志g一起使用来访问所有匹配，但它不提供匹配的捕获组或索引位置。 比较以下代码：

const re = /page (\d+)/g;
const str = 'page 2 and page 10';

console.log(str.match(re));    
// => ["page 2", "page 10"]

console.log(...str.matchAll(re)); 
// => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] 
// => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]

总结

在这篇文章中，我们仔细研究了 ES2019 中引入的几个关键特性，包括Object.fromEntries()，trimStart(), trimEnd(), flat(), flatMap()，symbol 对象的description 属性以及可选的catch 。

更多相关知识请关注JavaScript视频教程栏目

Das obige ist der detaillierte Inhalt von5 neue Funktionen von ES10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!