JavaScript wurde auf es aktualisiert

JavaScript wurde auf es13 aktualisiert. Am 22. Juni 2022 genehmigte die 123. Ecma-Konferenz die Sprachspezifikation ECMAScript2022, was bedeutet, dass sie nun offiziell ein JavaScript-Standard ist und ECMAScript2022 die 13. Iteration ist und daher auch ECMAScript13 oder kurz ES13 genannt werden kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 13, Dell G3-Computer.

Die neue ES13-Spezifikation ist endlich veröffentlicht.

JavaScript ist keine Open-Source-Sprache, sondern eine Sprache, die in Übereinstimmung mit der ECMAScript-Standardspezifikation geschrieben werden muss. Das TC39-Komitee ist für die Diskussion und Genehmigung der Veröffentlichung neuer Funktionen verantwortlich.

„TC39 von ECMA International ist eine Gruppe von JavaScript-Entwicklern, Implementierern, Akademikern usw., die mit der Community zusammenarbeiten, um die Definition von JavaScript zu pflegen und weiterzuentwickeln.“ – TC39.es

Ihr Veröffentlichungsprozess besteht seit 2015 aus fünf Phasen Seitdem erscheinen jährliche Veröffentlichungen, die normalerweise im Frühjahr stattfinden.

Am 22. Juni 2022 genehmigte der 123. Ecma-Kongress die Sprachspezifikation ECMAScript 2022, was bedeutet, dass sie nun offiziell ein Standard ist.

Es gibt zwei Möglichkeiten, auf jede ECMAScript-Version zu verweisen:

• Nach Jahr: Diese neue Version wird ES2022 sein.

• Anhand der Iterationsnummer: Diese neue Version wird die 13. Iteration sein und kann daher ES13 genannt werden.

Was ist dieses Mal also neu in dieser Version? Auf welche Features können wir uns freuen?

01, Vergleichsindex für reguläre Ausdrücke

Derzeit wird bei Verwendung der JavaScript-Regex-API in JavaScript nur der Startindex der Übereinstimmung zurückgegeben. Für einige spezielle fortgeschrittene Szenarien reicht dies jedoch nicht aus.

Im Rahmen dieser Spezifikationen wurde eine spezielle Flagge d hinzugefügt. Auf diese Weise gibt die API für reguläre Ausdrücke ein zweidimensionales Array als Schlüssel des Namensindex zurück. Es enthält den Start- und Endindex jedes Spiels. Wenn benannte Gruppen in der Regex erfasst werden, werden deren Start-/Endindizes im indices.groups-Objekt zurückgegeben, wobei der Name der benannten Gruppe der Schlüssel ist.

// ✅ a regex with a 'B' named group capture
const expr = /a+(?<B>b+)+c/d;


const result = expr.exec("aaabbbc")


// ✅ shows start-end matches + named group match
console.log(result.indices);
// prints [Array(2), Array(2), groups: {…}]


// ✅ showing the named &#39;B&#39; group match
console.log(result.indices.groups[&#39;B&#39;])
// prints [3, 6]

Sehen Sie sich den ursprünglichen Vorschlag an, https://github.com/tc39/proposal-regexp-match-indices

02, Top-Level-Await

Vor diesem Vorschlag war Top-Level-Await nicht verfügbar akzeptiert. Es gibt Problemumgehungen, um dieses Verhalten zu simulieren, aber sie haben Nachteile.

Die Wartefunktion auf oberster Ebene ermöglicht es uns, uns auf Module zu verlassen, um diese Versprechen zu verarbeiten. Dies ist eine intuitive Funktion.

Bitte beachten Sie jedoch, dass sich dadurch die Ausführungsreihenfolge von Modulen ändern kann. Wenn ein Modul von einem anderen Modul mit einem Warteaufruf der obersten Ebene abhängt, wird die Ausführung des Moduls ausgesetzt, bis das Versprechen abgeschlossen ist.

Sehen wir uns ein Beispiel an:

// users.js
export const users = await fetch('/users/lists');


// usage.js
import { users } from "./users.js";
// ✅ the module will wait for users to be fullfilled prior to executing any code
console.log(users);

Im obigen Beispiel wartet die Engine darauf, dass der Benutzer die Aktion abschließt, bevor sie den Code im Modul „uses.js“ ausführt.

Alles in allem ist dies eine nette und intuitive Funktion, die mit Vorsicht verwendet werden muss und die wir nicht missbrauchen sollten.

Sehen Sie sich hier den Originalvorschlag an. https://github.com/tc39/proposal-top-level-await

03, .at( )

Es gibt seit langem Anfragen für JavaScript, einen Python-ähnlichen Negativindex-Accessor für Arrays bereitzustellen. Anstatt array[array.length-1] auszuführen, führen Sie einfach array[-1] aus. Dies ist nicht möglich, da das Symbol [] auch für Objekte in JavaScript verwendet wird.

Der angenommene Vorschlag verfolgte einen praktischeren Ansatz. Array-Objekte verfügen nun über eine Methode zum Simulieren des oben genannten Verhaltens.

const array = [1,2,3,4,5,6]


// ✅ When used with positive index it is equal to [index]
array.at(0) // 1
array[0] // 1


// ✅ When used with negative index it mimicks the Python behaviour
array.at(-1) // 6
array.at(-2) // 5
array.at(-4) // 3

Sehen Sie sich den ursprünglichen Vorschlag an: https://github.com/tc39/proposal-relative-indexing-method

Wussten Sie übrigens, da wir über Arrays sprechen, wussten Sie, dass Sie Array-Positionen zerstören können?

const array = [1,2,3,4,5,6];


// ✅ Different ways of accessing the third position
const {3: third} = array; // third = 4
array.at(3) // 4
array[3] // 4

04, zugängliches Object.prototype.hasOwnProperty

Das Folgende ist nur eine gute Vereinfachung, es hat bereits hasOwnProperty. Es muss jedoch innerhalb der Suchinstanz aufgerufen werden, die wir durchführen möchten. Daher kommt es häufig vor, dass viele Entwickler am Ende Folgendes tun:

const x = { foo: "bar" };


// ✅ grabbing the hasOwnProperty function from prototype
const hasOwnProperty = Object.prototype.hasOwnProperty


// ✅ executing it with the x context
if (hasOwnProperty.call(x, "foo")) {
  ...
}

Mit diesen neuen Spezifikationen wurde dem Objektprototyp eine hasOwn-Methode hinzugefügt, und jetzt können wir einfach Folgendes tun:

const x = { foo: "bar" };


// ✅ using the new Object method
if (Object.hasOwn(x, "foo")) {
  ...
}

Sehen Sie sich den ursprünglichen Vorschlag an, https:// / github.com/tc39/proposal-accessible-object-hasownproperty

05、Fehlerursache

错误帮助我们识别应用程序的意外行为并做出反应，然而，理解深层嵌套错误的根本原因，正确处理它们可能会变得具有挑战性，在捕获和重新抛出它们时，我们会丢失堆栈跟踪信息。

没有关于如何处理的明确协议，考虑到任何错误处理，我们至少有 3 个选择：

async function fetchUserPreferences() {
  try { 
    const users = await fetch('//user/preferences')
      .catch(err => {
        // What is the best way to wrap the error?
        // 1. throw new Error('Failed to fetch preferences ' + err.message);
        // 2. const wrapErr = new Error('Failed to fetch preferences');
        //    wrapErr.cause = err;
        //    throw wrapErr;
        // 3. class CustomError extends Error {
        //      constructor(msg, cause) {
        //        super(msg);
        //        this.cause = cause;
        //      }
        //    }
        //    throw new CustomError('Failed to fetch preferences', err);
      })
    }
}


fetchUserPreferences();

作为这些新规范的一部分，我们可以构造一个新错误并保留获取的错误的引用。 我们只需将对象 {cause: err} 传递给 Errorconstructor。

这一切都变得更简单、标准且易于理解深度嵌套的错误， 让我们看一个例子：

async function fetcUserPreferences() {
  try { 
    const users = await fetch('//user/preferences')
      .catch(err => {
        throw new Error('Failed to fetch user preferences, {cause: err});
      })
    }
}


fetcUserPreferences();

了解有关该提案的更多信息，https://github.com/tc39/proposal-error-cause

06、Class Fields

在此版本之前，没有适当的方法来创建私有字段， 通过使用提升有一些方法可以解决它，但它不是一个适当的私有字段。 但现在很简单， 我们只需要将 # 字符添加到我们的变量声明中。

class Foo {
  #iteration = 0;


  increment() {
    this.#iteration++;
  }


  logIteration() {
    console.log(this.#iteration);
  }
}


const x = new Foo();


// ❌ Uncaught SyntaxError: Private field '#iteration' must be declared in an enclosing class
x.#iteration


// ✅ works
x.increment();


// ✅ works
x.logIteration();

拥有私有字段意味着我们拥有强大的封装边界， 无法从外部访问类变量，这表明 class 关键字不再只是糖语法。

我们还可以创建私有方法：

class Foo {
  #iteration = 0;


  #auditIncrement() {
    console.log('auditing');
  }


  increment() {
    this.#iteration++;
    this.#auditIncrement();
  }
}


const x = new Foo();


// ❌ Uncaught SyntaxError: Private field '#auditIncrement' must be declared in an enclosing class
x.#auditIncrement


// ✅ works
x.increment();

该功能与私有类的类静态块和人体工程学检查有关，我们将在接下来的内容中看到。

了解有关该提案的更多信息，https://github.com/tc39/proposal-class-fields

07、Class Static Block

作为新规范的一部分，我们现在可以在任何类中包含静态块，它们将只运行一次，并且是装饰或执行类静态端的某些字段初始化的好方法。

我们不限于使用一个块，我们可以拥有尽可能多的块。

// ✅ will output 'one two three'
class A {
  static {
      console.log('one');
  }
  static {
      console.log('two');
  }
  static {
      console.log('three');
  }
}

他们有一个不错的奖金，他们获得对私有字段的特权访问， 你可以用它们来做一些有趣的模式。

let getPrivateField;


class A {
  #privateField;
  constructor(x) {
    this.#privateField = x;
  }
  static {
    // ✅ it can access any private field
    getPrivateField = (a) => a.#privateField;
  }
}


const a = new A('foo');
// ✅ Works, foo is printed
console.log(getPrivateField(a));

如果我们尝试从实例对象的外部范围访问该私有变量，我们将得到无法从类未声明它的对象中读取私有成员#privateField。

了解有关该提案的更多信息，https://github.com/tc39/proposal-class-static-block

08、Private Fields

新的私有字段是一个很棒的功能，但是，在某些静态方法中检查字段是否为私有可能会变得很方便。

尝试在类范围之外调用它会导致我们之前看到的相同错误。

class Foo {
  #brand;


  static isFoo(obj) {
    return #brand in obj;
  }
}


const x = new Foo();


// ✅ works, it returns true
Foo.isFoo(x);


// ✅ works, it returns false
Foo.isFoo({})


// ❌ Uncaught SyntaxError: Private field '#brand' must be declared in an enclosing class
#brand in x

了解有关该提案的更多信息。https://github.com/tc39/proposal-private-fields-in-in

最后的想法

这是一个有趣的版本，它提供了许多小而有用的功能，例如 at、private fields和error cause。当然，error cause会给我们的日常错误跟踪任务带来很多清晰度。

一些高级功能，如top-level await，在使用它们之前需要很好地理解。它们可能在你的代码执行中产生不必要的副作用。

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonJavaScript wurde auf es aktualisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!