ES9 - 新函数

ES9 - 新函数 首页 / ES6入门教程 / ES9 - 新函数

在这里,无涯教程将了解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 await of loop

异步可迭代对象无法使用传统的for..of循环语法进行迭代,因为它们返回了Promise。 ES9引入了等待循环以支持异步迭代。

下面给出了使用等待循环的语法,其中,

  • 在每次迭代中,将不同属性的值分配给 variable ,并且可以使用const,let或var声明变量。

  • iterable − 要迭代其可迭代属性的对象。
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

Rest/Spread 属性

ES9支持对对象使用Rest和Spread运算符。

例: Object and Rest Operator

下面的示例说明将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}

例: Object and Spread operator

散布运算符可用于组合多个对象或克隆对象。这在以下示例中显示-

<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}

Promise:finally()

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

微服务架构核心20讲 -〔杨波〕

Python核心技术与实战 -〔景霄〕

OpenResty从入门到实战 -〔温铭〕

SQL必知必会 -〔陈旸〕

人人都能学会的编程入门课 -〔胡光〕

分布式系统案例课 -〔杨波〕

基于人因的用户体验设计课 -〔刘石〕

Dubbo源码剖析与实战 -〔何辉〕

结构写作力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)