ES2020新功能

来源:http://www.chinese-glasses.com 作者:Web前端 人气:197 发布时间:2020-03-24
摘要:时间: 2019-11-04阅读: 72标签: 功能 时间: 2019-12-24阅读: 60标签: nginx前言 自 2015 年发布 ES6 以来,JavaScript一直在快速发展,每次迭代中都会出现大量新功能。 JavaScript语言规范的新版本每年

时间: 2019-11-04阅读: 72标签: 功能

时间: 2019-12-24阅读: 60标签: nginx前言

自 2015 年发布 ES6 以来,JavaScript 一直在快速发展,每次迭代中都会出现大量新功能。 JavaScript 语言规范的新版本每年更新一次,新语言功能建议的定稿比以往更快。这意味着新功能将以前所未有的速度被整合到现代浏览器和其他 JavaScript 运行时引擎(如 Node.js)中。

一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4 五个阶段,每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段,这意味着应该很快在浏览器和其他引擎中支持这些特性。

在 2019年,“Stage 3”阶段有许多新功能,这意味着它即将完成,并且已经在浏览器和 Node 中获得对这些功能的支持。如果我们想将它们用于生产环境,则可以使用 Babel 之类的东西将其转换为旧版 JavaScript,以便在需要时用于旧版浏览器(如 Internet Explorer)。

一、类的私有变量

在本文中,我们研究了类中的私有字段,可选链,无效合并运算符和BigInts。

最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。

类的私有字段

classCounter{#x=0;​#increment(){this.#x++;}​onClick(){this.#increment();}}​constc=newCounter();c.onClick();//正常c.#increment();//报错

最新提案之一是在类中添加私有变量的方法。我们将使用#符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。例如我们可以编写一个简单的类来增加和减少数字,请看以下代码:

通过 # 修饰的成员变量或成员函数就成为了私有变量,如果试图在 Class 外部访问,则会抛出异常。现在,此特性可在最新版本的 Chrome 和 Node.js中使用。

class Counter { #x = 0; increment() { this.#x++; } decrement() { this.#x--; } getNum(){ return this.#x; }}const c = new Counter();c.increment(); c.increment(); c.decrement(); console.log(c.getNum());

二、可选链操作符

代码中console.log输出的结果是 1。#x是一个私有变量,无法在类外部访问。所以如果我们这样写:

你可能碰到过这样的情形:当需要访问嵌套在对象内部好几层的属性时,会得到臭名昭著的错误Cannot read property 'stop' of undefined,然后你就要修改你的代码来处理属性链中每一个可能的undefined对象,比如:

console.log(c.#x);
letnestedProp=objobj.firstobj.first.second;

将会得到提示Uncaught SyntaxError: Private field '#x'。

在访问obj.first.second之前,obj和obj.first 的值要被确认非null(且不是undefined)。目的是为了防止错误发生,如果简单直接的访问obj.first.second而不对obj和obj.first 进行校验就有可能产生错误。

私有变量是 JavaScript 类非常需要的功能。现在,最新版本的 Chrome 和 Node.js v12 中已提供了此功能。

有了可选链式调用 ,你只要这样写就可以做同样的事情:

可选链运算符

letnestedProp=obj?.first?.second;

当前,如果要访问对象的深层嵌套属性,则必须通过很长的布尔表达式去检查每个嵌套级别中的属性。必须检查每个级别中定义的每个属性,直到所需的深度嵌套的属性为止,如下代码所示:

如果obj或obj.first是null/undefined,表达式将会短路计算直接返回undefined。

const obj = { prop1: { prop2: { prop3: { prop4: { prop5: 5 } } } }}obj.prop1  obj.prop1.prop2  obj.prop1.prop2  obj.prop1.prop2.prop3  obj.prop1.prop2.prop3.prop4  console.log(obj.prop1.prop2.prop3.prop4.prop5);

三、空位合并操作符

幸运的是,上面的代码在我们想要访问的每个级别中都定义了每个属性。但是,如果在任何级别的对象中都有undefined或null的嵌套对象,如果不进行检查,那么的程序将会崩溃。这意味着我们必须检查每个级别,以确保当它遇到undefined或null对象时不会崩溃。

我们在开发过程中,经常会遇到这样场景:变量如果是空值,则就使用默认值,我们是这样实现的:

使用可选链运算符,只需要使用?.来访问嵌套对象。而且如果碰到的是undefined或null属性,那么它只会返回undefined。通过可选链,可以把上面的代码改为:

letc=a?a:b//方式1letc=a||b//方式2
const obj = { prop1: { prop2: { prop3: { prop4: { prop5: 5 } } } }}console.log(obj?.prop1?.prop2?.prop3?.prop4?.prop5);

这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0, '', false),这些值可能是在某些情况下有效的输入。

当我们的程序执行到undefined或null属性时,不会崩溃,而只是返回undefined。不幸的是,这尚未在任何浏览器中实现,所以最新版本的 Babel 来使用此功能。

为了解决这个问题,有人提议创建一个“nullish”合并运算符,用 ?? 表示。有了它,我们仅在第一项为 null 或 undefined 时设置默认值。

空位合并运算符

letc=a??b;//等价于letc=a!==undefineda!==null?a:b;

来自undefined或null值的另一个问题是,如果我们想要的变量为undefined或null则必须给变量设置默认值。例如:

例如有以下代码:

consty = x ||500;
constx=null;consty=x??500;console.log(y);//500constn=0constm=n??9000;console.log(m)//0

当使用||运算符将x设置为y时,如果x被定义为undefined,我们必须设置一个默认值。运算符||的问题在于,所有类似于 0,false或空字符串之类的值都将被我们不想要的默认值覆盖。

四、BigInt

为了解决这个问题,有人提议创建一个“nullish”合并运算符,用??表示。有了它,我们仅在第一项为null或undefined时设置默认值。使用无效的合并运算符,以上表达式将变为:

JS在Math上一直很糟糕的原因之一是,无法精确表示大于的数字2 ^ 53,这使得处理相当大的数字变得非常困难。

consty = x ??500;
1234567890123456789*123;//-151851850485185200000//计算结果丢失精度

例如有以下代码:

幸运的是,BigInt(大整数)就是来解决这个问题。你可以在BigInt上使用与普通数字相同的运算符,例如 +, -, /, *, %等等。

const x = null;const y = x ?? 500;console.log(y); // 500const n = 0const m = n ?? 9000;console.log(m) // 0

创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可。例如,123 变为 123n。也可以使用全局方法 BigInt(value) 转化,入参 value 为数字或数字字符串。

y将被分配的值为 500,因为x的值为null。但是,由于n不为null或unfined,因此m被赋予值为0。如果我们使用||而不是??,那么由于 0 为假,因此将为m赋值 9000。

constaNumber=111;constaBigInt=BigInt(aNumber);aBigInt===111n//truetypeofaBigInt==='bigint'//truetypeof111//"number"typeof111n//"bigint"

不幸的是,此功能尚未在任何浏览器或 Node.js 中实现,我们必须使用最新版本的 Babel 才能使用此功能。

只要在数字末尾加上 n,就可以正确计算大数了:

BigInt

1234567890123456789n*123n;//-151851850485185185047n

本文由10bet发布于Web前端,转载请注明出处:ES2020新功能

关键词:

最火资讯