JavaScript更新到了es幾

JavaScript更新到了es13了。 2022年6月22日，第123屆Ecma大會批准了ECMAScript2022語言規範，這意味著它現在正式成為JavaScript標準；而ECMAScript2022是第13次迭代，因此也可稱為ECMAScript13，簡稱ES13。

本教學操作環境：windows7系統、ECMAScript 13版、Dell G3電腦。

新的 ES13 規格終於發布了。 

JavaScript 不是一種開源語言，它是一種需要遵循 ECMAScript 標準規範編寫的語言，TC39 委員會負責討論和批准新功能的發布， 那TC39他們是誰？

“ECMA International 的TC39 是一群JavaScript 開發人員、實施者、學者等，他們與社區合作維護和發展JavaScript 的定義。” — TC39.es

他們的發布過程由五個階段組成，自2015 年以來，他們一直在進行年度發布，它們通常發生在春天舉行發布。

2022 年 6 月 22 日，第 123 屆 Ecma 大會批准了 ECMAScript 2022 語言規範，這意味著它現在正式成為標準。

有兩種方法可以引用任何 ECMAScript 版本：

• 按年份：這個新版本將是 ES2022。

• 依其迭代次數：這個新版本將會是第 13 次迭代，所以它可以稱為 ES13。

那麼這次這個版本有什麼新東西呢？我們可以對哪些功能感到興奮？

01、正規表示式比對索引

#目前，在JavaScript 中使用JavaScript Regex API 時，只傳回符合的開始索引。但是，對於一些特殊的高級場景，這還不夠。

作為這些規範的一部分，增加了一個特殊的標誌 d。透過使用它，正規表示式 API 將傳回一個二維數組作為名索引的鍵。它包含每個匹配項的開始和結束索引。如果在正規表示式中捕獲了任何命名組，它將在 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、Top-level await

在此提案之前，不接受Top-level await，但有一些變通方法可以模擬這種行為，但其有缺點。

Top-level await 特性讓我們依賴模組來處理這些 Promise。這是一個直覺的功能。 

但請注意，它可能會改變模組的執行順序， 如果一個模組依賴另一個具有Top-level 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 中的物件。

被接受的提案採取了更實際的方法。 Array 物件現在將有一個方法來模擬上述行為。

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、可存取的 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、Error Cause#

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

没有关于如何处理的明确协议，考虑到任何错误处理，我们至少有 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中文網其他相關文章！