zoukankan      html  css  js  c++  java
  • ES2020新特性记录

    1.可选链操作符

    // old
    let ret = obj && obj.first && obj.first.second
    // new
    let ret = obj?.first?.second

    2.空位合并操作符

    // old
    let c = a ? a : b
    let c = a || b
    // new 如果表达式在??的左侧运算符求值为 undefined 或 null,就返回其右侧默认值。 (0, false 标示有效值)
    let c = a ?? b

    3.Promise.allSettled

    Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all 调用会立即终止,并返回一个reject的新的 Promise 对象。
     
    Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路, 也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。

    4.String.prototype.matchAll

       old

    function collectGroup1 (regExp, str) {
      const matches = []
      while (true) {
        const match = regExp.exec(str)
        if (match === null) break
        matches.push(match[1])
      }
      return matches
    }
    console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
    // [ 'foo', 'bar', 'baz' ]

     new 

    function collectGroup1 (regExp, str) {
      let results = []
      for (const match of str.matchAll(regExp)) {
        results.push(match[1])
      }
      return results
    }
    console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
    // ["foo", "bar", "baz"]
    

    5.Dynamic import

    el.onclick = () => {
      import('/modules/my-module.js')
        .then(module => {
          // Do something with the module.
        })
        .catch(err => {
          // load error;
        })
    }
    
    let module = await import('/modules/my-module.js');
    

    6.BigInt

    创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可

    const aNumber = 111;
    const aBigInt = BigInt(aNumber);
    aBigInt === 111n // true
    typeof aBigInt === 'bigint' // true
    typeof 111 // "number"
    typeof 111n // "bigint"
    
    在大多数操作中,不能将 BigInt与Number混合使用。比较Number和 BigInt是可以的,但是不能把它们相加。
    
    1n < 2 
    // true
    
    1n + 2
    // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
    

    7.globalThis

    // ES10之前的解决方案
    const getGlobal = function(){
      if(typeof self !== 'undefined') return self
      if(typeof window !== 'undefined') return window
      if(typeof global !== 'undefined') return global
      throw new Error('unable to locate global object')
    }
    
    // ES10内置
    globalThis.Array(0,1,2) // [0,1,2]
    
    // 定义一个全局对象v = { value:true } ,ES10用如下方式定义
    globalThis.v = { value:true }
    
    globalThis 目的就是提供一种标准化方式访问全局对象
    

      

      

  • 相关阅读:
    【Lintcode】91 最小调整代价
    【LintCode】29 交叉字符串
    十二、动态规划
    HttpClient的简单使用
    ajax跨域请求
    session共享
    八大排序算法
    MAC 脚本批量启动应用
    知识点整理-bio、nio的简单demo
    知识点整理-数组如何实现随机访问?
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/13791772.html
Copyright © 2011-2022 走看看