ES10功能的完整指南摘要

本文主要介绍ES10功能的完整指南，将与您分享如下：

ES10只是一个草稿。但是除了Object.fromEntries之外，Chrome的大部分功能都已经实现了，为什么不早点开始探索呢？当所有浏览器都开始支持它时，你出人头地只是时间问题。

在新的语言特性方面，ES10虽然没有ES6重要，但确实增加了一些有趣的特性(其中一些目前在浏览器中无法工作： 2019 . 2 . 21)

箭头功能无疑是ES6中最受欢迎的新功能。ES10会是什么？

BigInt-任意精度整数

BigInt是第七种基本类型。

BigInt是一个任意精度的整数。这意味着变量现在可以表示数字，而不仅仅是9007199254740999。

const b=1n//追加n创建BigInt。过去，不支持大于9007199254740992的整数值。如果超过，该值将被锁定为MAX_SAFE_INTEGER 1:

常量限制=数字。MAX _ SAFE _ INTEGER9007199254740991限制1；9007199254740992限制2；9007199254740992-max _ safe _ integer 1 excededconst较大=9007199254740991n9007199254740991整数=big int(9007199254740991)；//初始化为number9007199254740991 const same=bigint(' 9007199254740991 ')；//用'string'9007199254740991 type of初始化

类型为10；的“数字”类型为10n“Bigint”等于运算符可用于两种类型：之间的比较

10n===Bigint(10)；true10n==10真正的数学运算符只能在自己的类型：中工作

200 n/10 n 20 n 200 n/20不清楚类型错误：不能混合bigint和其他类型，请使用显式转换-运算符可以操作但不能使用

-100n-100n未捕获的typeerror :无法将bigint值转换为数字当您阅读本文时，matchAll可能已经在Chrome C73中正式实现了3354。如果没有，还是值得一看的。尤其是如果你是正则表达式(regex)爱好者。

string . prototype . matchell()

如果运行Google Search JavaScript字符串match all，第一个结果会如下：正则表达式“match all”怎么写？

最佳结果建议将String.match与正则表达式和/g一起使用，或将RegExp.exec与/g一起使用，或将RegExp.test与/g一起使用。

首先，让我们看看旧规范是如何工作的。

String.match使用字符串参数只返回第一个匹配项：

让字符串=' Hellolet matches=string . match(' l ')；console.log(匹配[0])；//“l”结果是单个“l”(注意：匹配项存储在匹配项[0]中，而不是匹配项中)

在“hello”中搜索“l”只会返回“l”。

使用string.match和regex参数也是如此：

让我们使用正则表达式/l/来查找字符串“hello”中的“l”字符：

让字符串=' Hellolet matches=string . match(/l/)；console.log(匹配[0])；//'l' add /g mix

让字符串=' Hello让ret=string . match(/l/g)；//(2) ["l "、" l "]；很好，我们使用ES10方法获得了多个匹配，并且它总是有效。

那么为什么要使用新的matchAll方法呢？在我们更详细地回答这个问题之前，让我们先看看捕获组。如果没有其他事情发生，你可能会学到一些关于正则表达式的新知识。

正则表达式捕获组

在正则表达式中捕获组只从()括号中提取一个模式，您可以使用/regex/。exec(字符串)和string.match来捕获组。

常规捕获组是通过在模式中包装模式来创建的，但是要在结果对象上创建group属性，它是：(？名称模式).

要创建新的组名，只需追加？因此，模式匹配将变成group.name并附加到匹配对象。以下是一个例子：

字符串样本匹配：

match . group . color和match . group . bird就是在这里创建的：

const string='黑色*乌鸦石灰*鹦鹉白色*海鸥'；const regex=/(？颜色。*?)\*(?bird[a-z0-9])/g；while(match=regex . exec(string)){ let value=match[0]；让index=match.index让input=match.inputconsole.log(`${value}位于${index}处，带有' ${input} ' `);console . log(match . groups . color)；console . log(match . groups . bird)；}需要多次调用regex.exec方法来遍历整个搜索结果集。什么时候？在每次迭代中调用exec，将显示下一个结果(它不会立即返回所有匹配项。)，所以使用while循环。

输出如下：

黑色*乌鸦在0与'黑色*乌鸦石灰*鹦鹉白色*海鸥'黑色乌鸦石灰*鹦鹉在11与'黑色*乌鸦石灰*鹦鹉白色*海鸥'石灰鹦鹉白色*海鸥在23与'黑色*乌鸦石灰*鹦鹉白色*海鸥'白色海鸥

但奇怪的是：

如果从该正则表达式中删除/g，将总是在第一个结果上创建一个无限循环。这在过去是一种巨大的痛苦。想象一下，当您从数据库接收到一个正则表达式时，您不确定它的末尾是否有/g，所以您必须首先检查它。很好的理由。matchAll()

当与捕获组一起使用时，它会更优雅，捕获组只是使用()提取模式的正则表达式的一部分。它返回一个迭代器而不是数组，迭代器本身是有用的。迭代器可以使用扩展运算符(…)转换为数组。它避免了带有/g标志的正则表达式，并且在从数据库或外部源检索未知正则表达式并将它们与过时的RegEx对象一起使用时非常有用。用RegEx对象创建的正则表达式不能用点(.)链接。)运算符。高级： RegEx对象改变了内部。lastindex属性，用于跟踪最后一个匹配位置，在复杂情况下可能会导致严重损坏。怎么会？matchAll()工作？

让我们尝试匹配单词hello中字母e和l的所有实例，因为迭代器被返回，我们可以使用for…of循环遍历它：

//匹配字母“e”或“l”的所有出现，让迭代器=“hello”。match all(/[El]/)；for(迭代器的常量匹配)console . log(match)；这一次，您可以跳过/g，而。matchall方法不需要它。结果如下：

[ 'e '，index: 1，input: 'hello' ] //迭代1[ 'l '，index: 2，input: 'hello' ] //迭代2[ 'l '，index: 3，input: 'hello' ] //迭代3

使用捕获组的示例。matchAll():matchAll具有上面列出的所有优点。它是一个迭代器，可以被for…of循环遍历。这就是整个语法的区别。

const string='黑色*乌鸦石灰*鹦鹉白色*海鸥'；const regex=/(？颜色。*?)\*(?bird[a-z0-9])/；for(string . MATCHALL(regex)的常量匹配){ let value=match[0]；让index=match.index让input=match.inputconsole.log(`${value}位于${index}处，带有' ${input} ' `);console . log(match . groups . color)；console . log(match . groups . bird)；}请注意没有/g标志，因为。matchAll()已经包含它，打印如下：

黑色*乌鸦在0与'黑色*乌鸦石灰*鹦鹉白色*海鸥'黑色乌鸦石灰*鹦鹉在11与'黑色*乌鸦石灰*鹦鹉白色*海鸥'石灰鹦鹉白色*海鸥在23与'黑色*乌鸦石灰*鹦鹉白色*海鸥'白色海鸥

也许它与美学中的原始正则表达式非常相似，它实现了while循环。但是如前所述，由于上面提到的许多原因，这是一个更好的方法，移除/g不会导致无限循环。

动态导入

现在，您可以将导入分配给变量：

element . addeventlistener(' click '，async()={ const module=wait import(`)。/API-scripts/button-click . js `)；module . ClickEvent()；})Array.flat()

平面多维数组：

让multi=[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()；//[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]Array.flatMap()

让数组=[1，2，3，4，5]；array.map(x=[x，x * 2])；让数组=[1，2，3，4，5]；array.map(x=[x，x * 2])；结果：

[Array(2)，Array(2)，Array(2)，Array(2)，Array(2)]0: (2) [1，2]1: (2) [2，4]2: (2) [3，6]3: (2) [4，8]4: (2) [5，10]

使用平面地图方法：

array.flatMap(v=[v，v * 2])；[1，2，2，4，3，6，4，8，5，10]对象

将键值对列表转换为对象：

让obj={苹果： 10，橘子： 20，香蕉： 30 }；让条目=对象条目(obj)；条目；(3) [Array(2)，Array(2)，Array(2)] 0: (2) ['apple '，10] 1: (2) ['orange '，20] 2: (2) ['banana '，30]let from entries=object . from entries(entries)；{苹果： 10，橘子： 20，香蕉： 30} string.trimstart()和String.trimEnd()

让问候语=周围的空间；hello . trimend()；//“周围空间”；hello . trim start()；//“周围空间”；格式良好的JSON.stringify()

此更新修复了字符U D800到U DFFF的处理，有时会输入JSON字符串。这可能是一个问题，因为JSON.stringify可能会将这些数字格式化为没有UTF-8字符的值，但是JSON格式需要UTF-8编码。

解析方法使用格式良好的JSON字符串，例如：

{“prop 1”: 1，“prop 2”: 2 } '；//一个格式良好的JSON格式字符串注意，要创建一个具有正确JSON格式的字符串，绝对需要在属性名周围加上双引号。缺少引号或任何其他类型的引号都不会生成格式良好的JSON。

{ "prop1" : 1，' meth ' :()={ } } '；//Not JSON格式stringJSON字符串格式不同于Object Literal，后者看起来几乎一样，但是可以使用任何类型的引号将属性名称括起来，也可以包含方法(JSON格式不允许方法):

let object _ literal={ property : 1，meth :()={ } }；不管怎样，一切似乎都很好。第一个例子似乎是兼容的。但它们也是简单的例子，在大多数情况下都可以顺利工作！

U 2028和U 2029字符

问题是ES10之前的EcmaScript实际上并不完全支持JSON格式。在ES10之前的时代，不接受非转义行分隔符U 2028和段落分隔符U 2029字符：

对于ud800和udfff之间的所有字符也是如此

如果这些字符偷偷进入JSON格式的字符串(假设它们来自数据库记录)，您可能会花几个小时试图弄清楚为什么程序的其余部分会产生解析错误。

因此，如果您传递像eval "console.log(' hello ')这样的字符串，它将执行JavaScript语句(通过尝试将字符串转换为实际代码)，这类似于JSON.parse处理您的JSON字符串的方式。

稳定数组。原型。排序()

V8之前的实现对包含10个以上项目的数组使用了不稳定的快速排序。

一个稳定的排序算法是当两个具有相同键值的对象在排序的输出中以与未排序的输入相同的顺序出现时。但现在已经不是这样了。ES10提供稳定的阵列排序：

var水果=[ { name: 'Apple '，count: 13，}，{ name: 'Pear '，count: 12，}，{ name: 'Banana '，count: 12，}，{ name: '草莓'，count: 11，}，{ name: 'Cherry '，count: 11，}，{ name 3: '黑莓'，count 3: 11//创建排序函数：让my _ sort=(a，b)=a . count-b . count；//执行稳定的ES10排序：让sorted=水果. sort(my _ sort)；console.log(已排序)；控制台输出(项目以相反顺序出现):

新的函数

该函数是一个对象，每个对象都有一个. toString()方法，因为它最初存在于Object.prototype.toString()上。包括函数在内的所有对象都是通过基于原型的类继承从它那里继承的。

这意味着我们以前有funcion.toString()方法。

然而，ES10进一步尝试标准化所有对象和内置函数的字符串表示。以下是各种新案例：

典型示例：

function () { console.log('你好，这里');}.toString()；控制台输出(函数体：的字符串格式)

函数(){ console.log('你好。);}以下是剩余的示例：

直接在方法名中。toString()

number . Parseint . ToString()；function Parsent(){[native code]}绑定上下文：

function () { }。绑定(0)。toString()；Function () {[nativecode]}具有内置的可调用函数对象：

symbol . ToString()；函数符号(){[nativecode]}动态生成的函数：

函数* () { }。toString()；函数*(){ }原型. toString

function . prototype . ToString . call({ })；功能。原型。tostring要求“这”是一个可选的“捕获绑定”函数

过去，try/catch语句中的catch语句需要一个变量。Try/catch语句有助于捕获终端级错误：

尝试{ //调用不存在的函数undefined _ Function undefined _ Function(‘我在尝试’)；}catch(错误){ //如果上面try中的语句失败，则显示错误。log(错误)；//undefined _ function未定义}在某些情况下，所需的错误变量未使用：

尝试{ JSON . parse(text)；//-如果“文本未定义”返回true，此操作将失败；-即使有一个{ catch(redundancy _ sometes)也可以无错误退出-这使得错误变量冗余{ return false}编写这段代码的人试图强制true，从而退出了try子句。然而，事实并非如此

(()={try {JSON。parse (text)返回true } catch(err){ return false } })()=false在ES10中，捕获错误的变量是可选的

现在可以跳过错误变量：

尝试{ JSON . parse(text)；返回真；} catch { return false}目前无法测试前面例子中try语句的结果，但这部分一旦出来我会更新。

标准化全局该对象

全球这在ES10之前没有标准化。

在产品代码中，您可以自己编写这个怪物，并在多个平台上将其“标准化”为：

var GetGlobal=function(){ if(type of self！==' undefined '){ return self；} if(窗口类型！=='undefined') {返回窗口；} if (typeof global！=='undefined') {返回全局；}抛出新错误('无法定位全局对象')；};但即使这样也不总是奏效。因此，ES10增加了globalThis对象，从此可以在任何平台上访问全局范围：

//访问全局数组构造函数globalThis。数组(0，1，2)；[0，1，2]//类似于ES5之前的window . v={ flag : true } global this . v={ flag 3360 true }；console . log(GlobalTHiS . v)；{ flag : true }符号.描述

描述是一个只读属性，它返回符号对象的可选描述。

让我的符号=我的符号；让symObj=Symbol(mySymbol)；symObj//Symbol(我的符号)symObj.description//“我的符号”有语法

也就是unix用户熟悉的shebang。它指定了一个解释器(什么将执行JavaScript文件？)。

ES10标准化，我就不详细介绍了，因为从技术上讲，它不是真正的语言特性，但它基本统一了JavaScript在服务器端的执行方式。

$ ./index.js改为

$ node index.jsES10类：私有、静态和公共成员

新的语法字符#octothorpe(hash标记)现在用于直接在类体的范围内定义变量、函数、getter和setter、构造函数和类方法。

下面是一个没有意义的例子，只关注新语法：

类Raven扩展Bird { # state={ egg 3360 10 }；//getter get # eggs(){ return state . eggs；}//setter set #eggs(value) { this。# state.eggs=value}#lay() { this。#鸡蛋；} constructor(){ super()；这个。# lay . bind(this)；}#render() {/* paint UI */}}说实话，我觉得会让语言更难读。

代码部署后可能存在的bug无法实时获知。为了事后解决这些bug，需要花费大量时间调试日志。顺便推荐一个不错的bug监控工具Fundebug。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。