站长资讯网
最全最丰富的资讯网站

JavaScript更新到了es几

JavaScript更新到了es13了。2022年6月22日,第123届Ecma大会批准了ECMAScript2022语言规范,这意味着它现在正式成为JavaScript标准;而ECMAScript2022是第13次迭代,因此也可称为ECMAScript13,简称ES13。

JavaScript更新到了es几

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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 'B' group match console.log(result.indices.groups['B']) // 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();
登录后复制

了解有关该提案的

赞(0)
分享到: 更多 (0)