ECMAScript2018新特性一覽

2021-09-21 22:01:52 字數 4796 閱讀 4027

在1月的tc39議會確定下了ecmascript 2018的功能集

自tc39開始，ecmascript版本的重要性大大降低，重要的是提議的特性處於什麼樣的階段。只要進入第四階段就可以安全使用。即便如此，你在使用的時候最好還是檢查其相容性

主要特性

非同步函式迭代器

幾個新概念和實體

這部分涉及的比較多，具體內容參考：後面再單獨整理乙份。

展開/剩餘（rest/spread） 擴充套件特性

rest操作符用於物件結構賦值

// 用於陣列


const [...iterableobj] = [1, 3, 5, 7, 9];


[...iterableobj, 0, 2, 4, 6, 8];


// output


// [1, 3, 5, 7, 9, 0, 2, 4, 6, 8]


// 用於物件


const obj = ;


const  = obj;


// output foo rest


// //
rest操作符也能收集其他引數

function func() ); // spread operator


return param1 + param2;


}
語法限制：結構時在物件的頂層只能使用乙個...rest操作符並且要放在最後

const  = obj; // syntaxerror


const  = obj; // syntaxerror
spread操作符能夠將所有的可列舉屬性插入到新的物件中

> const obj = ;


>
...rest和...spread常用在轉殖物件，合併操作等場景。如填充一些預設屬性

const defaults = ;


const userdata = ;


const data = ;


//
正則新特性

定義常量組名

在此之前，所有的分組是通過數字來實現的：第一組matchobj[1]，第二組matchobj[2] etc

const re_date = /([0-9])-([0-9])-([0-9])/;


const matchobj = re_date.exec('1999-12-31');


const year = matchobj[1]; // 1999


const month = matchobj[2]; // 12


const day = matchobj[3]; // 31
通過數字分組有幾個缺點：

你要找到每組對應的結果很麻煩得去計算有幾個圓括號

如果你想知道每個組的意義你得去看正規表示式

如果你想改變順序還必須改正規表示式

現在，這些問題可以通過定義常量組名的方式來解決

通過名稱來識別組名

(?[0-9])
此處宣告了乙個year的組名，匹配成功之後我們就可以通過matchobj.groups.year來訪問

const re_date = /(?[0-9])-(?[0-9])-(?[0-9])/;


const matchobj = re_date.exec('1999-12-31');


const year = matchobj.groups.year; // 1999


const month = matchobj.groups.month; // 12


const day = matchobj.groups.day; // 31
結合解構

const } = re_date.exec('1999-12-31');


console.log(year); // 1999


console.log(day); // 31
定義組名有幾個好處：

找到組的「id」更容易。

匹配的**變得自描述，因為組的id描述了捕獲的內容

如果更改捕獲組的順序，則不必更改匹配的**

捕獲組的名稱也使正規表示式更容易理解，因為您可以直接看到每個組的用途

利用replace實現格式化

console.log('1999-12-31'.replace(re_date,


(...args) =>  = args[args.length-1];


return month+'/'+day+'/'+year;


}));


// 12/31/1999
這裡的args包含a,y,m,d,groups,這裡的groups是args的最後乙個引數，我們通過結構的方式訪問等同於：

console.log('1999-12-31'.replace(re_date,


(a,y,m,d, ) => month+'/'+day+'/'+year)); // (a)


// 12/31/1999
unicode轉義特性

目前js可以通過字符集的名稱來匹配字元。如s代表空白

> /^\s+$/u.test('\t \n\r')


true
現在提議之後將可以實現通過unicode字元屬性來匹配字元。如

// 空白


> /^\p+$/u.test('\t \n\r')


true


// 希臘字母


> /^\p+$/u.test('μετά')


true


// 匹配拉丁字母


> /^\p+$/u.test('grüße')


true


// 匹配單獨的替代字元


> /^\p+$/u.test('\u')


true
後向斷言

前向斷言的意思的與當前位置之後的內容匹配

在前向斷言中接下來的任何東西都必須與斷言匹配，但是沒有其他事情發生。也就是說，沒有任何東西**獲，並且斷言對整個匹配的字串沒有貢獻。

const re_as_bs = /aa(?=bb)/;
這個表示式匹配的範圍是『aabb』，a後面必須是兩個b才能夠被匹配，但是結果並不包含b

後向斷言則與前向相反，是與當前位置之前的內容匹配。如

const re_dollar_prefix = /(?<=\$)foo/g;


'$foo %foo foo'.replace(re_dollar_prefix, 'bar');


// '$bar %foo foo'
正如你所看到的，『foo』只會在前面有乙個『$』符的時候才會被匹配

s(dotall)

目前正規表示式的.有兩個限制。首先，它不符合非bmp字元，如表情符號

> /^.$/.test('')


false
當然，在目前的提議下可以同過unicode來實現

> /^.$/u.test('')


true
其次，點不匹配行結束符

> /^.$/.test('\n')


false
只能通過[^]或者[\s\s]來修復

> /^[^]$/.test('\n')


true


> /^[\s\s]$/.test('\n')


true
建議之後引入了新的修飾符/s（簡稱：singleline）能夠匹配行結束符

> /^.$/s.test('\n')


true
其他

promise.prototype.finally()

promise


.then(result => )


.catch(error => )


.finally(() => );
finally回掉會一直執行；then回掉僅僅是在promisefulfilled的時候執行；catch毀掉僅僅是在promiserejected或者then回掉拋異常的時候執行。常見的場景如：

let connection;


db.open()


.then(conn => );


}).then(result => )


···.catch(error => )


.finally(() => );
模板字串修正

該建議是為了讓標籤模板中的語法更加自由。string.raw()是乙個模板字串的標籤函式，它的作用類似於 python 中的字串字首r和 c# 中的字串字首@，是用來獲取乙個模板字串的原始字面量值的。在接受模板字串的時候會解析為兩個版本：

即使使用raw版本，你也沒有太多的自由。因為多了反斜槓之後就不合法了：

ECMAScript 新的資料結構Set

一 ecmascript 新的資料結構set 1.一種新的資料結構結構類似於陣列，但是成員的值都是唯一的，沒有重複的值。let s newset 1,2,3,2 console.log s set 3 2.常用方法 add let s newset 1,2,3 s.add test console....

ECMAScript 新的資料結構Map

一 ecmascript 新的資料結構set 1.一種新的資料結構結構類似於物件，鍵值對的集合。map 結構提供了 值 值 的對應，是一種更完善的 hash 結構實現。let m newmap let obj m.set zhangsan obj 2.常用方法 新增 let m newmap let...

ECMAScript6 新特性 「正則的擴充套件」

es6 允許regexp建構函式接受正規表示式作為引數。第二個引數指定修飾符，如果存在則使用指定的修飾符。var regexp new regexp xyz i,ig console.log regexp.flags gi字串物件的4個使用正規表示式的方法 match replace search ...