JavaScript ES2019中的8個(gè)新特性詳解

2024-05-06 16:48:15

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

JavaScript 不斷改進(jìn)和添加更多功能。TC39 已經(jīng)完成并批準(zhǔn)了 ES2019 的這 8 個(gè)功能，它有 4 個(gè)階段，這些階段是：

Stage 0: Strawman
Stage 1: Proposals
Stage 2: Drafts
Stage 3: Candidates
Stage 4: Finished/Approved

以下鏈接可以查看Stage 0，Stage 1 – 3 和Final Stage

可選的 Catch 綁定

能夠在不使用 catch 綁定的地方選擇性地刪除它

try { // trying to use a new ES2019 feature // which may not be implemented in other browsers} catch (unused) { // revert back to old way}

現(xiàn)在可以刪除未使用的綁定

try { ...} catch { ...}

JSON 超集

此提議的動(dòng)機(jī)是 JSON 字符串可以包含未轉(zhuǎn)義的 U + 2028 LINE SEPARATOR 和 U + 2029 PARAGRAPH SEPARATOR 字符，而 ECMAScript 字符串則不能。在 ES2019 之前，它會(huì)產(chǎn)生錯(cuò)誤SyntaxError: Invalid or unexpected token

const LS = eval('"/u2028"');const PS = eval("'/u2029'");

符號(hào)說明

在 ES2015 中引入符號(hào)，具有非常獨(dú)特的功能。在 ES2019 中，它現(xiàn)在可以提供給定的描述。其目的是避免間接獲得所提供的描述Symbol.prototype.toString

const mySymbol = Symbol("myDescription");console.log(mySymbol); // Symbol(myDescription)console.log(mySymbol.toString()); // Symbol(myDescription)console.log(mySymbol.description); // myDescription

Function.prototype.toString - 修訂版

我們之前已經(jīng)在函數(shù)原型中使用了toString方法，但是在 ES2019 中它已被修改并包含函數(shù)內(nèi)的注釋，請(qǐng)注意它在Arrow Functions上不起作用。

function /* comment */ foo /* another comment */() {}// Beforeconsole.log(foo.toString()); // function foo(){}// Now ES2019console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}// Arrow Syntaxconst bar /* comment */ = /* another comment */ () => {};console.log(bar.toString()); // () => {}

Object.fromEntries

它是 Object.entries 的反向方法，它也是克隆對(duì)象的方法之一

const obj = { prop1: 1, prop2: 2};const entries = Object.entries(obj);console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]const fromEntries = Object.fromEntries(entries);console.log(fromEntries); // Object { prop1: 1, prop2: 2 }console.log(obj === fromEntries); // false

注意：任何嵌入式對(duì)象/數(shù)組都只是通過引用復(fù)制。

格式良好的 JSON.stringify

這也是由同一個(gè)人提出的，并且與 JSON 超集特征有關(guān) 。ES2019 不是將未配對(duì)的代理代碼點(diǎn)作為單個(gè) UTF-16 代碼單元返回，而是用 JSON 轉(zhuǎn)義序列表示它們

// Beforeconsole.log(JSON.stringify("/uD800")); // "?"// Now ES2019console.log(JSON.stringify("/uD800")); // "/ud800"

String.prototype trimStart 和 trimEnd

我們已經(jīng)在 String 原型中使用了trim方法，它刪除了字符串開頭和結(jié)尾之間的空格。但是現(xiàn)在開始介紹 ES2019 的 trimStart和trimEnd

// Trimconst name = "  Codedam ";console.log(name.trim()); // "Codedam"// Trim Startconst description = "  Unlocks Secret Codes ";console.log(description.trimStart()); // "Unlocks Secret Codes "// Trim Endconst category = " JavaScript ";console.log(category.trimEnd()); // " JavaScript"

Array.prototype flat 和 flatMap

flat方法創(chuàng)建一個(gè)新數(shù)組，所有子數(shù)組元素以遞歸方式連接到指定的深度。默認(rèn)情況下，深度為 1，使數(shù)組上第一層嵌套數(shù)組變平。

const arr = [1, 2, [3, 4, [5, 6]]];arr.flat(); // [1, 2, 3, 4, [5, 6]]arr.flat(2); // [1, 2, 3, 4, 5, 6]// You can use Infinity to flatten all the nested arrays no matter how deep the array isconst arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap 類似于 flat 并且與 map 相關(guān)，其中它映射數(shù)組然后將其展平

const arr = ["Codedam", "is Awsome", "!"];const mapResult = arr.map(item => item.split(" "));console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]const flatMapResult = arr.flatMap(chunk => chunk.split(" "));console.log(flatMapResult); // ['Codedam', 'is', 'Awsome', '!'];

其他

強(qiáng)調(diào)一下現(xiàn)在 Stage 3 中的一些有用的即將推出的功能。