ES9(ES2018)的新特性實例

ES2018 是 ECMAScript 標準的最新版本扩所。

它引入了哪些新東西呢稍计?

Rest(剩余)/Spread(展開) 屬性

ES6 在處理數(shù)組解構(gòu)時,引入了 rest(剩余)元素的概念浪册,例如:

JavaScript 代碼:

const numbers = [1, 2, 3, 4, 5]

[first, second, ...others] = numbers

還有展開元素時:

JavaScript 代碼:

const numbers = [1, 2, 3, 4, 5]

const sum = (a, b, c, d, e) => a + b + c + d + e

const sum = sum(...numbers)

ES2018 為對象引入了類似的功能镇草。

rest(剩余) 屬性

JavaScript 代碼:

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

first // 1

second // 2

others // { third: 3, fourth: 4, fifth: 5 }

spread(展開) 屬性 允許通過組合展開運算符 ... 之后傳遞的對象屬性來創(chuàng)建新對象:

JavaScript 代碼:

const items = { first, second, ...others }

items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

Asynchronous iteration (異步迭代)

新的 for-await-of 構(gòu)造允許您使用異步可迭代對象作為循環(huán)迭代:

JavaScript 代碼:

for await (const line of readLines(filePath)) {

? console.log(line)

}

由于這使用 await 恩尾,你只能在異步函數(shù)中使用它烁峭,就像普通的 await 一樣(參見 async / await 章節(jié))

Promise.prototype.finally()

當一個 promise 得到滿足(fulfilled)時囱稽,它會一個接一個地調(diào)用 then() 方法郊尝。

如果在此期間發(fā)生錯誤,則跳過 then() 方法并執(zhí)行 catch()方法战惊。

finally() 允許您運行一些代碼流昏,無論 promise 的執(zhí)行成功或失敗:

JavaScript 代碼:

fetch('file.json')

? .then(data => data.json())

? .catch(error => console.error(error))

? .finally(() => console.log('finished'))

正則表達式改進

先行斷言(lookahead) 和 后行斷言(lookbehind)

正則表達式后行斷言(lookbehind):根據(jù)前面的內(nèi)容匹配字符串吞获。

下面是一個先行斷言(lookahead):您可以使用 ?= 匹配一個字符串况凉,該字符串后面跟著一個特定的子字符串:

JavaScript 代碼:

/Roger(?=Waters)/

/Roger(?= Waters)/.test('Roger is my dog') //false

/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true

?! 執(zhí)行逆操作,匹配一個字符串各拷,該字符串后面沒有一個特定的子字符串:

JavaScript 代碼:

/Roger(?!Waters)/

/Roger(?! Waters)/.test('Roger is my dog') //true

/Roger(?! Waters)/.test('Roger Waters is a famous musician') //false

先行斷言(lookahead)使用 ?= 符號刁绒。它們已經(jīng)可用了。

后行斷言(lookbehind)烤黍,是一個新功能知市,使用 ?< =。

JavaScript 代碼:

/(?<=Roger) Waters/

/(?<=Roger) Waters/.test('Pink Waters is my dog') //false

/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true

后行斷言(lookbehind) 逆操作速蕊,使用 ?< !嫂丙。

JavaScript 代碼:

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test('Pink Waters is my dog') //true

/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //false

Unicode 屬性轉(zhuǎn)義 \p{…} 和 \P{…}

在正則表達式模式中,您可以使用 \d 匹配任何數(shù)字规哲,\s 匹配任何不為空格的字符跟啤,\w 匹配任何字母數(shù)字字符,依此類推唉锌。

這個新功能將擴展此概念到引入 \p{} 匹配所有 Unicode 字符隅肥,否定為 \P{} 。

任何 unicode 字符都有一組屬性袄简。 例如腥放,Script 確定語言系列,ASCII 是一個布爾值痘番, 對于 ASCII 字符捉片,值為 true平痰,依此類推。 您可以將此屬性放在花括號中伍纫,正則表達式將檢查是否為真:

JavaScript 代碼:

/^\p{ASCII}+$/u.test('abc')? //?

/^\p{ASCII}+$/u.test('ABC@')? //?

/^\p{ASCII}+$/u.test('ABC') //?

ASCII_Hex_Digit 是另一個布爾屬性宗雇,用于檢查字符串是否僅包含有效的十六進制數(shù)字:

JavaScript 代碼:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //?

/^\p{ASCII_Hex_Digit}+$/u.test('h')? ? ? ? ? ? ? ? //?

還有許多其他布爾屬性,您只需通過在花括號中添加它們的名稱來檢查它們莹规,包括 Uppercase, Lowercase, White_Space, Alphabetic, Emoji 等:

JavaScript 代碼:

/^\p{Lowercase}$/u.test('h') //?

/^\p{Uppercase}$/u.test('H') //?

/^\p{Emoji}+$/u.test('H')? //?

/^\p{Emoji}+$/u.test('') //?

除了這些二進制屬性之外赔蒲,您還可以檢查任何 unicode 字符屬性以匹配特定值。在這個例子中良漱,我檢查字符串是用希臘語還是拉丁字母寫的:

JavaScript 代碼:

/^\p{Script=Greek}+$/u.test('ελληνικ?') //?

/^\p{Script=Latin}+$/u.test('hey') //?

您可以直接在提案上閱讀可使用的 所有屬性 舞虱。

命名捕獲組(Named capturing groups)

在 ES2018 中,可以為捕獲組分配一個名稱母市,而不是僅在結(jié)果數(shù)組中分配一個 slot(插槽):

JavaScript 代碼:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

const result = re.exec('2015-01-02')

// result.groups.year === '2015';

// result.groups.month === '01';

// result.groups.day === '02';

正則表達式的 ‘s’ 標志

s 標志是 ‘single line'(單行)的縮寫矾兜,它使 . 匹配新的行字符。如果沒有它患久,點將匹配普通字符椅寺,而不是新行:

JavaScript 代碼:

/hi.welcome/.test('hi\nwelcome') // false

/hi.welcome/s.test('hi\nwelcome') // true

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蒋失,隨后出現(xiàn)的幾起案子返帕,更是在濱河造成了極大的恐慌,老刑警劉巖篙挽,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荆萤,死亡現(xiàn)場離奇詭異,居然都是意外死亡铣卡,警方通過查閱死者的電腦和手機链韭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來煮落,“玉大人梧油,你說我怎么就攤上這事≈菪希” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵褪子,是天一觀的道長量淌。 經(jīng)常有香客問我,道長嫌褪,這世上最難降的妖魔是什么呀枢? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮笼痛,結(jié)果婚禮上裙秋,老公的妹妹穿的比我還像新娘琅拌。我一直安慰自己,他們只是感情好摘刑,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布进宝。 她就那樣靜靜地躺著,像睡著了一般枷恕。 火紅的嫁衣襯著肌膚如雪党晋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天徐块,我揣著相機與錄音未玻,去河邊找鬼。 笑死胡控,一個胖子當著我的面吹牛扳剿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播昼激,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼庇绽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了癣猾?” 一聲冷哼從身側(cè)響起敛劝,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎纷宇,沒想到半個月后夸盟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡像捶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年上陕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拓春。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡释簿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出硼莽,到底是詐尸還是另有隱情庶溶,我是刑警寧澤,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布懂鸵,位于F島的核電站偏螺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏匆光。R本人自食惡果不足惜套像,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望终息。 院中可真熱鬧夺巩,春花似錦贞让、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至征绎,卻和暖如春蹲姐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背人柿。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工柴墩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凫岖。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓江咳,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哥放。 傳聞我的和親對象是個殘疾皇子歼指,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容