ES2018指南

ECMAScript是JavaScript所基於的標準,並且通常縮寫為ES。探索有關ECMAScript的所有內容以及ES2018(又名ES9)中添加的功能

ES2018是該版本的最新版本ECMAScript標準。

它引入了哪些新東西?

剩餘/價差屬性

ES6介紹了一個概念休息元素與...一起工作時陣列解構

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

傳播元素

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018引入了相同的內容,但對像是相同的。

休息屬性

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 }

價差屬性允許通過組合在之後傳遞的對象的屬性來創建新對象點差算子

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

異步迭代

新構造for-await-of允許您使用異步可迭代對像作為循環迭代:

for await (const line of readLines(filePath)) {
  console.log(line)
}

由於這使用await,您只能在內部使用async功能,像普通的await(看異步/等待

Promise.prototype.finally()

兌現諾言後,成功調用then()方法,一個接一個。

如果在此期間發生故障,則then()方法被跳過,catch()方法被執行。

finally()允許您運行某些代碼,而不管承諾是否成功執行:

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

正則表達式的改進

RegExp後置斷言:根據其前面的字符串進行匹配

這是一個前瞻:您使用?=匹配後跟特定子字符串的字符串:

/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

?!執行逆運算,如果字符串是不是後跟一個特定的子字符串:

/Roger(?!Waters)/

/Roger(?! Waters)/.test(‘Roger is my dog’) //true /Roger(?! Waters)/.test(‘Roger Waters is a famous musician’) //false

先行者使用?=象徵。它們已經可用。

向後看,一項新功能,使用?<=

/(?<=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

向後看是使用否定的?<!

/(?<!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屬性轉義\p{…}\P{…}

在正則表達式模式中,您可以使用\d匹配任何數字,\s匹配任何不是空格的字符,\w匹配任何字母數字字符,依此類推。

這項新功能將這一概念擴展到了所有引入的Unicode字符中\p{}及其否定\P{}

任何統一碼字符具有一組屬性。例如Script決定語言的種類ASCII是一個布爾值,對於ASCII字符是正確的,依此類推。您可以將此屬性放在圖形括號中,正則表達式將檢查該屬性是否為真:

/^\p{ASCII}+$/u.test('abc')   //✅
/^\p{ASCII}+$/u.test('[email protected]')  //✅
/^\p{ASCII}+$/u.test('ABC🙃') //❌

ASCII_Hex_Digit是另一個布爾屬性,用於檢查字符串是否僅包含有效的十六進制數字:

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

還有許多其他布爾屬性,您可以通過在圖形括號中添加它們的名稱來進行檢查,包括UppercaseLowercaseWhite_SpaceAlphabeticEmoji和更多:

/^\p{Lowercase}$/u.test('h') //✅
/^\p{Uppercase}$/u.test('H') //✅

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

除了這些二進制屬性外,您還可以檢查任何unicode字符屬性以匹配特定值。在此示例中,我檢查字符串是否以希臘字母或拉丁字母書寫:

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

閱讀有關可以使用的所有屬性的更多信息直接在提案上

命名捕獲組

在ES2018中捕獲小組可以分配一個名稱,而不僅僅是在結果數組中分配一個插槽:

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標誌,簡稱單線,導致.以匹配換行符。沒有它,該點將匹配常規字符,但不匹配新行:

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

免費下載我的JavaScript初學者手冊


更多js教程: