ES11新特性

ES11(ES2020)已经release了,抽个时间来总结一下它的新特性。

1.私有变量

ES11在类中新增私有变量控制符#,在内部变量或者函数前添加一个hash符号#,可以将它们设置为私有属性,只能在类的内部可以使用。

这时我想要获取私有变量的值或者设置私有变量的值该怎么办,很简单,根据我类中定义的特殊的方法就可以实现,比如:

暂时私有变量(属性),就说到这里,可能以后会发现更多的sao操作再分享。

2.空值合并运算符

首先说一下空值合并运算符解决的是什么问题,在日常开发中,取对象属性的时候,如果对象中没有这个属性,我们获取的时候会获取到一个undefined的默认值

但是我们并不想获取到undefined这个默认值,我们需要的是我们自己给定的默认值,有人会说在定义对象的时候定义一个默认值就好了,但是如果是接口返回的数据对象中没有这个字段时,我们通常是用一个中间变量转存整理,这样就会显得比较麻烦,并且效率不高。ES11中就新增了一个空值合并操作符,来进行自定义个默认值。

空值合并操作符就是??,这个意思就是如果左侧的值为null或者undefined就返回左侧的值,如果没有就返回右侧的值,那么??和||的区别是什么呢,看上去好像没有什么区别,但是||操作符会对左侧的数据进行Boolean类型转换,然后在判断true或false,再判断是否返回右侧的值,而空值合并操作符(??)不会。

注:这个新特性在chrome中暂时是不支持的,以后可能会支持,可能是我浏览器版本较低,其他浏览器暂时没有进行适配校验,大家感兴趣可以自行监测。

3.可选链操作符

当我们使用空值合并操作符判断当前属性是否存在的时候,我们就有问题了,如果一个对象深层嵌套呢,一个a对象,我们需要获取a.b.c,但是我们不确定a.b是否存在,如果用??的话又没法判断,用三目运算符虽然可以,但是略显麻烦,并且不严谨,这个时候我们可以来看看可选链操作符。

从上面的例子中我们可以看到,可选链操作符(?.)表示,如果左侧表达式有值,就会继续访问右侧的字段,用可选两可以大量简化类似繁琐的前置校验操作,而且更加安全,比如我么在请求接口时,需要判断是否有值,有的话再进行操作,传统写法一般都是if配置或非关系,有了可选链以后就会显得很方便。同样的,如果我们把可选链操作符和空值合并操作符搭配使用的话就能起到判断是否存在,并且直接过滤的功能。

注:up主在测试的时候同样发现,在chrome无法识别这个操作符,但是未来肯定会支持的,其次,可选链操作符只能用来判断是否存在,和是否进行下一层级属性的访问,并不能进行赋值操作。

4.BigInt

在js中有一个大家都很头疼的问题,那就是精度问题,最典型的就是0.1+0.2 !== 0.3,js中可以处理的最大数字范围时2^53,超出这个范围的就会丢失精度。

为了解决这个问题,ES11提供了一种新的数据类型:BingInt。使用BigInt的方式有两种:

1.在数字后面加n

2.使用BigInt函数

接下来在比较是就是正常的false了

注:BigInt是一种新的原始数据类型,不能与标准数字混合使用,在使用时尽可能避免通过调用BigInt函数的方式来实例化超大整型,因为传入的参数字面量还是Number类型的一次实例化,如果参数超出安全范围,同样会精度丢失。

5.动态导入

在一个工程化项目中,安装包后,可能只用到依赖中的某些资源,这个时候就需要按需加载了,可以让首屏渲染更快捷流畅。虽然现在前端基于webpack的按需引入已经很方便了,但是如果在js中可以直接使用是不是会更爽呢,所以ES11中提出了新的动态导入解决方案。

首先,导出一个函数:

接下来我们在另外的地方动态导入:

6.globalThis

js中在不同环境下获取全局对象的方式不同,nodejs中通过global,web中通过window或者self等等,甚至可以通过this获取,但是通过this获取时很危险的,this在js中严重依赖上下文,滥用this会增加获取全局对象的复杂性,并且在不同环境下this可能有所区别,但是我们需要写一个js文件,让它可以在node,web workers和浏览器中生效,这个时候全局变量的不统一另开发很苦恼,过去的解决方式是通过一个全局函数进行获取:

这个写法无疑是通用的,如果存在确实能获取到全局对象,但是看上去很不整洁,并且十分麻烦,每个项目中都需要定义这个globals。而在ES11中提供了新的globalThis,目的是提供一种标准化的方式去访问全局对象,这时候可以在任意上下文中获取全局对象自身,并且不用担心环境的问题。

7.Promise.all缺陷与Promise.allSettled

promise.all可以并发执行异步任务,这无疑让前端的异步操作可控性大大提高了,但是它最大的问题就是并发执行多个异步任务时,如果其中某个任务执行出现了异常,所有任务都会over,Promise会直接进入reject状态。

举个例子,页面中你需要同时请求多个接口,你在Promise.all中调用,但是这时一个接口服务异常了,那么这个时候你在其中请求接口的所有异步操作都会reject,这就导致页面拿不到渲染数据,严重的甚至会整个页面逻辑崩坏。

在ES11中,当我们处理多个promise时,尤其当他们相互依赖时,我们就需要记录每个事件在调试中发生的错误。使用Promise.allSettled,它会创建一个新的promise,在所有promise完成后返回一个包含每个promise结果的数组。

以上就是我对ES11新特性的一些总结,有遗漏或者不足的地方欢迎指正。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342