ECMAScript2020(ES2020)的新语法是时候对不断变化的艺术作品JavaScript进行另一次更新了。在本文中，我们将回顾ES2020的一些最新和最强大的功能。由于很多人认为更新浏览器并不是为了让他们的开发工作变得更简单，所以我们需要使用babel转码来开始使用一些新的语法特性。为简单起见，我将使用Parcelbundler使一切运行得尽可能快。$yarnaddparcel-bundlerpackage.json"scripts":{"start":"parcelindex.html"}，不幸的是，在撰写本文时，我们使用的语法非常新，市场上很少有可用的ES2020的预环境。将以下代码放入您的.babelrc文件并保存，Parcel应该会为您处理所有安装。.babelrc{"plugins":["@babel/plugin-proposal-nullish-coalescing-operator","@babel/plugin-proposal-optional-chaining","@babel/plugin-proposal-class-properties","@babel/plugin-proposal-private-methods","@babel/plugin-syntax-bigint"]}等私有变量类的主要目的之一是将代码包含到可重用模块中。您创建了一个在许多不同地方使用的类，并且您可能不希望其中的所有内容在全球范围内可用。现在，通过在变量或函数前面添加一个简单的散列符号，我们可以将它们完全保留供类内部使用。classMessage{//定义一个私有变量#message="Howdy"greet(){console.log(this.#message)}}constgreeting=newMessage()//通过实例方法调用访问greeting.greet()//Howdy//直接访问类变量console.log(greeting.#message)//私有名称#message未定义Promise.allSettled当我们在使用多实例promises的时候，尤其是它们相互依赖的时候，每次都会记录它对于调试发生的错误非常有用。通过使用Promise.allSettled，我们可以创建一个仅在所有承诺都得到满足时才返回的承诺。它将返回一个数组，其中包含每个承诺履行的结果。constp1=newPromise((res,rej)=>setTimeout(res,1000));constp2=newPromise((res,rej)=>setTimeout(rej,1000));承诺。allSettled([p1,p2]).then(data=>console.log(data));//[//对象{status:"fulfilled",value:undefined},//Object{status:"rejected",reason:undefined}//]Nullcoalescingoperator(??)Nullcoalescingoperator(??)是逻辑运算符。当左操作数为null或未定义时，它返回右操作数。否则返回左边的操作数。与逻辑或(||)运算符不同，如果左侧操作数为假，则逻辑或返回右侧操作数。也就是说，如果你使用||为某些变量设置默认值，您可能会遇到意想不到的行为。比如当false时（例如，''或0）。请参见下面的示例。constfoo=null??'默认字符串';console.log(foo);//预期输出：“默认字符串”constbaz=0??42;console.log(baz);//预期输出：0optional链接运算符(?.)类似于null合并运算符，JavaScript在处理错误值时可能无法按照我们想要的方式工作。如果它是未定义的，我们可以返回一个值，但是如果它的路径是未定义的怎么办？我们可以通过在点符号之前添加一个问号来使值路径的任何部分成为可选的，这样我们仍然可以与之交互。如果您访问对象上不存在的属性的属性，请使用.operator会直接报错。letperson={};//如果person对象不包含profile，会报错console.log(person.profile.name??"Anonymous");//person.profileisundefined//下面路径可选，如果person对象不包含profile属性，直接返回"Anonymous"console.log(person?.profile?.name??"Anonymous");console.log(person?.profile?.age??18);BigInt我们不会深入讨论技术细节，但由于JavaScript处理数字的方式，当你达到足够高的水平时，一些意想不到的事情开始发生。JavaScript可以处理的最大数字是2的53次方。我们可以使用Number的MAX_SAFE_INTEGER属性来获取这个值。constmax=Number.MAX_SAFE_INTEGER;控制台日志（最大）；//9007199254740991如果超出这个范围，事情会变得有点奇怪...console.log(max+1);//9007199254740992console.log(max+2);//9007199254740992console.log(max+3);//9007199254740994console.log(Math.pow(2,53)==Math.pow(2,53)+1);//true我们可以使用新的BigInt数据类型来解决这个问题。通过将字母n放在末尾，我们可以开始使用大得离谱的数字并与之交互。我们不能将标准数字与BigInt数字混合使用，因此任何数学运算都需要使用BigInt来完成。constbigNum=100000000000000000000000000000n;console.log(bigNum*2n);//200000000000000000000000000000n动态导入（DynamicImport）如果你有一个工具函数文件，其中有些函数可能很少用到，完全导入可能会浪费资源。现在我们可以使用async/await来动态导入我们需要的依赖。这与我们当前的Parcel设置不兼容，因为我们使用的导入仅适用于Node.js环境。math.jsconstadd=(num1,num2)=>num1+num2;export{add};index.jsconstdoMath=async(num1,num2)=>{if(num1&&num2){constmath=awaitimport('./math.js');console.log(math.add(5,10));};};doMath(4,2);结语本文未完全翻译为：https://alligator.io/js/es2020/里面加入了很多自己的想法和影子，方便阅读。翻译的目的是让自己和更多的人了解和学习新的语法。
