JavaScript が es に更新されました

JavaScript が es13 に更新されました。 2022 年 6 月 22 日、第 123 回 Ecma カンファレンスは ECMAScript2022 言語仕様を承認しました。これは、ECMAScript2022 言語仕様が正式に JavaScript 標準になったことを意味します。また、ECMAScript2022 は 13 番目の反復であるため、ECMAScript13 または略して ES13 とも呼ばれます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 13、Dell G3 コンピューター。

#新しい ES13 仕様がついにリリースされました。

JavaScript はオープン ソース言語ではありません。ECMAScript 標準仕様に準拠して作成する必要がある言語です。TC39 委員会は、新しいバージョンのリリースについて議論し、承認する責任があります。それでは、TC39 とは誰でしょうか?

「ECMA International の TC39 は、コミュニティと協力して JavaScript の定義を維持および進化させる JavaScript 開発者、実装者、学者などのグループです。」 — TC39.es

リリースこのプロセスは 5 つのフェーズで構成され、2015 年から毎年リリースされており、通常は春に行われます。

2022 年 6 月 22 日、第 123 回 Ecma 会議は ECMAScript 2022 言語仕様を承認しました。これは、ECMAScript 2022 言語仕様が正式に標準になったことを意味します。

ECMAScript バージョンを参照するには 2 つの方法があります:

• 年別: この新しいバージョンは ES2022 になります。

• イテレーション番号によると、この新しいバージョンは 13 回目のイテレーションになるため、ES13 と呼ばれます。

それでは、今回のこのバージョンの新機能は何でしょうか?どのような機能に興奮できるでしょうか?

01. 正規表現一致インデックス

現在、JavaScript で JavaScript Regex API を使用する場合、一致するのは先頭のみです。インデックスが返されます。ただし、一部の特別な高度なシナリオでは、これでは十分ではありません。

これらの仕様の一部として、特別なフラグ d が追加されました。これを使用すると、正規表現 API は名前インデックスのキーとして 2 次元配列を返します。これには、各一致の開始インデックスと終了インデックスが含まれます。名前付きグループが正規表現でキャプチャされた場合は、名前付きグループ名をキーとして、その開始/終了インデックスが indices.groups オブジェクトに返されます。

// ✅ 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]

元の提案を表示、https://github.com/tc39/proposal-regexp-match-indices

02、トップレベルの await

この提案以前は、トップレベルの await は受け入れられませんでしたが、この動作をシミュレートする回避策があり、これには欠点がありました。

トップレベルの await 機能により、モジュールに依存してこれらの Promise を処理できるようになります。これは直感的な機能です。

ただし、モジュールの実行順序が変更される可能性があることに注意してください。モジュールがトップレベルの await 呼び出しで別のモジュールに依存している場合、そのモジュールの実行は、Promise が完了するまで一時停止されます。

例を見てみましょう:

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

上の例では、エンジンはユーザーがアクションを完了するのを待ってから、usage.js モジュールのコードを実行します。

全体として、これは優れた直感的な機能ですが、注意して使用する必要があり、乱用しないようにしましょう。

元の提案書をここでご覧ください。 https://github.com/tc39/proposal-top-level-await

03、.at( )

長い間JavaScript に対して、配列に対する Python のような負のインデックス アクセサーを提供するという要望がありました。 array[array.length-1] を実行する代わりに、単純に array[-1] を実行します。 [] 記号は JavaScript のオブジェクトにも使用されるため、これは不可能です。

受け入れられた提案では、より実践的なアプローチがとられました。配列オブジェクトには、上記の動作をシミュレートするメソッドが追加されます。

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

元の提案を参照してください。 https://github.com/tc39/proposal-relative-indexing-method

ちなみに、ここでは配列について話しているので、構造を分割できることはご存知でしょう。配列 場所?

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. Accessible Object.prototype.hasOwnProperty

以下は単に単純化したもので、すでに hasOwnProperty があります。ただし、実行するルックアップ インスタンス内で呼び出す必要があります。したがって、多くの開発者が最終的に次のことを行うのが一般的です:

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")) {
  ...
}

これらの新しい仕様では、hasOwn メソッドが Object プロトタイプに追加され、今では単に次のことを行うことができます:

const x = { foo: "bar" };


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

元の提案を表示、https://github.com/tc39/proposal-accessible-object-hasownproperty

05、エラー原因

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

没有关于如何处理的明确协议，考虑到任何错误处理，我们至少有 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视频教程、编程视频】

以上がJavaScript が es に更新されましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。