ES10 雖然沒有像 ES6 那么多新特性，但 ES10 仍然有一些有用的特性。文本通過簡單示例來介紹了 ES10 新出來的特性。通過這種方式，咱們就可以快速理解，而不需要看太多的官方解釋。

ES10 新特性主要如下：

• 數(shù)組方法：flat和flatMap
• Object.fromEntries
• 字符串方法：trimStart 和 trimEnd
• Symbol 的 description 屬性
• try { } catch {} // catch 的參數(shù)可以省略了
• JSON ⊂ ECMAScript (讓 ECMAScript 兼容所有 JSON 支持的文本)
• 格式良好的 JSON.stringify()
• 穩(wěn)定的 Array.prototype.sort()
• 修正后的 Function.toString
• BigInt 是第七種 原始類型
• 動態(tài)導(dǎo)入
• 標(biāo)準(zhǔn)化 globalThis 對象

1. Array.flat() && Array.flatMap

Array.flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

Array.flatMap() 方法首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合并成一種方法的效率稍微高一些。

事例一：

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]);

array 現(xiàn)在的結(jié)果：

[Array(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]

使用 flatMap 方式：

array.flatMap(v => [v, v * 2]);
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

綜合示例：

2.Object.fromEntries()

Object.fromEntries() 方法把鍵值對列表轉(zhuǎn)換為一個對象。

事例一：

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 }

事例二：

3.String.protype.matchAll

早期的一個問題是，如何編寫正則表達(dá)式“match all”？

最佳的答案將建議 String.match 與正則表達(dá)式和 /g 一起使用或者帶有 /g 的 RegExp.exec 或者帶有 /g 的 RegExp.test 。

咱們先看看舊規(guī)范是如何工作的。

帶字符串參數(shù)的 String.match 僅返回第一個匹配：

let string = 'Hello';
let matches = string.match('l');
console.log(matches[0]); // "l"

結(jié)果是單個 "l"（注意：匹配存儲在 matches[0] 中而不是 matches）

將 string.match 與 regex 參數(shù)一起使用也是如此：

使用正則表達(dá)式 /l/ 找到字符 串“hello” 中的 “l(fā)” 字符：

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(fā)”, “l(fā)”];

那么為什么要使用全新的 matchAll 方法呢? 在解疑這個問題之前，先來看看 捕獲組。

正則表達(dá)式捕獲組

在 regex 中捕獲組只是從 () 括號中提取一個模式，可以使用 /regex/.exec(string) 和string.match 捕捉組。

常規(guī)捕獲組是通過將模式包裝在 (pattern) 中創(chuàng)建的，但是要在結(jié)果對象上創(chuàng)建 groups 屬性，它是: (?<name>pattern)。

要創(chuàng)建一個新的組名，只需在括號內(nèi)附加 ?<name>，結(jié)果中，分組 (pattern) 匹配將成為 group.name，并附加到 match 對象，以下是一個實(shí)例：

字符串標(biāo)本匹配：

這里創(chuàng)建了 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);
}

需要多次調(diào)用 regex.exec 方法來遍歷整個搜索結(jié)果集。 在每次迭代期間調(diào)用.exec 時，將顯示下一個結(jié)果（它不會立即返回所有匹配項(xiàng)），因此使用 while 循環(huán)。

輸出如下：

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

但奇怪的是:

如果你從這個正則表達(dá)式中刪除 /g，你將永遠(yuǎn)在第一個結(jié)果上創(chuàng)建一個無限循環(huán)。這在過去是一個巨大的痛苦。想象一下，從某個數(shù)據(jù)庫接收正則表達(dá)式時，你不確定它的末尾是否有 /g，你得先檢查一下。

使用 .matchAll() 的好理由

• 在與捕獲組一起使用時，它可以更加優(yōu)雅,捕獲組只是使用 () 提取模式的正則表達(dá)式的一部分。
• 它返回一個迭代器而不是一個數(shù)組，迭代器本身是有用的。
• 迭代器可以使用擴(kuò)展運(yùn)算符 (…) 轉(zhuǎn)換為數(shù)組。
• 它避免了帶有 /g 標(biāo)志的正則表達(dá)式，當(dāng)從數(shù)據(jù)庫或外部源檢索未知正則表達(dá)式并與陳舊的RegEx 對象一起使用時，它非常有用。
• 使用 RegEx 對象創(chuàng)建的正則表達(dá)式不能使用點(diǎn) (.) 操作符鏈接。
• 高級: RegEx 對象更改跟蹤最后匹配位置的內(nèi)部 .lastindex 屬性，這在復(fù)雜的情況下會造成嚴(yán)重破壞。

.matchAll() 是如何工作的?

咱們嘗試匹配單詞 hello 中字母 e 和 l 的所有實(shí)例， 因?yàn)榉祷亓说?，所以可以使?for…of 循環(huán)遍歷它：

// Match all occurrences of the letters: "e" or "l" 
let iterator = "hello".matchAll(/[el]/);
for (const match of iterator)
  console.log(match);

這一次你可以跳過 /g， .matchall 方法不需要它，結(jié)果如下:

[ 'e', index: 1, input: 'hello' ] // Iteration 1
[ 'l', index: 2, input: 'hello' ] // Iteration 2
[ 'l', index: 3, input: 'hello' ] // Iteration 3

使用 .matchAll() 捕獲組示例：

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);
}

請注意已經(jīng)沒有 /g 標(biāo)志，因?yàn)?.matchAll() 已經(jīng)包含了它，打印如下：

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

也許在美學(xué)上它與原始正則表達(dá)式非常相似，執(zhí)行while循環(huán)實(shí)現(xiàn)。但是如前所述，由于上面提到的許多原因，這是更好的方法，移除 /g 不會導(dǎo)致無限循環(huán)。

綜合事例：

4.String.trimStart() 與 String.trimEnd()

trimStart() ：刪除字符串的開頭空格。

trimEnd() ：刪除字符串末尾的空格。

事例一：

let greeting = "   Space around   ";
greeting.trimEnd();  // "   Space around";
greeting.trimStart(); // "Space around   ";

事例二：

5.Symbol.Description

description 是一個只讀屬性，它會返回 Symbol 對象的可選描述的字符串。

事例一：

let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
symObj.description; // "My Symbol"

事例二：

6.catch 的參數(shù)可以省略

在過去，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;
}

在 ES10 中，捕獲錯誤的變量是可選的，現(xiàn)在可以跳過錯誤變量:

事例一：

try {
  JSON.parse(text);
  return true;
}
catch
{
  return false;
}

事例二：

7. JSON ⊂ ECMAScript

什么是 JSON 超集？還記得 ⊂ 這個符號的可以這樣解釋該提案 JSON ⊂ ECMAScript，簡而言之就是讓 ECMAScript 兼容所有 JSON 支持的文本。ECMAScript 曾在標(biāo)準(zhǔn) JSON.parse 部分闡明 JSON 確為其一個子集，但由于 JSON 內(nèi)容可以正常包含 U+2028 行分隔符與 U+2029 段落分隔符而 ECMAScript 卻不行。

該草案旨在解決這一問題。在這之前，如果你使用 JSON.parse() 執(zhí)行帶如上特殊字符的字符串時，只會收到 SyntaxError 的錯誤提示。該草案同樣是向后兼容的，其對用戶唯一的影響是保持原樣，即在暫不支持特殊字符解析的運(yùn)行環(huán)境中保持 SyntaxError 的報錯。

8.格式良好的 JSON.stringify()

此更新修復(fù)了字符 U+D800 到 U+DFFF 的處理，有時可以進(jìn)入 JSON 字符串。 這可能是一個問題，因?yàn)?JSON.stringify 可能會將這些數(shù)字格式化為沒有等效 UTF-8 字符的值, 但 JSON 格式需要 UTF-8 編碼。

解析方法使用格式良好的JSON字符串，如:

'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string

注意，要創(chuàng)建正確 JSON 格式的字符串，絕對需要在屬性名周圍加上雙引號。缺少或任何其他類型的引號都不會生成格式良好的JSON。

'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format string

JSON 字符串格式與 Object Literal 不同，后者看起來幾乎一樣，但可以使用任何類型的引號括住屬性名，也可以包含方法(JSON格式不允許使用方法):

let object_literal = { property: 1, meth: () => {} };

不管怎樣，一切似乎都很好。第一個示例看起來是兼容的。但它們也是簡單的例子，大多數(shù)情況下都能順利地工作!

U+2028 和 U+2029 字符

問題是， ES10 之前的 EcmaScript 實(shí)際上并不完全支持 JSON 格式。前 ES10 時代不接受未轉(zhuǎn)義行分隔符 U+2028 和段落分隔符 U+2029 字符:

對于 U+D800 - U+DFFF 之間的所有字符也是如此

如果這些字符潛入 JSON 格式的字符串(假設(shè)來自數(shù)據(jù)庫記錄)，你可能會花費(fèi)數(shù)小時試圖弄清楚為什么程序的其余部分會產(chǎn)生解析錯誤。

因此，如果你傳遞 eval 這樣的字符串 “console.log(' hello ')”，它將執(zhí)行 JS語句 (通過嘗試將字符串轉(zhuǎn)換為實(shí)際代碼),也類似于 JSON.parse 將處理你的 JSON 字符串的方式。

ES10建議的解決方案是將未配對的代理代碼點(diǎn)表示為JSON轉(zhuǎn)義序列，而不是將它們作為單個UTF-16代碼單元返回。

9.穩(wěn)定的 Array.prototype.sort()

V8 之前的實(shí)現(xiàn)對包含10個以上項(xiàng)的數(shù)組使用了一種不穩(wěn)定的快速排序算法。

一個穩(wěn)定的排序算法是當(dāng)兩個鍵值相等的對象在排序后的輸出中出現(xiàn)的順序與在未排序的輸入中出現(xiàn)的順序相同時。

但情況不再是這樣了，ES10 提供了一個穩(wěn)定的數(shù)組排序:

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, }
];
// 創(chuàng)建排序函數(shù):
let my_sort = (a, b) => a.count - b.count;
// 執(zhí)行穩(wěn)定的ES10排序:
let sorted = fruit.sort(my_sort);
console.log(sorted);

控制臺輸出(項(xiàng)目以相反的順序出現(xiàn)):

事例二：

10.新的 Function.toString()

函數(shù)是對象，并且每個對象都有一個 .toString() 方法，因?yàn)樗畛醮嬖谟?code>Object.prototype.toString() 上。 所有對象（包括函數(shù)）都是通過基于原型的類繼承從它繼承的。

這意味著我們以前已經(jīng)有 funcion.toString() 方法了。

但是 ES10 進(jìn)一步嘗試標(biāo)準(zhǔn)化所有對象和內(nèi)置函數(shù)的字符串表示。 以下是各種新案例：

典型的例子:

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] }

內(nèi)置可調(diào)用函數(shù)對象:

Symbol.toString();
⇨ function Symbol() { [native code] }

動態(tài)生成的函數(shù):

function* () { }.toString();
⇨ function* () { }

prototype.toString

Function.prototype.toString.call({});
⇨ Function.prototype.toString requires that 'this' be a Function"

11.BigInt -任意精度整數(shù)

BigInt 是第七種 原始類型。

BigInt 是一個任意精度的整數(shù)。這意味著變量現(xiàn)在可以 表示²⁵³ 數(shù)字，而不僅僅是9007199254740992。

const b = 1n; // 追加 n 以創(chuàng)建 BigInt

在過去，不支持大于 9007199254740992 的整數(shù)值。如果超過，該值將鎖定為 MAX_SAFE_INTEGER + 1:

const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
limit + 1;
⇨ 9007199254740992
limit + 2;
⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceeded
const larger = 9007199254740991n;
⇨ 9007199254740991n
const integer = BigInt(9007199254740991); // initialize with number
⇨ 9007199254740991n
const same = BigInt("9007199254740991"); // initialize with "string"
⇨ 9007199254740991n

12.動態(tài)導(dǎo)入

動態(tài)導(dǎo)入返回請求模塊的模塊名稱空間對象的promise 。因此，可以配合使用async/await。

事例一：

element.addEventListener('click', async() => {
 const module = await import(`./api-scripts/button-click.js`);
 module.clickEvent();
})

事例二：

13.標(biāo)準(zhǔn)化 globalThis 對象

這在ES10之前， globalThis 還沒有標(biāo)準(zhǔn)化，在平時的項(xiàng)目可以通過以下方式來兼容不同的平臺：

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 對象，從現(xiàn)在開始，該對象用于在任何平臺上訪問全局作用域:

但即使這樣也不總是奏效。因此，ES10 添加了 globalThis 對象，從現(xiàn)在開始，該對象用于在任何平臺上訪問全局作用域:

總結(jié)

JS 是一種動態(tài)語言，這對 web 開發(fā)非常有益。自 2015 年 ES6 出現(xiàn)以來，JS 語言經(jīng)歷了一次充滿活力的演變。在這篇文章中，咱們回顧了ES10(2019)中出現(xiàn)的特性，并介紹了一些將在ES11(2020)中保持穩(wěn)定的特性，因?yàn)樗鼈兲幱趕tate 3，并且很可能在下一個版本中被標(biāo)準(zhǔn)化。

盡管這些特性中的許多對于Web應(yīng)用程序的開發(fā)可能不是必需的，但是一些特性可以規(guī)制咱們以前通過技巧或大量冗長實(shí)現(xiàn)的代碼。

代碼部署后可能存在的BUG沒法實(shí)時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

原文：https://dev.to/carlillo/12-es10-features-in-12-simple-examples-2cbn

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論