ES2018中有什么功能

這篇文章主要介紹了ES2018中有什么功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

ES2018 規范引入了四個新功能。這些功能包括異步迭代，rest/spread 屬性，Promise.prototype.finally()  和正則表達式改進。

異步迭代

異步迭代是討論的比較少 ES2018 功能之一。雖然還有很多關于 ES2018  其他功能的討論，但幾乎沒有關于異步迭代這方面的內容。通過異步迭代，我們可以得到異步的可迭代對象和迭代器。

這意味著你可以把 await 關鍵字與 for…of  循環放在一起使用。你可以用這些循環對可迭代對象進行迭代。可迭代對象的包括數組、map、set，NodeList，函數的 arguments  參數，TypedArray 等。

在 ES2018 之前，for...of 循環是同步的。如果你試著迭代涉及異步操作的可迭代對象并  await，則無法正常工作。循環本身會保持同步，基本上忽略 await ，并在其內部的異步操作可以完成之前完成迭代。

// 下面的代碼在 ES2018 之前不起作用，因為循環保持同步。 // 創建一個異步函數： async function processResponses(someIterable) {   // 對可迭代對象進行迭代   for (let item of someIterable) {     // 通過異步操作處理項目，例如promise：     await processItem(item)   } }

同時 for...of 循環也可以與異步代碼一起使用。也就是說可以在遍歷可迭代對象時執行一些異步操作。for...of  循環將會是異步的，讓你能夠等待異步操作完成。

需要記住的是在哪里使用 await 關鍵字。不需要把它放進循環體中，應該將其放在for...of關鍵字中 for 的后面。現在當你用 next()  方法獲取異步迭代器的下個值時，將會得到一個 Promise。如果你想了解更多信息，可以在 GitHub  上去看看(https://github.com/tc39/proposal-async-iteration)。

// 創建一個異步函數: async function processResponses(someIterable) {   //遍歷可迭代對象并等待異步操作的結果   for await (let item of someIterable) {     processItem(item)   } }

Rest/Spread 屬性

rest 和 spread 并不是真正的新功能。兩者都是在 ES6 中作為新的運算符引入的，它們很快就開始流行起來。可以說  JavaScript 程序員喜歡它們。唯一的問題是它們只能用在數組和參數上，不過 ES2018 把這兩個功能引入了對象中。

rest 和 spread 運算符的語法都非常簡單，由三個點(...)組成。這些點后面是要在其上使用 rest 或 spread  運算符的對象。接下來簡單的討論一下兩者的工作原理。

對象的 rest 運算符

rest 運算符使你可以將對象的所有剩余對象屬性屬性提取到新對象上。要注意這些屬性必須是可枚舉的。如果你已經對某些屬性使用了分解，那么 rest  運算符會只提取剩余的屬性。

// Rest example:  const daysObj = {   one: 'Monday',   two: 'Tuesday',   three: 'Wednesday',   four: 'Thursday',   five: 'Friday' }  //使用解構將變量的前兩個屬性分配給變量。 //然后，使用rest將其余屬性分配給第三個變量。 const { one, two, ...restOfDays } = daysObj // rest 僅提取 "three", "four" 和 "five"  // 因為我們已經提取了 "one" 和 "two"   console.log(one) // Output: // 'Monday'  console.log(two) // Output: // 'Tuesday'  console.log(restOfDays) // Output: // { three: 'Wednesday', four: 'Thursday', five: 'Friday' }

如果要對對象使用 rest  運算符，需要記住兩點：首先，只能用一次，除非把它用在嵌套對象上。其次，必須在最后使用。這就是為什么在上面的例子中，在解構前兩個屬性之后而不是之前看到它的原因。

// 這行代碼不起作用，因為把 rest 運算符用在了最前面： const { ...all, one, two } = { one: 1, two: 2, three: 3 }  //這行能起作用： const { one, two, ...all } = { one: 1, two: 2, three: 3 }  // 這行不起作用，因為同一級別上有多個 rest 運算符： const { one, ...some, ...end } = { /* some properties */ }  // 這行能起作用，在多個級別上的多個 rest 運算符： const { one, {...secondLevel }, ...firstLevel } = { /* some properties */ }

對象的 spread 運算符

spread 運算符的作用是可以通過插入另一個對象的所有屬性來創建新對象。Spread  運算符還允許你從多個對象插入屬性。也可以把這個運算符與添加新屬性結合使用。

// Spread example: const myOriginalObj = { name: 'Joe Doe', age: 33 } // 用 spread 運算符創建新對象： const myNewObj = { ...myOriginalObj }  console.log(myNewObj) // Output: // { name: 'Joe Doe', age: 33 }   // 添加屬性的例子： const myOriginalObj = { name: 'Caesar' } // 用 spread 運算符創建新對象 // 并添加新的屬性“genre”： const myNewObj = { ...myOriginalObj, genre: 'Strategy' }  console.log(myNewObj) // Output: // { //   name: 'Caesar', //   genre: 'Strategy' // }   // Spread 運算符并合并兩個對象： const myObjOne = { title: 'Eloquent JavaScript' } const myObjTwo = { author: 'Marijn Haverbeke' }  const myNewObj = { ...myObjOne, ...myObjTwo }  console.log(myNewObj) // Output: // { //   title: 'Eloquent JavaScript', //   author: 'Marijn Haverbeke' // }

當從多個對象插入屬性并添加新屬性時，順序很重要。

我來解釋一下，假設你要用 spread 運算符基于兩個現有對象創建一個新對象。第一個已有對象中包含具有某些值的屬性 title。第二個對象也包含屬性  title，但是值不一樣。最終到底取哪個 title?

答案是最后一個。如果對第一個對象使用 spread 運算符，然后再對第二個對象使用，則第二個 title 會生效。如果你將 spread  運算符永在第二個對象上，則第一個 title會生效。

// Spread 運算符并合并兩個對象： const myObjOne = {   title: 'Eloquent JavaScript',   author: 'Marijn Haverbeke', }  const myObjTwo = {   title: 'You Don\'t Know JS Yet',   language: 'English' }  // 用 spread 運算符通過組合 “myObjOne” 和 “myObjTwo” 創建新對象 // 注意：“myObjTwo” 中的 “title” 會將覆蓋 “myObjTwo” 的 “title” // 因為“ myObjTwo”排在最后。 const myNewObj = { ...myObjOne, ...myObjTwo }  console.log(myNewObj) // Output: // { //   title: "You Don't Know JS Yet", //   author: 'Marijn Haverbeke', //   language: 'English' // }   // 注意：“myObjOne” 中的 “title” 將覆蓋 “myObjTwo” 的 “title” const myNewObj = { ...myObjTwo, ...myObjOne }  console.log(myNewObj) // Output: // { //   title: 'Eloquent JavaScript', //   language: 'English', //   author: 'Marijn Haverbeke' // }

Promise.prototype.finally()

一開始有兩個用于 Promise 的回調函數。其中一個是 then()，在實現諾 Promise  執行。第二個是catch()，在 promise 被拒絕或 then() 拋出異常時執行。ES2018 增加了用于 Promise 的第三個回調函數  finally()。

每次完成 promise 時，都會執行 finally() 回調，不管 promise  是否完成。這個回調的一般用于執行應始終發生的操作。例如關閉模態對話框、關閉數據庫連接或進行某些清理。

// finally() example: fetch()   .then(response => response.json())   .then(data => console.log(data))   .catch(error => console.log(error))   //最后做點什么：   .finally(() => console.log('Operation done.'))

對正則表達式的改進

ES2018 還對正則表達式功能進行了的一些改進。這些改進包括 s(dotAll) 標志，后行斷言，命名捕獲組和 unicode  屬性轉義。

s(dotAll)

首先是 s(dotAll) 。與點(.)不同，s(dotAll) 允許對換行符及表情符號進行匹配。

// s(dotAll) example: /hello.world/.test('hello\nworld') // Output: // false  /hello.world/s.test('hello\nworld') // Output: // true

后行斷言

在ES2018之前，JavaScript僅支持先行斷言。先行斷言用于基于其后的文本來匹配模式。在 ES2018  中增加了對后行斷言的支持。通過它可以基于模式之前的文本模式來進行匹配。后行斷言的語法為 ?<=。

// 后行斷言例子: /(?<=green) apple/.test('One red apple is on the table.') // Output: // false  /(?<=green) apple/.test('One green apple is on the table.') // Output: // true

斷言后面也有一個反向的回溯。僅當子字符串之前沒有斷言時，此斷言才與模式匹配。對后行斷言取反操作的語法是 ?<!。

/(?<!green) apple/.test('One red apple is on the table.') // Output: // true  /(?<!green) apple/.test('One green apple is on the table.') // Output: // false

命名捕獲組

另一個被 ES2018 引入到正則表達式的好功能是命名捕獲組。命名捕獲組的語法為 ?<some_name>。

const date_pattern = /(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})/ const result = date_pattern.exec('11/12/2021')  console.log(result) // Output: // [ //   '11/12/2021', //   '11', //   '12', //   '2021', //   index: 0, //   input: '11/12/2021', //   groups: [Object: null prototype] { day: '11', month: '12', year: '2021' } // ]  console.log(result.groups.day) // Output: // '11'  console.log(result.groups.month) // Output: // '12'  console.log(result.groups.year) // Output: // '2021'

Unicode 屬性轉義

每個 unicode 字符都有許多屬性。例如：空白字符，大小寫，字母，ASCII，表情符號等。現在你可以在正則表達式中訪問這些屬性了。

要使用這個功能需要做兩件事。首先必須使用 /u 標志。這個標志告訴 JavaScript 你的字符串是一系列 Unicode 代碼點。第二是使用  \p{}。你要檢查的屬性位于大括號之間，反之則用 \P{}。

// 用俄語創建一個字符串（西里爾字母）： const myStrCyr = 'Доброе утро'  //創建英文字符串（拉丁字母）： const myStrLat = 'Good morning'  //測試“ myStrCyr”是否包含西里爾字符： /\p{Script=Cyrillic}/u.test(myStrCyr) // true  //測試“ myStrLat”是否包含西里爾字符： /\p{Script=Cyrillic}/u.test(myStrLat) // false  // 測試“myStrLat” 是否包含西里爾字符： /\p{Script=Latin}/u.test(myStrCyr) // false  // 測試“myStrLat” 是否包含拉丁語字符： /\p{Script=Latin}/u.test(myStrLat) // true

感謝你能夠認真閱讀完這篇文章，希望小編分享的“ES2018中有什么功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!