zoukankan      html  css  js  c++  java
  • ES9新内容概括

    本文主要介绍ES2018 新出的一些特性

    1.异步迭代

      允许 async/awaitfor-of 一起使用,以串行的方式运行异步操作,达到异步函数的迭代效果。

    async function process(array) {
      for await (let i of array) {
        doSomething(i);
      }
    }

    2.Promise.finally()

      在ES6中,一个Promise链要么成功进入最后一个then()要么失败触发catch()。而实际中,我们可能需要无论Promise无论成功还是失败,都运行相同的代码。例如清除,删除回话,关闭数据库连接等操作。

    ES9中,允许使用finally()来指定最终的逻辑。

    test().then((result)=>{})
          .catch((err)=>{})
          .finally(()=>{})

    3.Rest/Spread属性

      该属性在ES6中是指展开运算符: ... 。在ES6中 只能适用于数组,但是在ES9中 对象也可以使用展开运算符。

      展开运算符的作用:

        1.函数使用 ... 接收未知数量的参数

    //数组
    restParam(1, 2, 3, 4, 5);
    function restParam(p1, p2, ...p3) {
      // p1 = 1
      // p2 = 2
      // p3 = [3, 4, 5]
    }
    
    //对象
    var obj = {
             a: 1,
             b: 2,
             c: 3
         }
    foo(obj)
    function foo({a, ...param}) {
           console.log(a);    //1
           console.log(param)     //{b: 2, c: 3}
     }

        2.展开运算

    //数组:
            const values = [99, 100, -1, 48, 16];
            console.log( Math.max(...values) ); // 100
    //对象:
            var obj = {
                a: 1,
                b: 2,
                c: 3
            }
            const { a, ...param } = obj;
            console.log(a)     //1
            console.log(param) //{b: 2, c: 3}
            

        对象的用法1---浅拷贝

     1         var obj = {
     2             name: 'LinDaiDai',
     3             looks: 'handsome',
     4             foo() {
     5                 console.log('old');
     6             },
     7             set setLooks(newVal) {
     8                 this.looks = newVal
     9             },
    10             get getName() {
    11                 console.log(this.name)
    12             }
    13         }
    14 
    15         var cloneObj = {...obj};
    16         cloneObj.foo = function() {
    17             console.log('new')
    18         };
    19         console.log(obj)     
    20         // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), get getName:f getName(), set setLooks: f setLooks(newVal)}
    21         console.log(cloneObj)
    22         // { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), getName: undefined, setLooks: undefined }
    23         obj.foo()
    24         // old
    25         cloneObj.foo()
    26         // new 

        对象的用法2---合并对象

    const obj1={a:1,b:2};
    const obj2={c:3,d:4};
    const obj3={...obj1,...obj2};
    console.log(obj3)    //{a: 1, b: 2, c: 3, d: 4}
    //同:
    const merged = Object.assign({}, obj1, obj2);

    4.正则表达式---命名捕获组

      4.1 JavaScript正则表达式使用exec()匹配能够返回一个包含匹配的字符串的类数组。

      先上一个对比案例

    //ES9使用了符号 ?<name>  
    const reDate = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/,
                  match = reDate.exec('2018-08-06')
            console.log(match);
            // [2018-08-06, 08, 06, 2018, groups: {day: 06, month: 08, year: 2018}]
            
            //此时可以使用groups对象来获取年月日
            console.log(match.groups.year) // 2018
            console.log(match.groups.month) // 08
            console.log(match.groups.day)  // 06
    //ES6命名捕获的方式
            const reDate = /(d{4})-(d{2})-(d{2})/,
                  match = reDate.exec('2018-08-06');
            console.log(match);
            // [2018-08-06, 2018, 08, 06]
            
            // 这样就可以直接用索引来获取年月日:
            match[0] //2018-08-06
            match[1] // 2018
            match[2] // 08
            match[3] // 06

       ES9的命名捕获组的写法相当于是给每个匹配项都添加了一个名字(?<name>),然后存储到返回值match中。match多了一个属性groups,但是match的长度没有变化。(是作为match的一个隐藏属性?)

      4.2 结合replace()

    const reDate = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/,
          d = '2018-08-06'
          USADate = d.replace(reDate, '$<month>-$<day>-$<year>');
    console.log(USADate);
    // 08-06-2018

    5.正则表达式---反向断言

      先行断言 VS 反向断言

    6.正则表达式---新增标记 s

      i:不区分大小写;

      g:全局搜索;

      m:多行查找;

      s:允许终止符的出现---正则表达式中点 匹配除回车外的任何单字符,标记s改变这种行为; 

    // 
    的换行
    console.log(/hello.world/.test('hello
    world'));  // false
    
    console.log(/hello.world/s.test('hello
    world')) // true
    // 
    的回车
    console.log(/hello.world/.test('hello
    world'))     //false
    console.log(/hello.world/s.test('hello
    world'))    //true
    // . 匹配除回车外的任何字符
    console.log(/hello.world/s.test(`hello
    world`))   // true
    console.log(/hello.world/.test(`hello
    world`))   // false

    7.正则表达式---Unicode转义

      形式为  p{..}P{..} 。并在正则结尾使用 u 进行设置

        const reGreekSymbol = /p{Script=Greek}/u;  //Greek 是希腊语
        console.log(reGreekSymbol.test('π')); // true

    参考地址:https://juejin.im/post/5b685ed1e51d4533f52859e8 

  • 相关阅读:
    Eclipse下载
    Java为什么需要基本类型
    今日学到乱写
    图解HTTP——阅读笔记
    HashMap以及ConcurrentHashMap
    别个代码阅读学习(一)
    nodeJs配置相关以及JSON.parse
    数据库设计那些事儿
    数据库特训系列1——基础拾遗
    机器学习之词语识别——记录
  • 原文地址:https://www.cnblogs.com/waterFowl/p/9450838.html
Copyright © 2011-2022 走看看