ES6~ES11

1、let和const

  let a   /  let a,b,c,d  /  let a=10
  特點:
  1、變量不能重復聲明
  2、作用域為塊級作用域(塊級,全局,函數(shù),eval)
  3、不存在變量提升
  4、不影響作用域鏈
  const a='hello'
  特點:
  1、要賦予初始值
  2、通常大寫(小寫也行)
  3、常量的值不能修改
  4、塊級作用域
  5、對于數(shù)組和對象的元素進行修改不會報錯(不算對常量進行修改)
  

2、解構賦值

  1、數(shù)組結構
  const array = ['云間月','林間雪','心上人']
  let [a,b,c] = array  //a:云間月,b:林間雪,c:心上人
  2、對象結構
  const ruleForm = {
    page:20,
    size:10,
    total:100,
    fun:function(){
      console.log('頁碼20,每頁10條,總數(shù)100')
    }
  }
  let {page,size,total,fun} = ruleForm //20,10,100,和fun這個函數(shù)
  fun();//可以直接調(diào)用

3、模板字符串

  引入字符串的方式 `` (反引號)
  特點:
  1、內(nèi)容中可以直接出現(xiàn)換行符(單引號或者雙引號則不行)
  2、變量拼接
  let a = '魏海量'
  console.log(`${a}一杯就倒`) //魏海量一杯就倒
  必須使用${}的形式

4、簡化對象的寫法

  ES6允許在大括號里面直接寫入變量和函數(shù),作為對象的屬性和方法--更加簡潔
  let time= '12:00'
  let date = function(){
    return new Date()
  }
  const TEMP = {time,date,};//12:00,當前時間
  等同于 
  const TEMP = {
    time:time,
    date:date
  }
  函數(shù)簡化:
  let fun = function(a,b){
    console.log(a,b) 
  }
  等同于
  fun(a,b){
    console.log(a,b)
  }

5、箭頭函數(shù)及其聲明特點

  使用 => 定義函數(shù)
  原始聲明:
  let fun = function(a,b){console.log(a+b)}
  原始調(diào)用 fun(1,2);//3
  ES6聲明:
  let fun = (a,b) =>{console.log(a+b)}
  ES6調(diào)用 fun(1,2);//3
  特點:
  1、this是靜態(tài)的,始終指向函數(shù)聲明時所在作用域下的this的值
    2、不能作為構造函數(shù)實例化對象
    let fun  = (a,b) =>{
      console.log(a+b)
    }
    let funs = new fun(1+2);//報錯
  3、不能使用arguments變量
  let fun = () =>{console.log(arguments)}
  fun(1,2,3);//報錯 argements未定義
  4、箭頭函數(shù)的簡寫
    01、省略小括號,當形參有且又有一個的時候可簡寫
    例:let fun = (a) =>{console.log(a)}
    等同于 let fun= a =>{console.log(a)}
    調(diào)用:fun(1);//1
    02、省略花括號,當代碼體只有一條語句的時候,此時return必須省略,且語句的執(zhí)行結果就是函數(shù)的返回值
    例:let fun = a =>{return a+a};
    等同于 let fun = a => a+a
    調(diào)用:console.log(fun(1));//2
  5、使用場景:
    01、適合與this無關的回調(diào)、定時器、數(shù)組的方法回調(diào)
    02、不適合與this有關的回調(diào),事件的回調(diào),對象的方法等

6、允許給函數(shù)的參數(shù)(形參)賦予初始值

  原始:function add(a,b,c){return a+b+c}
  add(1,2);//undefined
  ES6:function add(a,b,c=3){return a+b+c}
  add(1,2);//6
  特點:
  1、形參初始值,具有默認值的參數(shù),一般放到后面
  2、可以與解構賦值相結合
    例:
    function fun({name='王朱',age}){return name+'年齡'+age}
    fun({age:10});//王朱年齡10

7、rest參數(shù)(用于代替arguments)

  用于獲取函數(shù)的實參是ES6獲取實參的方式
  原始:
    function fun(){console.log(arguments)}
    fun('周米粒,暖樹,景清');//{0:‘周米粒’,1:'暖樹',2:'景清'} 是一個對象
  ES6:
  function(...params){console.log(params)}
  fun('周米粒,暖樹,景清');//['周米粒,暖樹,景清'] 是一個數(shù)組,可以使用數(shù)組的方法
  限制:當有多個參數(shù)時,rest參數(shù)必須放到最后
  例:function fun(a,b,...params){console.log(a,b,params)}
  fun(1,2,3,4,5,6,7);//1,2,[3,4,5,6,7]

8、擴展運算符 ...

  擴展運算符能將數(shù)組轉化為逗號分割的參數(shù)序列
  let params = [1,2,3]
  function fun(){console.log(arguments)}
  原始:fun(params);// {0:[1,2,3]} 是一個對象,只有一個參數(shù)
  擴展運算符:fun(...params);//[[1,2,3]] 是一個數(shù)組,有多個參數(shù)
  運用:
      例:const arr = ['aa','bb']
      例:const arr2 = ['dd','ee']
    1、數(shù)組合并
      原始:arr.concat(arr2);//['aa','bb','dd','ee']
      擴展運算符 [...arr,...arr2];//['aa','bb','dd','ee']
    2、數(shù)組的克隆
      let arr3 = [...arr];//['aa','bb'] 如果只是值類型,則可以創(chuàng)建一個新的數(shù)組,如果有引用類型的話,則只是淺拷貝。
    3、將偽數(shù)組轉化為真正的數(shù)組(假如有三個div)
      const arr = document.querySelectAll('div');//對象類型
      let arrs = [...arr];//數(shù)組類型
      例:轉化arguments

9、Symbol(用得少)

  Symbol是ES6引入的一種新的原始數(shù)據(jù)類型,表示獨一無二的值;是js的第七種數(shù)據(jù)類型,類似字符串的數(shù)據(jù)類型。
  特點:
    1、Symbol的值是唯一的,用來解決命名沖突的問題;
    2、Symbol值不能與其它數(shù)據(jù)類型進行運算;
    3、Symbol定義的對象屬性不能使用for...in循環(huán)遍歷,但是可以使用Reflect.ownkeys獲取對象的所有鍵名。
  Symbol創(chuàng)建的幾種方式:
    1、let Sy1 = Symbol();//Symbol()
    2、let Sy2 = Symbol('temp1');//Symbol('temp1')
    3、let Sy3 =Symbol('temp1');//Symbol('temp1)
       console.log(SY2===Sy3);//false 兩個是不一樣的,在內(nèi)部會做區(qū)別,外部無法獲知
    4、let Sy4 = Symbol.for('temp2');//Symbol('tamp2')
       let Sy5 = Symbol.for('temp2');//Symbol('tamp2')
       console.log(SY2===Sy3);//true這樣創(chuàng)建是一樣的
  Symbol的使用場景:向對象中添加屬性和方法
    1、方法1
      let obj = {
        add:()=>{},
        minus:()=>{}
      }
      let methods = {
        add:Symbol('add'),
        minus:Symbol('minus')
      }
      obj[methods.add] = (a)=>{return a+a}
      obj[methods.minus] = (a)=>{return a+a}
    2、方法2
      let obj= {
         name:'temp',
        [Symbol('fun')]:a=>return a+a
      }
  Symbol 還有十一個內(nèi)置屬性
  js的數(shù)據(jù)類型:USONB
    u:undefined
    s:String Symbol
    o:Object
    n:null Number
    b:Boolean

10迭代器(用得少)

  迭代器是一種接口,為各種不同的數(shù)據(jù)結構提供統(tǒng)一的訪問機制,任何數(shù)據(jù)結構只要部署interrator接口(interrator接口是對象的一個屬性:Symbol.interator),就可以完成遍歷操作
  Es6創(chuàng)造一種新的遍歷命令for...of循環(huán),interator主要提供for..of循環(huán)
  具備interator接口的數(shù)據(jù)(可用for...of循環(huán)遍歷)
    1、Array;
    2、arguments;
    3、Set;
    4、Map;
    5、String;
    6、TypeArray;
    7、NodeList;
  例:
    const arr = ['景清','暖樹']
    for(let i of arr){
      console.log(i);//景清,暖樹
    }
    可打印數(shù)組,在得到的數(shù)據(jù)中找到Symbol.interator這個函數(shù)  console.log(arr)
    調(diào)用這個函數(shù),然后打印返回值,可以找到next()方法  let temp = arr[Symbol.interator]()
    之后可以調(diào)用next()方法  temp.next()
  工作原理:
    1、創(chuàng)建一個指針對象,指向當前結構的起始位置
    2、第一次調(diào)用對象的next()方法,指針自動指向數(shù)據(jù)結構的第一個成員
    3、接下來不斷調(diào)用next()方法,指針一直往后移動,直到指向最后一個成員=
    4、每次調(diào)用next()方法返回一個包含value和done 的屬性的對象

11、生成器

 是一種特殊的函數(shù),是一種異步編程的解決方案
 聲明方式:函數(shù)和函數(shù)名之間加 * 號
   function * fun(){console.log('hello')}
   let interator = fun()
   console.log(interator);//返回值是一個迭代器對象
   調(diào)用:interator.next();//hello 調(diào)用的是里面的next()方法
 yield語句
   function * fun(){
     console.log('111');
     yield '第二次調(diào)用';
     console.log('222');
     yield '第三次調(diào)用';
     console.log('333');
   }
   let interator = fun()
   interator.next();//111
   interator.next();//222
   interator.next();//333
 生成器函數(shù)參數(shù)
   function * fun(parmas){
     console.log(params);
     let first = yield 1
     console.log(first)
     let second  = yield 2
     console.log(second)
   }
   let interator = fun('A');//獲取迭代器對象
   interator.next();//A {value:1,done:false}
   //在調(diào)用時可以傳入實參,實參作為yield語句的返回結果(第二次調(diào)用傳入的實參會作為第一個yield語句的返回結果)
   interator.next();//A {value:1,done:false}
   //同樣;第三次調(diào)用的參數(shù)會作為第二個yield語句的返回結果,以此類推

 實例:
   1、回調(diào)地獄函數(shù):
     function fun1(){
       console.log(111)
       function fun2(){
         console.log(222)
         function fun3(){
           console.log(333)
           //...
         }
       }
     }
   2、生成器函數(shù)
     function fun1(){
       console.log(111)
       interator.next();//可傳參數(shù),作為第一個yield語句的返回值
     }
     function fun2(){
       console.log(222)
       interator.next()
     }
     function fun3(){
       console.log(333)
       interator.next()
     }
     function * fn(){
       yield fun1()
       yield fun2()
       yield fun3()
     }
     let interator = fn()
     interator.next()

12、Promise(重要)

ES6引入的異步編程的解決方案,語法上是一個構造函數(shù),用來封裝異步操作,并可以獲取成功或失敗的結果
  基本語法:
  //實例化一個Promise對象,里面的參數(shù)可以是一個異步函數(shù)(例:要封裝的請求),函數(shù)有兩個參數(shù),可以隨便,通常是resove和reject
  const prom = new Promise(functiong(resove,reject){
    function fun(){
      let res = '返回結果(成功)'
      resove(res)
      let res2 = ‘返回結果(失敗)’
      reject(res2)
    }
  })
  //回調(diào)Promise的then()方法,then()有兩個參數(shù),都是函數(shù),函數(shù)有實參,分別是resove()返回的成功數(shù)據(jù),和reject返回的失敗數(shù)據(jù)
  prom.then((res)=>{
    console.log(res)
  },(err)=>{
    console.log(err)
  })
  then()方法的返回結果是一個Promise對象,對象狀態(tài)由函數(shù)的執(zhí)行結果決定:
  1、如果回調(diào)函數(shù)中返回的結果是非Promise類型的屬性,狀態(tài)為成功,返回值為對象的成功的值
  2、如果回調(diào)函數(shù)中返回的結果是Promise類型,則狀態(tài)跟隨返回的Promise的狀態(tài)
  then()方法可以鏈式調(diào)用(解決回調(diào)地獄)
  catch()方法返回錯誤信息 
  例:prom.ctach(res=>{return '正確' }).catch(err=>{console.log('失敗')})

13、Set

Es6提供新的數(shù)據(jù)結構Set(集合),類似于數(shù)組,但是成員都是唯一的;集合實現(xiàn)了interator接口,可使用擴展運算符(...)和for...of進行編輯
  1、集合的屬性和方法
    01、size  返回集合的元素個數(shù)
    02、add  添加一個元素,返回當前的集合
    03、delete  刪除元素,返回Boolean值
    04、has  檢測集合是否包含某個元素,返回Boolean值
    05、clear 清空集合
  2、聲明方式
    let s =  new Set();//typeof=>Object
  3、使用
    let arr = [5,10,5,15]
    let s2 = new Set(arr);//{5,10,15}
    s2.size ;//3
    s2.add(20);//{5,10,15,20}
    s2.delete(2);//{10,15,20}
    s2.has(5);//false
    s2.clear();//{}
    for(let s of s2){
      console.log(s);//可獲得里面的每個值
    }
  4、數(shù)組去重(常用)
    let arr = [1,4,3,3,2,2,3,]
    let arr2 = [...new Set(arr)];//[1,4,2,3]

14、Map

Map數(shù)據(jù)結構,類似于對象,是鍵值對的集合,但是鍵的范圍不限于字符串,各種類型的值都可以當做鍵。Map實現(xiàn)了interator接口,可使用擴展運算符和for...of循環(huán)遍歷
  Map的屬性和方法
    01、size  返回元素個數(shù)
    02、set  添加新的元素,返回當前Map
    03、get  返回鍵名對象的鍵值
    04、has  檢測map中是否含有某個元素,返回Boolean值
    05、清空集合,返回Map(0){}
聲明方式:
  let m = new Map()
使用:
  m.set('name','周米粒');// {'name'=>'周米粒'}
  m.set('fun',function(){});// {'fun'=>function(){}}
  m.size;//2
  m.delete('name');//{'fun'=>function(){}}
  m.get('fun');//function(){}
  m.clear();//map(0){}
  for(let i of  m){console.log(i)};//數(shù)組的形式[鍵,值],[鍵,值]

15、class

更接近傳統(tǒng)語言的寫法;通過class關鍵字=可以定義類,可看作是一個語法糖,大部分功能ES5可以實現(xiàn),新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法
//TODO 有點虛,下次還得再看看

16、數(shù)值擴展

一些方法
  01、Number.isFinite();檢測一個數(shù)值是否為有限數(shù),例:
    Number.isFinite(100);//返回Boolean值
  02、Number.isNaN();//檢測一個數(shù)是否為數(shù)字,例:
    Number.isNaN(22);//返回Boolean值
  03、Number.paseInt()提取整數(shù),例:
    Number.parseInt('521親愛的姑娘');//521
  04、Number.parseFloat提取浮點數(shù),例:
    Number.parseFloat('3211.1多瓦');//3211.1
  05、Number.isInteger();檢測一個數(shù)是否為整數(shù),例:
    Number.isInteger(6.6);//false 返回boolean值
  06、Math.trunc();將數(shù)字的小數(shù)部門抹掉
    Math.trunc(6.6);//6,返回抹去小數(shù)后的整數(shù)
  07、Math.sign();判斷一個數(shù)是正數(shù),負數(shù),零
    Math.sign(66);//1,正數(shù)
    Math.sign(-66);//-1,負數(shù)
    Math.sign(0);//0,零

17、對象方法的擴展

1、Object.is() 判斷兩個值是否相等
    Object.is(66,66);//true
    Object.is(66,61);//false
    Object.is(NaN,NaN);//true,特殊
2、Object.assign()對象的合并
  let Obj1 = {}
  let Obj2 = {}
  Object.assign(Obj1,Obj2);//對象2會把對象1覆蓋,返回合并后的新對象
3、Object.setPrototypeof()設置原型對象;Object.getPrototypeof();獲取原型對象
  const obj1 = {name:'周米粒'}
  const obj2 = {work:'巡山',address:'落魄山'}
  Object.setPrototype(obj1,obj2);設置原型對象
    輸出結果:{name:'周米粒',
    __proto__:{
      work:'巡山',
      address:'落魄山'
    }}
  Object.getPrototypeof(obj1);//獲取原型對象

18、模塊化

將一個大的程序文件,拆分成許多小的程序文件,然后將小文件組合起來
1、好處:
  01、防止命名沖突
  02、代碼復用
  03、更容易維護
2、模塊化規(guī)范產(chǎn)品
  1、CommonJS => NodeJS  Browserify
  2、AMD => requireJS
  3、CMD => sealJS
3、 ES6模塊化語法(在瀏覽器中無法直接使用,我們需要在引入模塊的 <script> 元素上添加type="module" 屬性)
  1、export (暴露) 用于規(guī)定模塊的對外接口
  2、import (引入) 用于輸入其他模塊提供的功能
  例1(Vue):
    01、單獨暴露,全部引入
      export let baseUrl = "192.168.18"
      export function fun(a,b){return a+b}
      使用的地方:
      import * as temp form "js文件路徑"
      console.log(temp)
    02、統(tǒng)一暴露,解構賦值形式引入
      let baseUrl = "192.168.18"
      function fun(a,b){return a+b}
      export {baseUrl,fun}
      使用的地方:
      import {baseUrl,fun} form "js文件路徑"
      console.log(temp)
    03、默認暴露
      export default {
        fun:function(){}
        baseUrl:'192.168.2'
      }
      使用的地方:
      import {default as temp} form "js文件路徑"
      console.log(temp)
  注意:
    1、引入 export default 導出的模塊不用加 {},引入非 export default 導出的模塊需要加 {}
    2、一個文件只能導出一個 default 模塊。
    3、import/export 不能對引入模塊重新賦值/定義
    4、import/export 只能在模塊頂層使用,不能在函數(shù)、判斷語句等代碼塊之中引用

https://zhuanlan.zhihu.com/p/121770261以及尚硅谷視頻)

19、ES7

兩個方法:
  1、includes() 判斷數(shù)組中是否含有某個元素,返回Boolean值
    例:
    const arr = ['白也','白玄','白景']
    console.log(arr.includes('暖樹'));//false
    和indexOf類似,不過返回值不一樣
  2、** 計算一個數(shù)的多少次冪
    例:
    console.log(2 ** 10);//1024
    等同于 Math.pow(2,10)

20、ES8--async

  • async await 相結合可以讓異步代碼像同步代碼一樣;
  • 解決異步編程的方式目前有 生成器函數(shù),Promise;async await;
  • async函數(shù)的返回值為Promise對象
  • Promise對象的結果由async函數(shù)執(zhí)行的返回值決定
  1、async
  使用:
  async fun(){
    //async返回值是一個Promise對象
    //如果返回的結果不是一個Promise類型的對象,返回的結果就是成功的Promise
    return 'Srtring';
    //拋出錯誤,返回的結果是一個失敗的Promise
    throw new Error('錯誤拋出')
    //如果返回值是一個Promise對象(多數(shù)情況下)
    return new Promise((resove,reject)=>{
      resove('成功的數(shù)據(jù)');//返回結果則為成功
      reject('失敗的數(shù)據(jù)');//但會結果則為失敗
    })
  };//函數(shù)那面加一個async
  fun().then(()=>{
    //resole('成功的數(shù)據(jù)')在這里會被得到
  },()=>{
    //reject('失敗的數(shù)據(jù)')在這里會被得到
  })

21、ES8--async await

await表達式:

  • await必須寫在async函數(shù)中(但是async函數(shù)里面不一定要有await)
  • await右側的表達式一般為Promise對象
  • await返回的是Promise成功的值
  • await的Promise失敗了,就會拋出異常,需要通過try...catch捕獲處理
結合使用
  function fun1(){
    return new Promise((resove,reject)=>{
      //getData定義的一個請求數(shù)據(jù)的函數(shù)
      getData(){
        if(res.message=='success'){
          resove(res)
        }else{
          reject(res.message)
        }
      }
    })
  }
  async tempFun(){
    let res = await fun1()
    //res就是請求數(shù)據(jù)的函數(shù)返回的值
  }

22、ES8--對象方法的拓展

示例:
const tempObj = {
  name:'米粒',
  size:'small',
  address:['啞巴湖','落魄山']
}
1、獲取對象的所有鍵
  Object.keys(tempObj);//['name','size','address']
2、獲取對象所有的值
  Object.values(tempObj);//['米粒','small',['啞巴湖','落魄山']]
3、將對象以數(shù)組的形式返回,數(shù)組的第一個值是鍵,第二個值是內(nèi)容
  let temp = Object.entries(tempObj);//[['name','米粒'],[...],[...]]
  使用entries()方法可以方便創(chuàng)建一個map,例:
  const m = new Map(temp);
  {
    {'name'=>'米粒'},
    {'size'=>'small'},
    {'address'=>['啞巴湖','落魄山']}
  }
4、獲取對象屬性的描述對象
  Object.getOwnPropertyDescriptors(tempObj)

23、ES9--擴展運算符與rest參數(shù)

  • rest參數(shù)和擴展運算符在ES6中已經(jīng)引入,不過ES6中只針對于數(shù)組,在ES9中為對象提供了像數(shù)組一樣的rest參數(shù)和擴展運算符
  function fun({p1,p2,...pn}){
    console.log(p1,p2,pn);//'暖樹','景清',{p3:'米粒',p4:'裴錢',p5:'大白鵝'}
  }
  fun({p1:'暖樹',p2:'景清',p3:'米粒',p4:'裴錢',p5:'大白鵝'})
  例2:
  const obj1 = {a:'洛陽',b:'軒轅青峰'}
  const obj2 = {a:'大秦帝',b:'軒轅敬誠'}
  console.log({...obj1,...obj2});//{a:'洛陽',b:'軒轅青峰',a:'大秦帝',b:'軒轅敬誠'}

24、ES9--正則擴展:命名捕獲分組

例(原來的):

let str = '<a 
需求:提取URL和文本
const reg = /<a href = "(.*)">(.*)</a>/
console.log(reg.exec(str));
  返回值為一個數(shù)組,
    1、第一個值是全部的內(nèi)容:'<a 
    2、第二個值是第一個匹配到的結果:"https://www.baidu.com"
    3、第三個值為第二個匹配到的結果:"百度"
    4、groups為 undefined

例(現(xiàn)在的):

let str = '<a 
需求:提取URL和文本
const reg = /<a href = "(?<url>.*)">(?<text>.*)</a>/
console.log(reg.exec(str));
  返回的其他的都一樣,只有groups不同:
  groups:
    text:"百度",
    url:"https://www.baidu.com"

25、ES9--正則擴展:反向斷言

26、ES9--正則擴展:dotAll模式

27、ES10--對象的擴展方法

Object.fromEntries()
創(chuàng)建一個二維數(shù)組
  const arr= [['落魄山','長命','周肥'],['綢繆山','米裕','崔嵬']];
  console.log(Object.fromEntries(arr));
    結果:{'落魄山':'長命,周肥','綢繆山':'米裕,崔嵬'}
  相當于把二維數(shù)組轉化為對象
  ES8的Object.entries()把對象轉化為二維數(shù)組,例:
    console.log(Object.entries({'落魄山':['周肥','長命']}))
    結果:[['落魄山',['周肥','長命']]]

28、ES10的字符串擴展方法

  • str.trimStart()清除字符串左側空白
  • str.trimEnd()清除字符串右側空白
let str = '   紅豆   '
str.trimStart()
str.trimEnd()
然后 str.trim()是清除字符轉兩端的空格

29、ES10--數(shù)組的擴展方法

  • arr.flat(number)將多維數(shù)組轉化為低維數(shù)組,參數(shù)是一個數(shù)組,代表深度,例:
const arr = [1,2,3,[,4,5,6]]
console.log(arr.flat());//[1,2,3,4,5,6]
const arr2 = [1,2,3,[4,5,[6,7]]]
consolog.log(arr2.flat(2));//[1,2,3,4,5,6,7]
const arr5 =[1,[2,[3,[4,[5,[6]]]]]]
console.log(arr5.flat(5));//[1,2,3,4,5,6]
  • arr.flatMap()
const arr = [1,2,3]
const arr1 = arr.map(item=>item*10)
console.log(arr1);//[[10],[20],[30]]
const arr2 = arr.flatMap(item=>item*10)
console.log(arr2);//[10,20,30]

30、ES10--Symbol的擴展

  • Symbol.prototype.description 用于獲取Symbol的字符串描述
let temp  = Symbol('周米粒')
console.log(temp.description);//周米粒

31、ES11--私有屬性

例子:

class person {
  name:'余斗';
  #age:8000;//私有屬性加#
  constructor(name,age){
    this.name = name;
    this.#age = age
  }
}
let man = new person('余斗',8000)
console.log(man ); //{name:'余斗',#age:8000}
單獨某個:
  console.log(man.name);//余斗
  console.log(man.#age);//報錯
獲取私有屬性方式:
  class person {
    name:'余斗';
    #age:8000;//私有屬性加#
    constructor(name,age){
      this.name = name;
      this.#age = age
    }
    intro(){
      console.log(this.#age);//8000
    }
  }

32、ES11--Promise.allSettled

  • Promise.addSettled(Promise數(shù)組),接收的是一個Promise數(shù)組,返回的結果是永遠是成功的狀態(tài),成功的值是每一個Promise的狀態(tài)和結果。
  const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('成功的返回01')
    },1500)
  })
  const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //resolve('成功的返回02')
      reject('失敗的返回02')
    },1500)
  })
  const res = Promise.allSettled;
  結果永遠是成功的,哪怕有Promise是失敗的,但是總的永遠是成功的。
  類似的有:
  Promise.all()
  接收一個Promise數(shù)組,返回結果根據(jù)Promise的狀態(tài)決定,全部成功則為成功,有一個失敗則為失敗。

33、ES11-String.prototype.matchAll

  • 用于得到正則批量匹配的結果
  let str = `
    <ul>
      <li>
        <a>霸王別姬</a>
        <p>上映時間:不曉得</p>
      </li>
      <li>
        <a>老酒館</a>
        <p>上映時間:不曉得</p>
      </li>
    </ul>
  `
  聲明正則:
  const reg  = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
  const res = str.matchAll(reg)
  for(let v of res){
    console.log(v)
  }

34、ES11--可選鏈操作符

const params = {
    url:{
      baseUrl:'192.168.0.107',
      name:'locahost'
    } 
}
function fun1(params){
  const temp = params.url.baseUrl;
  console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//報錯

  想要不報錯:
function fun1(params){
  const temp = params&&params.url&&params.url.baseUrl;
  console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//undefined

//可選鏈操作符
function fun2(params){
  const temp = params?.url?.baseUrl;
  console.log(temp)
}
fun(params);//192.168.0.107
fun();//undefined

35、ES11--動態(tài)import

36、ES11--bigint

  let num = 66n
  console.log(num,typeof(num));//66n bigint

  整數(shù)轉化為bingint類型
  console.log(BigInt(66));//66n
  小數(shù)
  console.log(BigInt(66.6));//報錯

  主要運用于大數(shù)值的運算
  let max = Number.MAX_SAFE_INTEGER
  console.log(max);9007099254740991
  console.log(max+1);9007099254740992
  console.log(max+2);9007099254740992
  
  console.log(BigInt(max));9007099254740991n
  console.log(BigInt(max)+1);//報錯
  console.log(BigInt(max)+BigInt(1));9007099254740992n
  console.log(BigInt(max)+BigInt(2));9007099254740993n

37、ES11--globalThis

無視環(huán)境直接使用全局對象。

記錄尚硅谷視頻:(https://www.bilibili.com/video/BV1uK411H7on?p=68
留個筆記記錄。
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容