本篇文章主要介紹了ES10 特性的完整指南，分享給大家，具體如下：
ES10 還只是一個草案。但是除了 Object.fromEntries 之外，Chrome 的大多數功能都已經實現了，為什么不早點開始探索呢?當所有瀏覽器都開始支持它時，你將走在前面，這只是時間問題。
在新的語言特性方面，ES10 不如 ES6 重要，但它確實添加了一些有趣的特性(其中一些功能目前還無法在瀏覽器中工作: 2019/02/21)
在 ES6 中，箭頭函數無疑是最受歡迎的新特性，在 ES10 中會是什么呢?
BigInt -任意精度整數
BigInt 是第七種 原始類型。
BigInt 是一個任意精度的整數。這意味著變量現在可以 表示²⁵³ 數字，而不僅僅是9007199254740992。
const b = 1n; // 追加 n 以創建 BigInt
在過去，不支持大于 9007199254740992 的整數值。如果超過，該值將鎖定為 MAX_SAFE_INTEGER + 1:
const limit = Number.MAX_SAFE_INTEGER;⇨ 9007199254740991limit + 1;⇨ 9007199254740992limit + 2;⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceededconst larger = 9007199254740991n;⇨ 9007199254740991nconst integer = BigInt(9007199254740991); // initialize with number⇨ 9007199254740991nconst same = BigInt("9007199254740991"); // initialize with "string"⇨ 9007199254740991ntypeof
typeof 10;⇨ 'number'typeof 10n;⇨ 'bigint'
等于運算符可用于兩種類型之間比較:
10n === BigInt(10);⇨ true10n == 10;⇨ true
數學運算符只能在自己的類型中工作:
200n / 10n⇨ 20n200n / 20⇨ Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions <
－運算符可以操作， + 不可用
-100n⇨ -100n+100n⇨ Uncaught TypeError: Cannot convert a BigInt value to a number
當你讀到這篇文章的時候，matchAll 可能已經在 Chrome C73 中正式實現了――如果不是，它仍然值得一看。特別是如果你是一個正則表達式(regex)愛好者。
string.prototype.matchAll()
如果您運行谷歌搜索JavaScript string match all，第一個結果將是這樣的：如何編寫正則表達式“match all”？
最佳結果將建議 String.match 與正則表達式和 /g 一起使用或者帶有 /g 的 RegExp.exec 或者帶有 /g 的 RegExp.test 。
首先，讓我們看看舊規范是如何工作的。
帶字符串參數的 String.match 僅返回第一個匹配：
let string = 'Hello';let matches = string.match('l');console.log(matches[0]); // "l"結果是單個 "l"（注意：匹配存儲在 matches[0] 中而不是 matches）
在“hello”中搜索 "l" 只返回 "l"。
將 string.match 與 regex 參數一起使用也是如此：
讓我們使用正則表達式 /l/ 找到字符 串“hello” 中的 “l” 字符：
let string = "Hello";let matches = string.match(/l/);console.log(matches[0]); // "l"
添加 /g 混合
let string = "Hello";let ret = string.match(/l/g); // (2) [“l”, “l”];
很好，我們使用 < ES10 方式得到了多個匹配，它一直起作用。
那么為什么要使用全新的 matchAll 方法呢? 在我們更詳細地回答這個問題之前，讓我們先來看看 捕獲組。如果不出意外，你可能會學到一些關于正則表達式的新知識。
正則表達式捕獲組
在 regex 中捕獲組只是從 () 括號中提取一個模式，可以使用 /regex/.exec(string) 和string.match 捕捉組。
常規捕獲組是通過將模式包裝在 (pattern) 中創建的，但是要在結果對象上創建 groups 屬性，它是: (?<name>pattern)。
要創建一個新的組名，只需在括號內附加 ?<name>，結果中，分組 (pattern) 匹配將成為 group.name，并附加到 match 對象，以下是一個實例：
字符串標本匹配：
這里創建了 match.groups.color 和 match.groups.bird ：
const string = 'black*raven lime*parrot white*seagull';const regex = /(?<color>.*?)/*(?<bird>[a-z0-9]+)/g;while (match = regex.exec(string)){ let value = match[0]; let index = match.index; let input = match.input; console.log(`${value} at ${index} with '${input}'`);console.log(match.groups.color); console.log(match.groups.bird);}需要多次調用 regex.exec 方法來遍歷整個搜索結果集。 在每次迭代期間調用.exec 時，將顯示下一個結果（它不會立即返回所有匹配項。），因此使用 while 循環。
輸出如下：
black*raven at 0 with 'black*raven lime*parrot white*seagull'
black
raven
lime*parrot at 11 with 'black*raven lime*parrot white*seagull'
lime
parrot
white*seagull at 23 with 'black*raven lime*parrot white*seagull'
white
seagull
但奇怪的是:
如果你從這個正則表達式中刪除 /g，你將永遠在第一個結果上創建一個無限循環。這在過去是一個巨大的痛苦。想象一下，從某個數據庫接收正則表達式時，你不確定它的末尾是否有 /g，你得先檢查一下。
使用 .matchAll() 的好理由
.matchAll() 是如何工作的?
讓我們嘗試匹配單詞 hello 中字母 e 和 l 的所有實例， 因為返回了迭代器，所以可以使用 for…of 循環遍歷它：
// Match all occurrences of the letters: "e" or "l" let iterator = "hello".matchAll(/[el]/);for (const match of iterator) console.log(match);
這一次你可以跳過 /g， .matchall 方法不需要它，結果如下:
[ 'e', index: 1, input: 'hello' ] // Iteration 1
[ 'l', index: 2, input: 'hello' ] // Iteration 2
[ 'l', index: 3, input: 'hello' ] // Iteration 3
使用 .matchAll() 捕獲組示例：
.matchAll 具有上面列出的所有好處。它是一個迭代器，可以用 for…of 循環遍歷它,這就是整個語法的不同。
const string = 'black*raven lime*parrot white*seagull';const regex = /(?<color>.*?)/*(?<bird>[a-z0-9]+)/;for (const match of string.matchAll(regex)) { let value = match[0]; let index = match.index; let input = match.input; console.log(`${value} at ${index} with '${input}'`);console.log(match.groups.color); console.log(match.groups.bird);}請注意已經沒有 /g 標志，因為 .matchAll() 已經包含了它，打印如下：
black*raven at 0 with 'black*raven lime*parrot white*seagull'
black
raven
lime*parrot at 11 with 'black*raven lime*parrot white*seagull'
lime
parrot
white*seagull at 23 with 'black*raven lime*parrot white*seagull'
white
seagull
也許在美學上它與原始正則表達式非常相似，執行while循環實現。但是如前所述，由于上面提到的許多原因，這是更好的方法，移除 /g 不會導致無限循環。
動態導入
現在可以將導入分配給變量：
element.addEventListener('click', async() => { const module = await import(`./api-scripts/button-click.js`); module.clickEvent();})Array.flat()
扁平化多維數組：
let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];multi.flat(); // [1,2,3,4,5,6,Array(4)]multi.flat().flat(); // [1,2,3,4,5,6,7,8,9,Array(3)]multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]multi.flat(Infinity); // [1,2,3,4,5,6,7,8,9,10,11,12]
Array.flatMap()
let array = [1, 2, 3, 4, 5];array.map(x => [x, x * 2]);let array = [1, 2, 3, 4, 5];array.map(x => [x, x * 2]);
結果：
[Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [2, 4]
2: (2) [3, 6]
3: (2) [4, 8]
4: (2) [5, 10]
使用 flatMap 方法：
array.flatMap(v => [v, v * 2]);[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
Object.fromEntries()
將鍵值對列表轉換為對象:
let obj = { apple : 10, orange : 20, banana : 30 };let entries = Object.entries(obj);entries;(3) [Array(2), Array(2), Array(2)] 0: (2) ["apple", 10] 1: (2) ["orange", 20] 2: (2) ["banana", 30]let fromEntries = Object.fromEntries(entries);{ apple: 10, orange: 20, banana: 30 }String.trimStart() 與 String.trimEnd()
let greeting = " Space around ";greeting.trimEnd(); // " Space around";greeting.trimStart(); // "Space around ";
格式良好的 JSON.stringify()
此更新修復了字符 U+D800 到 U+DFFF 的處理，有時可以進入 JSON 字符串。 這可能是一個問題，因為 JSON.stringify 可能會將這些數字格式化為沒有等效 UTF-8 字符的值, 但 JSON 格式需要 UTF-8 編碼。
解析方法使用格式良好的JSON字符串，如:
'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string注意，要創建正確 JSON 格式的字符串，絕對需要在屬性名周圍加上雙引號。缺少或任何其他類型的引號都不會生成格式良好的JSON。
'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format stringJSON 字符串格式與 Object Literal 不同，后者看起來幾乎一樣，但可以使用任何類型的引號括住屬性名，也可以包含方法(JSON格式不允許使用方法):
let object_literal = { property: 1, meth: () => {} };不管怎樣，一切似乎都很好。第一個示例看起來是兼容的。但它們也是簡單的例子，大多數情況下都能順利地工作!
U+2028 和 U+2029 字符
問題是， ES10 之前的 EcmaScript 實際上并不完全支持 JSON 格式。前 ES10 時代不接受未轉義行分隔符 U+2028 和段落分隔符 U+2029 字符:
對于 U+D800 - U+DFFF 之間的所有字符也是如此
如果這些字符潛入 JSON 格式的字符串(假設來自數據庫記錄)，你可能會花費數小時試圖弄清楚為什么程序的其余部分會產生解析錯誤。
因此，如果你傳遞 eval 這樣的字符串 “console.log(' hello ')”，它將執行 JavaScript語句 (通過嘗試將字符串轉換為實際代碼),也類似于 JSON.parse 將處理你的 JSON 字符串的方式。
穩定的 Array.prototype.sort()
V8 之前的實現對包含10個以上項的數組使用了一種不穩定的快速排序算法。
一個穩定的排序算法是當兩個鍵值相等的對象在排序后的輸出中出現的順序與在未排序的輸入中出現的順序相同時。
但情況不再是這樣了，ES10 提供了一個穩定的數組排序:
var fruit = [ { name: "Apple", count: 13, }, { name: "Pear", count: 12, }, { name: "Banana", count: 12, }, { name: "Strawberry", count: 11, }, { name: "Cherry", count: 11, }, { name: "Blackberry", count: 10, }, { name: "Pineapple", count: 10, }];// 創建排序函數:let my_sort = (a, b) => a.count - b.count;// 執行穩定的ES10排序:let sorted = fruit.sort(my_sort);console.log(sorted);控制臺輸出(項目以相反的順序出現):
新的Function.toString()
函數是對象，并且每個對象都有一個 .toString() 方法，因為它最初存在于Object.prototype.toString() 上。 所有對象（包括函數）都是通過基于原型的類繼承從它繼承的。
這意味著我們以前已經有 funcion.toString() 方法了。
但是 ES10 進一步嘗試標準化所有對象和內置函數的字符串表示。 以下是各種新案例：
典型的例子:
function () { console.log('Hello there.'); }.toString();控制臺輸出(函數體的字符串格式:)
⇨ function () { console.log('Hello there.'); }下面是剩下的例子:
直接在方法名 .toString()
Number.parseInt.toString();⇨ function parseInt() { [native code] }綁定上下文:
function () { }.bind(0).toString();⇨ function () { [native code] }內置可調用函數對象:
Symbol.toString();⇨ function Symbol() { [native code] }動態生成的函數:
function* () { }.toString();⇨ function* () { }prototype.toString
Function.prototype.toString.call({});⇨ Function.prototype.toString requires that 'this' be a Function"可選的 Catch Binding
在過去，try/catch 語句中的 catch 語句需要一個變量。 try/catch 語句幫助捕獲終端級別的錯誤:
try { // Call a non-existing function undefined_Function undefined_Function("I'm trying");}catch(error) { // Display the error if statements inside try above fail console.log( error ); // undefined_Function is undefined}在某些情況下，所需的錯誤變量是未使用的:
try { JSON.parse(text); // <--- this will fail with "text not defined" return true; <--- exit without error even if there is one}catch (redundant_sometmes) <--- this makes error variable redundant{ return false;}編寫此代碼的人通過嘗試強制 true 退出 try 子句。但是，這并不是實際發生的情況
(() => { try { JSON.parse(text) return true } catch(err) { return false }})()=> false在 ES10 中，捕獲錯誤的變量是可選的
現在可以跳過錯誤變量:
try { JSON.parse(text); return true;}catch{ return false;}目前還無法測試上一個示例中的 try 語句的結果，但一旦它出來，我將更新這部分。
標準化 globalThis 對象
這在ES10之前， globalThis 還沒有標準化。
在產品代碼中，你可以自己編寫這個怪物，在多個平臺上“標準化”它:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object');};但即使這樣也不總是奏效。因此，ES10 添加了 globalThis 對象，從現在開始，該對象用于在任何平臺上訪問全局作用域:
// 訪問全局數組構造函數globalThis.Array(0, 1, 2);⇨ [0, 1, 2]// 類似于 ES5 之前的 window.v = { flag: true }globalThis.v = { flag: true };console.log(globalThis.v);⇨ { flag: true }Symbol.description
description 是一個只讀屬性，它返回 Symbol 對象的可選描述。
let mySymbol = 'My Symbol';let symObj = Symbol(mySymbol);symObj; // Symbol(My Symbol)symObj.description; // "My Symbol"
Hashbang 語法
也就是 unix 用戶熟悉的 shebang。它指定一個解釋器(什么將執行JavaScript文件?)。
ES10標準化，我不會對此進行詳細介紹，因為從技術上講，這并不是一個真正的語言特性，但它基本上統一了 JavaScript 在服務器端的執行方式。
$ ./index.js
代替
$ node index.js
ES10類:private、static 和 公共成員
新的語法字符 #octothorpe（hash tag）現在用于直接在類主體的范圍內定義變量，函數，getter 和 setter ......以及構造函數和類方法。
下面是一個毫無意義的例子，它只關注新語法:
class Raven extends Bird {#state = { eggs: 10};// getter get #eggs() { return state.eggs; }// setter set #eggs(value) { this.#state.eggs = value; }#lay() { this.#eggs++; }constructor() { super(); this.#lay.bind(this); }#render() { /* paint UI */ }}老實說，我認為這會讓語言更難讀。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
