这8个JS 新功能,你应该去尝试一下
摘要:本文主要介绍几个已经进入stage4的提案,这几个提案有望在2022年逐步纳入标准。
本文分享自华为云社区《2022 年你应该尝试的 8个 JavaScript 新功能》,作者:前端picker。
1995年12月4日,Netscape 公司与 Sun 公司联合发布JavaScript 以来,JavaScript从推出就开始了飞速的发展,2015年6,ES6正式发布,此后JavaScript正式进入新阶段,成为企业级大规模开发语言,并仍以高速度不断发展。
下面的表格对应这版本变化:
本文主要介绍几个已经进入stage4的提案,这几个提案有望在2022年逐步纳入标准。(请注意:纳入标准并不等同于浏览器支持)
PS:科普-Javascript的新语法,从提出到纳入标准一共经历下面几个stage
stage-0:新语法还是一个设想,(只能由TC39成员或TC39贡献者提出)
stage-1::提案阶段,比较正式的提议,只能由TC39成员发起,这个提案要解决的问题必须有正式的书面描述。
stage-2:草案,有了初始规范,必须对功能语法和语义进行正式描述,包括一些实验性的实现。
stage-3:候选,该提议基本已经实现,需要等待实验验证,用户反馈及验收测试通过。
stage-4:已完成,必须通过 Test262 验收测试,下一步就纳入ECMA标准。
.at()
TC39建议在所有基本可索引类,例如:数组、字符串、类数组(arguments)中添加.at()方法。
例如
lat arr=[1,2,3,4,5]
之前我们想获取数组中的第二位
arr[1] //2
最后一位的话,可能就是
arr[4] // 5
但是如果arr长度是动态的呢?我们要如何让取出最后一位? 通常的写法是:
arr[arr.length-1]
但是有了.at()方法就很简单了,.at()支持正索引和负索引。
例如
arr.at(-1) //5 arr.at(-2) //4
具体提案:https://github.com/tc39/proposal-relative-indexing-method
Object.hasOwn(object, property)
Object.hasOwn(object, property)主要是用来替代Object.prototype.hasOwnProperty()。
目前我们想要判断对象是否具有指定的对象,主要写法如下:
if (Object.prototype.hasOwnProperty.call(object, "fn")) { console.log('有') }
而Object.hasOwn的写法:
if (Object.hasOwn(object, "fn")) { console.log("有") }
具体提案:https://github.com/tc39/proposal-accessible-object-hasownproperty
目前来看,V8引擎的9.3版本已经开始支持,所以说chrome应该会很快支持。
类的私有方法和getter/setter
类是所有支持面向对象语言的基本,而Javascript虽然支持使用class定义类,但是并没有提供 定义私有属性/方法的的 方案。本提案提出使用**#**来定义私有属性/方法
class Person{ name = '小芳'; #age = 16; consoleAge(){ console.log(this.#age) } } const person = new Person(); console.log(person.name); //小芳 console.log(button.#value); //报错 button.#value = false;//报错
具体提案:https://github.com/tc39/proposal-private-methods
检查私有属性和方法
因为新的标准会支持私有属性和方法,当我们访问不存在的私有属性/方法会报错,而在新标准中也考虑了这个情况,提供了in来检查私有属性和方法是否存在
class C { #brand; #method() {} get #getter() {} static isC(obj) { return #brand in obj && #method in obj && #getter in obj; } }
具体提案:https://github.com/tc39/proposal-private-fields-in-in
Top-level await(顶层await)
目前,我们使用await必须是在申明async的函数中,本提案,主要是支持在没有async的情况下使用await
例如下面几种使用场景:
动态引入依赖
const strings = await import(`/i18n/${navigator.language}`);
这允许模块使用运行时值来确定依赖关系。这对于开发/生产拆分、国际化、环境拆分等非常有用。
资源初始化
const connection = await dbConnector();
这允许模块表示资源,并在模块永远无法使用的情况下产生错误。
加载依赖
let jQuery; try { jQuery = await import('https://cdn-a.com/jQuery'); } catch { jQuery = await import('https://cdn-b.com/jQuery'); }
具体提案:https://github.com/tc39/proposal-top-level-await
正则匹配索引
该提案提供了一个新的/d,用来获取每个匹配的开始位置和结束位置信息。
const str = 'The question is TO BE, or not to be, that is to be.'; const regex = /to be/gd; const matches = [...str.matchAll(regex)]; matches[0];
具体提案:https://github.com/tc39/proposal-regexp-match-indices
new Error()抛出异常的具体原因
new Error(),可能大家第一反应是,这不是已经存在的语法嘛,是的,没错!只是新的提案:将错误与原因相关联,,向具有属性的Error() 构造函数添加一个附加选项参数cause,其值将作为属性分配给错误实例。
async function doJob() { const rawResource = await fetch('//domain/resource-a') .catch(err => { throw new Error('Download raw resource failed', { cause: err }); }); const jobResult = doComputationalHeavyJob(rawResource); await fetch('//domain/upload', { method: 'POST', body: jobResult }) .catch(err => { throw new Error('Upload job result failed', { cause: err }); }); } try { await doJob(); } catch (e) { console.log(e); console.log('Caused by', e.cause); } // Error: Upload job result failed // Caused by TypeError: Failed to fetch
具体提案:https://github.com/tc39/proposal-error-cause
类static初始化块
本田针对静态字段和静态私有字段的提供了一种在 ClassDefinitionEvaluation 期间执行类静态端的每个字段初始化的机制-static blocks.例如官方提供的例子:
在没有static blocks之前,我们想给静态变量初始化(非直接赋值,可能是表达式赋值)的话,可能是放在外部实现:
// without static blocks: class C { static x = ...; static y; static z; } try { const obj = doSomethingWith(C.x); C.y = obj.y C.z = obj.z; } catch { C.y = ...; C.z = ...; }
有了static block的情况下:我们可以直接在static blocks中初始化变量:
class C { static x = ...; static y; static z; static { try { const obj = doSomethingWith(this.x); this.y = obj.y; this.z = obj.z; } catch { this.y = ...; this.z = ...; } } }

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
理解python异步编程与简单实现asyncio
异步编程 在开始说明异步编程之前,首先先了解几个相关的概念。 阻塞 程序未得到所需计算资源时被挂起的状态。 程序在等待某个操作完成期间,自身无法继续干别的事情,则称该程序在该操作上是阻塞的。 常见的阻塞形式有:网络I/O阻塞、磁盘I/O阻塞、用户输入阻塞等。 阻塞是无处不在的,包括CPU切换上下文时,所有的进程都无法真正干事情,它们也会被阻塞。(如果是多核CPU则正在执行上下文切换操作的核不可被利用。) 简单的理解的话,阻塞就是 A调用B,A会被挂起,一直等待B的结果,什么都不能干。 非阻塞 程序在等待某操作过程中,自身不被阻塞,可以继续运行干别的事情,则称该程序在该操作上是非阻塞的。 非阻塞并不是在任何程序级别、任何情况下都可以存在的。 仅当程序封装的级别可以囊括独立的子程序单元时,它才可能存在非阻塞状态。 非阻塞的存在是因为阻塞存在,正因为某个操作阻塞导致的耗时与效率低下,我们才要把它变成非阻塞的。 简单理解的话,非阻塞就是 A调用B,A自己不用被挂起来等待B的结果,A可以去干其他的事情 同步 不同程序单元为了完成某个任务,在执行过程中需靠某种通信方式以协调一致,称这些程序单元是同...
- 下一篇
lamp-cloud 4.3 发布,新增完整的数据权限配置、控制、鉴权、拦截流程
4.3.0 版本 更新详情: build 依赖升级 spring-boot-admin.version>2.6.1 hutool.version>5.7.19 fastjson.version>1.2.79 lombok.version>1.18.22 caffeine.version>2.9.3 "ant-design-vue": "3.0.0-beta.3" lamp-util-pro: 完全删除 lamp-security-starter模块 调整lamp_defaults表结构和初始数据。 feat lamp-cloud-pro: 新增lamp-data-scope-sdk模块,实现数据权限注解拦截和sql动态拼接 lamp-cloud-pro: 新增数据权限完整功能,包括:数据权限配置、数据权限授权、数据权限校验、数据权限sql拦截(基于注解动态拼接条件)等全流程! lamp-web-pro: 角色页面维护和配置数据角色以及数据角色的资源 lamp-web-pro: 资源维护界面支持配置数据权限类型的资源 lamp-web-pr...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8安装Docker,最新的服务器搭配容器使用
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS8编译安装MySQL8.0.19
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2全家桶,快速入门学习开发网站教程
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长