JavaScript dikemas kini kepada es

JavaScript telah dikemas kini kepada es13. Pada 22 Jun 2022, Persidangan Ecma ke-123 telah meluluskan spesifikasi bahasa ECMAScript2022, yang bermaksud bahawa ia kini secara rasmi menjadi standard JavaScript; dan ECMAScript2022 ialah lelaran ke-13, jadi ia juga boleh dipanggil ECMAScript13, atau singkatannya ES13.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 13, komputer Dell G3.

Spesifikasi ES13 baharu akhirnya dikeluarkan.

JavaScript bukan bahasa sumber terbuka Ia adalah bahasa yang perlu ditulis dengan mematuhi spesifikasi standard ECMAScript Jawatankuasa TC39 bertanggungjawab untuk membincangkan dan meluluskan pengeluaran yang baharu ciri. Jadi siapakah mereka dalam TC39?

“TC39 di ECMA International ialah sekumpulan pembangun JavaScript, pelaksana, ahli akademik, dll. yang bekerjasama dengan komuniti untuk mengekalkan dan mengembangkan definisi JavaScript — TC39.es

Mereka proses keluaran didorong oleh Terdiri daripada lima fasa, mereka telah menjalani keluaran tahunan sejak 2015, dan ia biasanya berlaku pada musim bunga.

Pada 22 Jun 2022, Kongres Ecma ke-123 telah meluluskan spesifikasi bahasa ECMAScript 2022, yang bermaksud bahawa ia kini secara rasmi menjadi standard.

Terdapat dua cara untuk merujuk mana-mana versi ECMAScript:

• Mengikut tahun: Versi baharu ini ialah ES2022.

• Dengan nombor lelarannya: Versi baharu ini akan menjadi lelaran ke-13, jadi ia boleh dipanggil ES13.

Jadi apakah yang baharu dalam versi ini kali ini? Apakah ciri yang boleh kita teruja?

01 Indeks padanan ungkapan biasa

Pada masa ini, apabila menggunakan JavaScript Regex API dalam JavaScript, hanya permulaan perlawanan. adalah indeks yang dikembalikan. Walau bagaimanapun, untuk beberapa senario lanjutan khas, ini tidak mencukupi.

Sebagai sebahagian daripada spesifikasi ini, bendera khas d telah ditambahkan. Dengan menggunakannya, API ungkapan biasa akan mengembalikan tatasusunan dua dimensi sebagai kunci indeks nama. Ia mengandungi indeks permulaan dan penamat setiap perlawanan. Jika mana-mana kumpulan bernama ditangkap dalam regex, ia akan mengembalikan indeks mula/akhir mereka dalam objek indices.groups, dengan nama kumpulan dinamakan sebagai kuncinya.

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

Lihat cadangan asal, https://github.com/tc39/proposal-regexp-match-indices

02, Tahap tertinggi menanti

Sebelum cadangan ini, Penantian Peringkat Atas tidak diterima, tetapi terdapat penyelesaian untuk mensimulasikan tingkah laku ini, tetapi ia mempunyai kelemahannya.

Ciri menunggu peringkat teratas membolehkan kami bergantung pada modul untuk mengendalikan Janji ini. Ini adalah ciri intuitif.

Tetapi sila ambil perhatian bahawa ia mungkin mengubah susunan pelaksanaan modul Jika modul bergantung pada modul lain dengan panggilan menunggu peringkat Atas, pelaksanaan modul akan digantung sehingga janji selesai.

Mari kita lihat contoh:

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

Dalam contoh di atas, enjin akan menunggu pengguna menyelesaikan tindakan sebelum melaksanakan kod pada modul usage.js.

Secara keseluruhan, ini adalah ciri yang bagus dan intuitif yang perlu digunakan dengan berhati-hati dan jangan menyalahgunakannya.

Lihat cadangan asal di sini. https://github.com/tc39/proposal-top-level-await

03, .at( )

Untuk sekian lama masa, Terdapat permintaan untuk JavaScript untuk menyediakan pengakses indeks negatif seperti Python untuk tatasusunan. Daripada melakukan tatasusunan[array.length-1] lakukan sekadar tatasusunan[-1]. Ini tidak mungkin kerana simbol [] juga digunakan untuk objek dalam JavaScript.

Cadangan yang diterima mengambil pendekatan yang lebih praktikal. Objek tatasusunan kini akan mempunyai kaedah untuk mensimulasikan tingkah laku di atas.

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

Lihat cadangan asal, https://github.com/tc39/proposal-relative-indexing-method

By the way, memandangkan kita bercakap tentang tatasusunan, anda tahu anda boleh Memusnahkan kedudukan tatasusunan?

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. Objek Boleh Dicapai.prototaip.hasOwnProperty

Yang berikut hanyalah penyederhanaan yang baik, sudah ada hasOwnProperty. Walau bagaimanapun, ia perlu dipanggil dalam contoh carian yang ingin kami laksanakan. Oleh itu, adalah perkara biasa bagi kebanyakan pembangun untuk melakukan perkara ini:

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

Dengan spesifikasi baharu ini, kaedah hasOwn telah ditambahkan pada prototaip Object, dan kini, kita hanya boleh melakukan:

const x = { foo: "bar" };


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

Lihat cadangan asal, https://github.com/tc39/proposal-accessible-object-hasownproperty

05, Ralat Punca

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

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

Atas ialah kandungan terperinci JavaScript dikemas kini kepada es. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!