通过小案例重温ES10的几个新特性已经收录了，之前好评文章的更多分类，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。虽然ES10没有ES6那么多的新特性，但是ES10还是有一些有用的特性。文中通过简单的例子介绍了ES10的新特性。这样我们就可以快速理解，而不需要看太多官方的解释。ES10的新特性主要有：数组方法：flat和flatMapObject.fromEntries字符串方法：trimStart和trimEndSymbol的description属性try{}catch{}//catch参数可以省略JSONsupportedtext)well-formedJSON.stringify()stableArray.prototype.sort()correctedFunction.toStringBigIntistheseventyprimitivetypedynamicimportnormalizedglobalThisobject1.Array.flat()&&Array.flatMapArray.flat()方法会按照指定的深度递归遍历数组，将所有元素与遍历到的子数组中的元素组合起来，返回一个新的数组。Array.flatMap()方法首先使用map函数映射每个元素，然后将结果压缩到一个新数组中。它与深度值为1的map和flat几乎相同，但是当将flatMap组合为一种方法时，它通常会稍微高效一些。示例1：Array.flat()letmulti=[1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];multi.flat();//[1,2,3,4,5,6,Array(4)]multi.flat().flat();//[1,2,3,4,5,6,7,8,9,Array(3)]multi.flat().flat().flat();//[1,2,3,4,5,6,7,8,9,10,11,12]multi.flat(Infinity);//[1,2,3,4,5,6,7,8,9,10,11,12]数组。flatMap()让数组=[1,2,3,4,5];array.map(x=>[x,x*2]);arraynow结果：[Array(2),Array(2),Array(2)]0:(2)[1,2]1:(2)[2,4]2:(2)[3,6]使用flatMap方法：array.flatMap(v=>[v,v*2]);[1,2,2,4,3,6,4,8,5,10]综合示例：2.Object.fromEntries()Object.fromEntries()方法将键值对列表转换为对象。示例1：letobj={apple:10,orange:20,banana:30};letentries=Object.entries(obj);entries;(3)[Array(2),Array(2),Array(2)]0:(2)["apple",10]1:(2)["orange",20]2:(2)["banana",30]letfromEntries=Object.fromEntries(entries);{apple:10,orange:20,banana:30}案例二：3.String.protype.matchAll早期遇到的问题之一就是正则表达式“matchall”怎么写？最上面的答案将建议String.match与正则表达式和/g或RegExp.exec与/g或RegExp.test与/g。让我们先看看旧规范是如何工作的。带有字符串参数的String.match仅返回第一个匹配项：letstring='Hello';让matches=string.match('l');控制台日志（匹配[0]）；//"l"结果是单个"l"（注意：匹配存储在matches[0]而不是matches中）使用带有正则表达式参数的string.match也是如此：在字符串"中找到"l"你好”使用正则表达式/l/字符：letstring="Hello";letmatches=string.match(/l/);console.log(matches[0]);//"l"add/g混合letstring="Hello";letret=string.match(/l/g);//(2)["l","l"];那么为什么要使用新的matchAll方法呢？在解决这个问题之前，我们先了解一下捕获组。正则表达式捕获组在正则表达式中，捕获组只是从()括号中提取一个模式，您可以使用/regex/.exec(string)和string.match捕获组。常规捕获组是通过将模式包装在(pattern)中创建的，但是要在结果对象上创建组属性，它是：(?pattern)。要创建一个新的组名，只需在括号内追加?，在结果中，组（模式）匹配将成为group.name，追加到匹配对象，下面是一个例子：StringSpecimenMatch：这里创建了match.groups.color和match.groups.bird:conststring='black*ravenlime*parrotwhite*seagull';constregex=/(?.*?)\*(?[a-z0-9]+)/g;while(match=regex.exec(string)){letvalue=match[0];让index=match.index;让输入=匹配。输入；console.log(`${value}at${index}with'${input}'`);console.log(match.groups.color);console.log(match.groups.bird);}需要多次调用regex.exec方法来遍历整个搜索结果集。在每次迭代期间调用.exec时，会显示下一个结果（它不会立即返回所有匹配项），因此会出现while循环。输出如下：black*ravenat0with'black*ravenlime*parrotwhite*seagull'blackravenlime*parrotat11with'black*ravenlime*parrotwhite*seagull'limeparrotwhite*seagullat23with'black*ravenlime*parrotwhite*seagull'whiteseagull但奇怪的是：如果从这个正则表达式中删除/g，您将永远在第一个结果上创建一个无限循环。这在过去是一个巨大的痛苦。想象一下从某个数据库接收到一个正则表达式，你不确定它的末尾是否有/g，你必须先检查一下。使用.matchAll()的一个很好的理由是，当它与捕获组一起使用时会更优雅，捕获组只是使用()提取模式的正则表达式的一部分。它返回一个迭代器而不是一个数组，迭代器本身很有用。可以使用扩展运算符(...)将迭代器转换为数组。它避免了带有/g标志的正则表达式，这在从数据库或外部源检索未知正则表达式并将它们与陈旧的RegEx对象一起使用时很有用。使用RegEx对象创建的正则表达式不能使用点(.)运算符链接。高级：RegEx对象更改跟踪最后一个匹配项所在位置的内部.lastindex属性，这在复杂情况下可能会造成严重破坏。.matchAll()是如何工作的？我们尝试匹配单词hello中所有出现的字母e和l，并且由于返回了一个迭代器，我们可以使用for...of循环对其进行迭代：//匹配所有出现的字母：“e”或"l"letiterator="hello".matchAll(/[el]/);for(constmatchofiterator)console.log(match);这次可以跳过/g，.matchall方法不需要，结果如下：['e',index:1,input:'hello']//Iteration1['l',index:2,input:'hello']//迭代2['l',index:3,input:'hello']//迭代3使用.matchAll()捕获组示例：conststring='black*ravenlime*鹦鹉白*海鸥';constregex=/(?.*?)\*(?[a-z0-9]+)/;for(constmatchofstring.matchAll(regex)){让值=匹配[0];让index=match.index;让输入=匹配输入；console.log(`${value}at${index}with'${input}'`);console.log(match.groups.color);console.log(match.groups.bird);}注意不再有/g标志，因为.matchAll()已经包含它，它打印：black*ravenat0with'black*ravenlime*parrotwhite*seagull'blackravenlime*parrotat11with'black*ravenlime*parrotwhite*seagull'limeparrotwhite*seagullat23with'black*ravenlime*parrotwhite*seagull'whiteseagull在美学上可能与原始正则表达式非常相似，执行while循环实现但如前所述，出于上述许多原因，这是一个更好的在不导致无限循环的情况下删除/g的方法。综合示例：4.String.trimStart()和String.trimEnd()trimStart()：去除字符串开头的空格。trimEnd()：删除字符串末尾的空格。情况一：letgreeting="Spacearound";问候语.trimEnd();//"周围的空间";问候语.trimStart();//"周围空间";情况2：5.Symbol.Descriptiondescription是一个只读属性，它返回一个字符串，其中包含对Symbol对象的可选描述。示例1：letmySymbol='MySymbol';letsymObj=Symbol(mySymbol);symObj;//Symbol(我的Symbol)symObj.description;//"MySymbol"例2：6.catch的参数过去可以省略，try/catch语句中的catch语句需要一个变量。try/catch语句有助于在终端级别捕获错误：try{//调用一个不存在的函数undefined_Functionundefined_Function("I'mtrying");}catch(error){//如果上述try中的语句失败，则显示错误控制台.log（错误）；//undefined_Functionisundefined}在某些情况下，所需的错误变量未被使用：try{JSON.parse(text);//<---这将失败并显示“文本未定义”返回真；<---即使有一个错误也没有错误退出}catch(redundant_sometmes)<---这使得错误变量变得多余{returnfalse;}在ES10中，变量捕获错误是可选的，现在可以跳过错误变量：案例1：尝试{JSON.parse(text);returntrue;}catch{returnfalse;}案例2：7.JSON?ECMAScript什么是JSON的超集？请记住，?符号可以解释为JSON?ECMAScript，简而言之就是让ECMAScript与所有支持JSON的文本兼容。ECMAScript已经在标准的JSON.parse部分阐明了JSON确实是它的一个子集，但是因为JSON内容通常可以包含U+2028行分隔符和U+2029段落分隔符，ECMAScript不能。本草案旨在解决这个问题。在此之前，如果您使用JSON.parse()执行具有上述特殊字符的字符串，您只会收到SyntaxError错误消息。这个草案也是向后兼容的，它对用户的唯一影响就是保持原样，即在不支持特殊字符解析的运行环境中保持SyntaxError。8.Well-formedJSON.stringify()此更新修复了字符U+D800到U+DFFF的处理，这些字符有时会进入JSON字符串。这可能是个问题，因为JSON.stringify可能会将这些数字格式化为没有等效UTF-8字符的值，但JSON格式需要UTF-8编码。parse方法使用格式正确的JSON字符串，例如：'{"prop1":1,"prop2":2}';//格式正确的JSON格式字符串请注意，要创建正确的JSON格式字符串，绝对需要在属性名称周围加上双引号。遗漏或任何其他类型的引号都不会生成格式正确的JSON。'{"prop1":1,"meth":()=>{}}';//NotJSONformatstringJSON字符串格式不同于ObjectLiteral，它看起来几乎一样，但是可以使用任何一种引号属性名，并且还可以包含方法（JSON格式不允许使用方法）：letobject_literal={属性：1，方法：()=>{}};无论如何，一切似乎都很好。第一个例子看起来兼容。但它们也是大多数时候都能顺利运行的简单示例！U+2028和U+2029字符的问题在于ES10之前的EcmaScript实际上并不完全支持JSON格式。未转义的行分隔符U+2028和段落分隔符U+2029字符在ES10之前的时代不被接受：对于U+D800-U+DFFF之间的所有字符，如果这些字符潜入JSON格式的字符串中（假设来自数据库记录），您可能会花费数小时试图找出程序其余部分生成解析错误的原因。因此，如果你向eval传递一个像这样的字符串“console.log('hello')”，它将执行JS语句（通过尝试将字符串转换为实际代码），同样JSON.parse将处理你的JSON字符的方式细绳。ES10提出的解决方案是将未配对的代理代码点表示为JSON转义序列，而不是将它们作为单个UTF-16代码单元返回。9.稳定的Array.prototype.sort()V8之前的实现对包含超过10个项目的数组使用不稳定的快速排序算法。稳定的排序算法是指两个具有相同键的对象在已排序输出中的出现顺序与它们在未排序输入中的顺序相同。但现在已经不是这样了，ES10提供了稳定的数组排序：varfruit=[{name:"Apple",count:13,},{name:"Pear",count:12,},{name:"Banana",count:12,},{name:"Strawberry",count:11,},{name:"Cherry",count:11,},{name:"Blackberry",count:10,},{name:"Pineapple",count:10,}];//创建排序函数：letmy_sort=(a,b)=>a.count-b.count;//执行稳定的ES10排序：letsorted=fruit.排序（我的排序）；控制台日志（排序）；控制台输出（项目倒序出现）：Case2:10.newFunction.toString()函数是一个对象，每个对象都有一个.toString()方法，因为它最初存在于Object.prototype.toString()上。所有对象（包括函数）都通过基于原型的类继承从它继承。这意味着我们之前已经有了funcion.toString()方法。但是ES10更进一步，它试图标准化所有对象和内置对象的字符串表示。以下是各种新案例：典型示例：function(){console.log('Hellothere.');}.toString();输出：?function(){console.log('你好。');}直接在方法name.toString()Number.parseInt.toString();?functionparseInt(){[nativecode]}绑定上下文：function(){}.bind(0).toString();?function(){[nativecode]}内置可调用函数对象：Symbol.toString();?functionSymbol(){[nativecode]}动态生成的函数：function*(){}.toString();?function*(){}prototype.toStringFunction.prototype.toString.call({});?Function.prototype.toStringrequiresthat'this'beaFunction"11.BigInt-任意精度整数BigInt是第七种原始类型。BigInt是一种任意精度整数。这意味着变量现在可以表示2?3数字，而不仅仅是9007199254740992.constb=1n;//追加n创建一个BigInt过去不支持大于9007199254740992的整数值。如果超过，该值将锁定为MAX_SAFE_INTEGER+1:constlimit=Number.MAX_SAFE_INTEGER;?9007199254740991limit+1;?9007199254740992limit+2;?9007199254740992<---MAX_SAFE_INTEGER+1exceededconstlarger=9007199254740991n;?9007199254740991nconstinteger=BigInt(9007199254740991);//用数字?9007199254740991n进行初始化constsame=BigInt("9007199254740991");//使用“string”初始化?9007199254740991n12.DynamicimportDynamicimport返回所请求模块的模块命名空间对象的承诺。因此，async/await可以配合使用。案例1：element.addEventListener('click',async()=>{constmodule=awaitimport(`./api-scripts/button-click.js`);module.clickEvent();})案例2：13.标准化globalThis对象。在ES10之前，globalThis还没有标准化。在正常项目中，可以通过以下方式兼容不同平台：vargetGlobal=function(){if(typeofself!=='undefined'){returnself;}if(typeofwindow!=='undefined'){返回窗口；}if(typeofglobal!=='undefined'){returnglobal;}thrownewError('无法定位全局对象');};但即使这也不总是有效。所以ES10添加了globalThis对象，从现在开始它被用来在任何平台上访问全局范围：但即使那样也并不总是有效。所以，ES10增加了globalThis对象，以后在任何平台上都可以用它来访问全局作用域：总而言之，JS是一门动态语言，对web开发非常有利。自2015年ES6出现以来，JS语言经历了动态的演变。在这篇文章中，我们回顾了ES10（2019）中出现的功能，并介绍了一些在ES11（2020）中将保持稳定的功能，因为它们处于状态3，并且可能会在下一版本中标准化。尽管其中许多功能对于开发Web应用程序可能不是必需的，但有些功能可以规范我们以前通过技巧或大量冗长实现的代码。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dev.to/carlillo/12-es...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，本人整理我的很多文件。欢迎加星和改进。可以参考考点面试。也关注公众号，后台回复福利就能看到福利，你懂的。
