摘要：它返回一個迭代器而不是一個數(shù)組，迭代器本身是有用的。高級對象更改跟蹤最后匹配位置的內(nèi)部屬性，這在復雜的情況下會造成嚴重破壞。它是一個迭代器，可以用循環(huán)遍歷它這就是整個語法的不同。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

ES10 還只是一個草案。但是除了 Object.fromEntries 之外，Chrome 的大多數(shù)功能都已經(jīng)實現(xiàn)了，為什么不早點開始探索呢?當所有瀏覽器都開始支持它時，你將走在前面，這只是時間問題。

在新的語言特性方面，ES10 不如 ES6 重要，但它確實添加了一些有趣的特性(其中一些功能目前還無法在瀏覽器中工作: 2019/02/21)

在 ES6 中，箭頭函數(shù)無疑是最受歡迎的新特性，在 ES10 中會是什么呢?

BigInt 是第七種 原始類型。

BigInt 是一個任意精度的整數(shù)。這意味著變量現(xiàn)在可以 表示2?3 數(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

typeof 10;
? "number"
typeof 10n;
? "bigint"

10n === BigInt(10);
? true
10n == 10;
? true

200n / 10n
? 20n
200n / 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 可能已經(jīng)在 Chrome C73 中正式實現(xiàn)了——如果不是，它仍然值得一看。特別是如果你是一個正則表達式(regex)愛好者。

如果您運行谷歌搜索JavaScript string match all，第一個結(jié)果將是這樣的：如何編寫正則表達式“match all”？

最佳結(jié)果將建議 String.match 與正則表達式和 /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）

在“hello”中搜索 "l" 只返回 "l"。

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

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

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

let string = "Hello";
let ret = string.match(/l/g); // (2) [“l(fā)”, “l(fā)”];

很好，我們使用 < ES10 方式得到了多個匹配，它一直起作用。

那么為什么要使用全新的 matchAll 方法呢? 在我們更詳細地回答這個問題之前，讓我們先來看看 捕獲組。如果不出意外，你可能會學到一些關(guān)于正則表達式的新知識。

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

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

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

字符串標本匹配：

這里創(chuàng)建了 match.groups.color 和 match.groups.bird ：

const string = "black*raven lime*parrot white*seagull";
const regex = /(?.*?)*(?[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é)果（它不會立即返回所有匹配項。），因此使用 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

但奇怪的是:

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

在與捕獲組一起使用時，它可以更加優(yōu)雅,捕獲組只是使用 () 提取模式的正則表達式的一部分。

它返回一個迭代器而不是一個數(shù)組，迭代器本身是有用的。

迭代器可以使用擴展運算符 (…) 轉(zhuǎn)換為數(shù)組。

它避免了帶有 /g 標志的正則表達式，當從數(shù)據(jù)庫或外部源檢索未知正則表達式并與陳舊的RegEx 對象一起使用時，它非常有用。

使用 RegEx 對象創(chuàng)建的正則表達式不能使用點 (.) 操作符鏈接。

高級: RegEx 對象更改跟蹤最后匹配位置的內(nèi)部 .lastindex 屬性，這在復雜的情況下會造成嚴重破壞。

讓我們嘗試匹配單詞 hello 中字母 e 和 l 的所有實例， 因為返回了迭代器，所以可以使用 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 具有上面列出的所有好處。它是一個迭代器，可以用 for…of 循環(huán)遍歷它,這就是整個語法的不同。

const string = "black*raven lime*parrot white*seagull";
const regex = /(?.*?)*(?[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 標志，因為 .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

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

現(xiàn)在可以將導入分配給變量：

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

扁平化多維數(shù)組：

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]

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

結(jié)果：

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

將鍵值對列表轉(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 }

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

此更新修復了字符 U+D800 到 U+DFFF 的處理，有時可以進入 JSON 字符串。 這可能是一個問題，因為 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ù)情況下都能順利地工作!

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

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

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

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

一個穩(wěn)定的排序算法是當兩個鍵值相等的對象在排序后的輸出中出現(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àn)):

函數(shù)是對象，并且每個對象都有一個 .toString() 方法，因為它最初存在于Object.prototype.toString() 上。 所有對象（包括函數(shù)）都是通過基于原型的類繼承從它繼承的。

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

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

function () { console.log("Hello there."); }.toString();

控制臺輸出(函數(shù)體的字符串格式:)

? function () { console.log("Hello there."); }

下面是剩下的例子:

Number.parseInt.toString();
? function parseInt() { [native code] }

function () { }.bind(0).toString();
? function () { [native code] }

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

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

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

在過去，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 子句。但是，這并不是實際發(fā)生的情況

(() => {
    try {
        JSON.parse(text)
        return true
    } catch(err) {
        return false
    }
})()
=> false

現(xiàn)在可以跳過錯誤變量:

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

目前還無法測試上一個示例中的 try 語句的結(jié)果，但一旦它出來，我將更新這部分。

這在ES10之前， globalThis 還沒有標準化。

在產(chǎn)品代碼中，你可以自己編寫這個怪物，在多個平臺上“標準化”它:

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

// 訪問全局數(shù)組構(gòu)造函數(shù)
globalThis.Array(0, 1, 2);
? [0, 1, 2]

// 類似于 ES5 之前的 window.v = { flag: true }
globalThis.v = { flag: true };

console.log(globalThis.v);
? { flag: true }

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

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

也就是 unix 用戶熟悉的 shebang。它指定一個解釋器(什么將執(zhí)行JavaScript文件?)。

ES10標準化，我不會對此進行詳細介紹，因為從技術(shù)上講，這并不是一個真正的語言特性，但它基本上統(tǒng)一了 JavaScript 在服務器端的執(zhí)行方式。

$ ./index.js

代替

$ node index.js

新的語法字符 #octothorpe（hash tag）現(xiàn)在用于直接在類主體的范圍內(nèi)定義變量，函數(shù)，getter 和 setter ......以及構(gòu)造函數(shù)和類方法。

下面是一個毫無意義的例子，它只關(guān)注新語法:

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，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

原文：

https://medium.freecodecamp.o...

你的點贊是我持續(xù)分享好東西的動力，歡迎點贊！

干貨系列文章匯總?cè)缦?，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學習愛好者。我會經(jīng)常分享自己所學所看的干貨，在進階的路上，共勉！

關(guān)注公眾號，后臺回復福利，即可看到福利，你懂的。