在这里,无涯教程将了解ES9中的新函数。从了解异步生成器开始。
可以使用 async 关键字使异步生成器异步。下面给出了用于定义异步生成器的语法-
async function* generator_name() { //statements }
以下示例显示了一个异步生成器,该生成器在每次调用生成器的 next()方法时都返回Promise。
<script> async function* load(){ yield await Promise.resolve(1); yield await Promise.resolve(2); yield await Promise.resolve(3); } let l = load(); l.next().then(r=>console.log(r)) l.next().then(r=>console.log(r)) l.next().then(r=>console.log(r)) l.next().then(r=>console.log(r)) </script>
上面的代码输出如下:
{value: 1, done: false} {value: 2, done: false} {value: 3, done: false} {value: undefined, done: true}
异步可迭代对象无法使用传统的for..of循环语法进行迭代,因为它们返回了Promise。 ES9引入了等待循环以支持异步迭代。
下面给出了使用等待循环的语法,其中,
在每次迭代中,将不同属性的值分配给 variable ,并且可以使用const,let或var声明变量。
for await (variable of iterable) { statement }
以下示例显示了使用等待循环来迭代异步生成器。
<script> async function* load(){ yield await Promise.resolve(1); yield await Promise.resolve(2); yield await Promise.resolve(3); } async function test(){ for await (const val of load()){ console.log(val) } } test(); console.log('end of script') </script>
上面代码的输出将如下所示-
链接:https://www.learnfk.comhttps://www.learnfk.com/es6/es9-newfeatures.html
来源:LearnFk无涯教程网
end of script 1 2 3
下面的示例使用wait循环迭代数组。
<script> async function fntest(){ for await (const val of [10,20,30,40]){ console.log(val) } } fntest(); console.log('end of script') </script>
上面的代码输出如下:
end of script 10 20 30 40
ES9支持对对象使用Rest和Spread运算符。
下面的示例说明将rest运算符与对象一起使用。学生的age属性的值将被复制到age变量中,而其余属性的值将使用rest语法`...`被复制到另一个变量中。
<script> const student = { age:10, height:5, weight:50 } const {age,...other} = student; console.log(age) console.log(other) </script>
上面代码的输出如下:
10 {height: 5, weight: 50}
散布运算符可用于组合多个对象或克隆对象。这在以下示例中显示-
<script> //spread operator const obj1 = {a:10,b:20} const obj2={c:30} //clone obj1 const clone_obj={...obj1} //combine obj1 and obj2 const obj3 = {...obj1,...obj2} console.log(clone_obj) console.log(obj3) </script>
上面代码的输出将如下所示-
链接:https://www.learnfk.comhttps://www.learnfk.com/es6/es9-newfeatures.html
来源:LearnFk无涯教程网
{a: 10, b: 20} {a: 10, b: 20, c: 30}
finally()会在承诺兑现后执行,无论其结果如何。该函数返回一个promise。它可以用于避免promise的 then()和 catch()处理程序中的代码重复。
下面提到的语法用于函数 finally()。
promise.finally(function() { }); promise.finally(()=> { });
以下示例声明了一个异步函数,该函数在延迟3秒后返回正数的平方。如果传递负数,该函数将引发错误。无论承诺被拒绝还是已解决,在两种情况下都将执行finally块中的语句。
<script> let asyncSquareFn = function(n1){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(n1>=0){ resolve(n1*n1) } else reject('NOT_POSITIVE_NO') },3000) }) } console.log('Start') asyncSquareFn(10)//modify to add -10 .then(result=>{ console.log("result is",result) }).catch(error=>console.log(error)) .finally(() =>{ console.log("inside finally") console.log("executes all the time") }) console.log("End"); </script>
上面代码的输出如下所示
Start End //after 3 seconds result is 100 inside finally executes all the time
从ES7开始,标记模板符合以下转义序列的规则-
Unicode转义序列使用"\u" 表示,例如\u2764\uFE0F
Unicode代码点转义序列使用"\u {}" 表示,例如\u {2F}
十六进制转义序列用"\x" 表示,例如\xA8
八进制立即数转义序列用""表示,后跟一个或多个数字,例如\125
在ES2016及更早版本中,如果将无效的转义序列与加标签的函数一起使用,则会引发语法错误,如下所示-
//带有无效 unicode 序列的标记函数 myTagFn`\unicode1` // 语法错误:格式错误的 Unicode 字符转义序列
但是,与早期版本不同,ES9会将无效的unicode序列解析为undefined,并且不会引发错误。这在以下示例中显示-
<script> function myTagFn(str) { return { "parsed": str[0] } } let result1 =myTagFn`\unicode1` //无效的 Unicode 字符 console.log(result1) let result2 =myTagFn`\u2764\uFE0F`//有效的 unicode console.log(result2) </script>
上面代码的输出将如下所示-
链接:https://www.learnfk.comhttps://www.learnfk.com/es6/es9-newfeatures.html
来源:LearnFk无涯教程网
{parsed: undefined} {parsed: "❤️"}
ES9引入了一个特殊的属性 raw ,该属性可用于tag函数的第一个参数。此属性使您可以在输入原始字符串时访问它们,而无需处理转义序列。
<script> function myTagFn(str) { return { "Parsed": str[0], "Raw": str.raw[0] } } let result1 =myTagFn`\unicode` console.log(result1) let result2 =myTagFn`\u2764\uFE0F` console.log(result2) </script>
上面的代码输出如下:
{Parsed: undefined, Raw: "\unicode"} {Parsed: "❤️", Raw: "\u2764\uFE0F"}
在正则表达式中,点运算符或点号用于匹配单个字符。 。点运算符跳过换行符,如\n,\r ,如以下示例所示-
console.log(/Learnfk.Point/.test('Learnfk_Point')); //true console.log(/Learnfk.Point/.test('Learnfk\nPoint')); //false console.log(/Learnfk.Point/.test('Learnfk\rPoint')); //false
正则表达式模式表示为/ regular_expression/。 test()方法采用字符串参数并搜索regex模式。在上面的示例中, test()方法搜索以Learnfk开头,后跟任何单个字符并以Point结尾的模式。如果在Learnfk和Point之间的输入字符串中使用\n 或\r ,则test()方法将返回false。
true false false
ES9引入了一个新标记- DotAllFlag(\s),可与Regex一起使用以匹配行终止符和表情符号。这在以下示例中显示-
console.log(/Learnfk.Point/s.test('Learnfk\nPoint')); console.log(/Learnfk.Point/s.test('Learnfk\rPoint'));
上面代码的输出将如下所述-
true true
在ES9之前,捕获组是通过索引访问的。 ES9允许无涯教程为捕获组分配名称。下面给出了相同的语法-
(?<Name1>pattern1)
const birthDatePattern = /(?<myYear>[0-9]{4})-(?<myMonth>[0-9]{2})/; const birthDate = birthDatePattern.exec('1999-04'); console.log(birthDate.groups.myYear); console.log(birthDate.groups.myMonth);
上面代码的输出如下所示-
1999 04
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)