ES9,ES10


ES9新特性:

1異步迭代

在async/await,你可能在同步循環中調用異步函數,例如:

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

這段代碼不會正常運行,下面這段也不會正常運行:

async function process(array){
    array.forEach(async i => {
       await dosomething(i); 
    })
}

這段代碼中,循環本身依舊保持同步,並在內部異步函數之前全部調用完畢。

ES2018引入異步迭代器(asynchronous iterators),這就像常規迭代器,除了next()方法返回一個promise。因此await可以和for...of循環一起使用,以串行的方式異步運作

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

 

2.Promise.finally()

一個promise調用鏈要么成功到達最后一個.then(),要么失敗觸發.catch()。在某些情況下,你想要在無論Promise運行成功還是失敗,運行相同的代碼,例如清除,刪除對話,關閉數據連接等。

.funally()允許你指定最終的邏輯:

function dosomething(){
  dosomething1()
 .then(dosomething2)
 .then(dosomething3)
 .catch(err => {
    console.log(err);  
 })
 .finally(() => {});  
}

3.Rest/Spread

解構和擴展

4.正則表達式命名捕獲組(groups)

js正則表達式可以返回一個匹配對象--一個包含匹配字符串的累數組,例如以YYYY-MM-DD的格式解析日期:

const reDate  = /([0-9]{4})-([0-9]{2})-([0.-9]{2})/,
    match = reDate.exec("2019-04-12"),
    year =  match[1],
    mouth =  match[2],
    day = match[3]

這樣的代碼很難讀懂,並且改變正則表達式的結構有可能改變匹配對象的索引

ES2018允許命名捕獲組使用?<name>,在打開捕獲括號(后立即命名,示例:

const  reDate = /(?<year>[0-9]{4})-(?<mouth>[0-9]{2})-(?<day>[0-9]{2})/,
    match = reDate.exec("2019-04-12"),
   year = match.groups.year,
    mouth = match.groups.mouth,
    day  = match.groups.day 

 

5正則表達式反向斷言

目前js支持先行斷言(lookahead),這意味着匹配會發生,但不會有任何捕獲,並且斷言沒有包含在整個匹配字符字段中,例如:

const  
reLookahead  = /\D(?=\d+)/,
match = reLookahead.exec("$123.23")
console.log(match[0]) //$

ES2018引入以相同方式工作但是匹配前面的反向斷言(lookbehind),這樣我就可以忽略貨幣符號,單純的捕獲價格數字:

const
reLookbehind  = /(?<=\D)\d+/,
match = reLookbehind.exec("$123.23")
console.log(match[0])  //123

6正則表達式dotAll模式


正則表達式中點.匹配除回車以外的任何單字符,標記s改變這種方式,允許終止符的出現,例如:

/hello.world/.test("hello\nworld");
/hello.world/s.test("hello\nworld");

ES10新特性

1.行分隔符(U + 2028)和段分隔符(U + 2029)符號現在允許在字符串文字中,與JSON匹配

以前,這些符號在字符串文字中被視為行終止符,因此使用它們會導致SyntaxError異常。

2.更加友好的 JSON.stringify

如果輸入 Unicode 格式但是超出范圍的字符,在原先JSON.stringify返回格式錯誤的Unicode字符串。現在實現了一個改變JSON.stringify的第3階段提案,因此它為其輸出轉義序列,使其成為有效Unicode(並以UTF-8表示)

3.新增了Array的 flat()方法和 flatMap()方法

flat()和 flatMap()本質上就是是歸納(reduce) 與 合並(concat)的操作。

Array.prototype.flat()

flat() 方法會按照一個可指定的深度遞歸遍歷數組,並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。

var arr1 = [1,2,[3,4]];
arr1.flat();//[1,2,3,4];

var arr2 = [1,2,[3,4,[5,6]]];
arr2.flat(); //[1,2,3,4,[5,6]];

var arr3 = [1,2,[3,4,[5,6]]];
arr3.flat(2);//[1,2,3,4,5,6]  參數表示展開的深度
其次,還可以利用 flat()方法的特性來去除數組的空項
var arr4 = [1,2,,4,5]
arr4.flat();//[1,2,4,5]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函數映射每個元素,然后將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同,但 flatMap 通常在合並成一種方法的效率稍微高一些。 這里我們拿map方法與flatMap方法做一個比較。

var arr1  = [1,2,3,5];
arr1.map(x => [x*2])
//(4) [Array(1), Array(1), Array(1), Array(1)]0: [2]1: [4]2: [6]3: 
arr1.flatMap(x => [x*2])
//(4) [2, 4, 6, 10]
arr1.flatMap(x => [[x*2]])
//(4) [Array(1), Array(1), Array(1), Array(1)]

4.新增了String的 trimStart()方法和 trimEnd()方法

新增的這兩個方法很好理解,分別去除字符串首尾空白字符,這里就不用例子說聲明了。  

5. Object.fromEntries()

Object.entries()方法的作用是返回一個給定對象自身可枚舉屬性的鍵值對數組,其排列與使用 for...in 循環遍歷該對象時返回的順序一致(區別在於 for-in 循環也枚舉原型鏈中的屬性)。

而 Object.fromEntries() 則是 Object.entries() 的反轉。

 通過 Object.fromEntries, 可以將 Map 轉化為 Object:

const map1 = new Map([['foo','bar'],['baz',42]])
const obj122 = Object.fromEntries(map1)
obj1
//{foo: "bar", x: 41}

通過 Object.fromEntries, 可以將 Array 轉化為 Object:

var obj32 = Object.fromEntries(arr1)
var obj32 = Object.fromEntries(arr21)
obj32
//{0: "a", 1: "b", 2: "c"}

6. String.prototype.matchAll

matchAll() 方法返回一個包含所有匹配正則表達式及分組捕獲結果的迭代器。 在 matchAll 出現之前,通過在循環中調用regexp.exec來獲取所有匹配項信息(regexp需使用/g標志

7. Function.prototype.toString()現在返回精確字符,包括空格和注釋

頭部和尾部的注釋不顯示

9.修改 catch 綁定

之前是try {}catch(e){}

現在是try {}catch{}

10.新的基本數據類型 BigInt

其中數據類型:String、Number、Boolean、Null、Undefined、Symbol、BigInt

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM