分享更有价值
被信任是一种快乐

JavaScript最新版本更新到了哪些功能

文章页正文上

这篇“JavaScript最新版本更新到了哪些功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript最新版本更新到了哪些功能”文章吧。 JavaScript更新到了es13了。2022年6月22日,第123届Ecma大会批准了ECMAScript2022语言规范,这意味着它现在正式成为JavaScript标准;而ECMAScript2022是第13次迭代,因此也可称为ECMAScript13,简称ES13。新的 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 对象中返回它们的开始/结束索引, 命名的组名将是它的键。

//✅aregexwitha'B'namedgroupcapture
constexpr=/a+(?b+)+c/d;


constresult=expr.exec("aaabbbc")


//✅showsstart-endmatches+namedgroupmatch
console.log(result.indices);
//prints[Array(2),Array(2),groups:{…}]


//✅showingthenamed'B'groupmatch
console.log(result.indices.groups['B'])
//prints[3,6]

02、Top-level await在此提案之前,不接受Top-level await,但有一些变通方法可以模拟这种行为,但其有缺点。Top-level await 特性让我们依靠模块来处理这些 Promise。这是一个直观的功能。但是请注意,它可能会改变模块的执行顺序, 如果一个模块依赖于另一个具有Top-level await 调用的模块,则该模块的执行将暂停,直到 promise 完成。让我们看一个例子:

//users.js
exportconstusers=awaitfetch('/users/lists');


//usage.js
import{users}from"./users.js";
//✅themodulewillwaitforuserstobefullfilledpriortoexecutinganycode
console.log(users);

在上面的示例中,引擎将等待用户完成操作,然后,再执行 usage.js 模块上的代码。总之,这是一个很好且直观的功能,需要小心使用,我们不要滥用它。03、.at( )长期以来,一直有人要求 JavaScript 提供类似 Python 的数组负索引访问器。而不是做 array[array.length-1] 来做简单的 array[-1]。这是不可能的,因为 [] 符号也用于 JavaScript 中的对象。被接受的提案采取了更实际的方法。Array 对象现在将有一个方法来模拟上述行为免费云主机、域名

constarray=[1,2,3,4,5,6]


//✅Whenusedwithpositiveindexitisequalto[index]
array.at(0)//1
array[0]//1


//✅WhenusedwithnegativeindexitmimicksthePythonbehaviour
array.at(-1)//6
array.at(-2)//5
array.at(-4)//3

顺便说一句,既然我们在谈论数组,你知道你可以解构数组位置吗?

constarray=[1,2,3,4,5,6];


//✅Differentwaysofaccessingthethirdposition
const{3:third}=array;//third=4
array.at(3)//4
array[3]//4

04、可访问的 Object.prototype.hasOwnProperty以下只是一个很好的简化, 已经有了 hasOwnProperty。但是,它需要在我们想要执行的查找实例中调用。因此,许多开发人员最终会这样做是很常见的:

constx={foo:"bar"};


//✅grabbingthehasOwnPropertyfunctionfromprototype
consthasOwnProperty=Object.prototype.hasOwnProperty


//✅executingitwiththexcontext
if(hasOwnProperty.call(x,"foo")){
...
}

通过这些新规范,一个 hasOwn 方法被添加到 Object 原型中,现在,我们可以简单地做:

constx={foo:"bar"};


//✅usingthenewObjectmethod
if(Object.hasOwn(x,"foo")){
...
}

05、Error Cause错误帮助我们识别应用程序的意外行为并做出反应,然而,理解深层嵌套错误的根本原因,正确处理它们可能会变得具有挑战性,在捕获和重新抛出它们时,我们会丢失堆栈跟踪信息。没有关于如何处理的明确协议,考虑到任何错误处理,我们至少有 3 个选择:

asyncfunctionfetchUserPreferences(){
try{
constusers=awaitfetch('//user/preferences')
.catch(err=>{
//Whatisthebestwaytowraptheerror?
//1.thrownewError('Failedtofetchpreferences'+err.message);
//2.constwrapErr=newError('Failedtofetchpreferences');
//wrapErr.cause=err;
//throwwrapErr;
//3.classCustomErrorextendsError{
//constructor(msg,cause){
//super(msg);
//this.cause=cause;
//}
//}
//thrownewCustomError('Failedtofetchpreferences',err);
})
}
}


fetchUserPreferences();

作为这些新规范的一部分,我们可以构造一个新错误并保留获取的错误的引用。 我们只需将对象 {cause: err} 传递给 Errorconstructor。这一切都变得更简单、标准且易于理解深度嵌套的错误, 让我们看一个例子:

asyncfunctionfetcUserPreferences(){
try{
constusers=awaitfetch('//user/preferences')
.catch(err=>{
thrownewError('Failedtofetchuserpreferences,{cause:err});
})
}
}


fetcUserPreferences();

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

classFoo{
#iteration=0;


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


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


constx=newFoo();


//❌UncaughtSyntaxError:Privatefield'#iteration'mustbedeclaredinanenclosingclass
x.#iteration


//✅works
x.increment();


//✅works
x.logIteration();

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

classFoo{
#iteration=0;


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


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


constx=newFoo();


//❌UncaughtSyntaxError:Privatefield'#auditIncrement'mustbedeclaredinanenclosingclass
x.#auditIncrement


//✅works
x.increment();

该功能与私有类的类静态块和人体工程学检查有关,我们将在接下来的内容中看到。07、Class Static Block作为新规范的一部分,我们现在可以在任何类中包含静态块,它们将只运行一次,并且是装饰或执行类静态端的某些字段初始化的好方法。我们不限于使用一个块,我们可以拥有尽可能多的块。

//✅willoutput'onetwothree'
classA{
static{
console.log('one');
}
static{
console.log('two');
}
static{
console.log('three');
}
}

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

letgetPrivateField;


classA{
#privateField;
constructor(x){
this.#privateField=x;
}
static{
//✅itcanaccessanyprivatefield
getPrivateField=(a)=>a.#privateField;
}
}


consta=newA('foo');
//✅Works,fooisprinted
console.log(getPrivateField(a));

如果我们尝试从实例对象的外部范围访问该私有变量,我们将得到无法从类未声明它的对象中读取私有成员#privateField。08、Private Fields新的私有字段是一个很棒的功能,但是,在某些静态方法中检查字段是否为私有可能会变得很方便。尝试在类范围之外调用它会导致我们之前看到的相同错误。

classFoo{
#brand;


staticisFoo(obj){
return#brandinobj;
}
}


constx=newFoo();


//✅works,itreturnstrue
Foo.isFoo(x);


//✅works,itreturnsfalse
Foo.isFoo({})


//❌UncaughtSyntaxError:Privatefield'#brand'mustbedeclaredinanenclosingclass
#brandinx

以上就是关于“JavaScript最新版本更新到了哪些功能”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注云技术行业资讯频道。

相关推荐: vue 3d旋转相册源码如何用

本文小编为大家详细介绍“vue 3d旋转相册源码如何用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue 3d旋转相册源码如何用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 为了运行这个Vue 3D旋转相册源码,你需要安装Vu…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册