這篇文章給大家分享的是有關(guān)ES10新特性有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
成都創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、肅寧網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性?xún)r(jià)比高,為肅寧等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
ES10 雖然沒(méi)有像 ES6 那么多新特性,但 ES10 仍然有一些有用的特性。文本通過(guò)簡(jiǎn)單示例來(lái)介紹了 ES10 新出來(lái)的特性。通過(guò)這種方式,咱們就可以快速理解,而不需要看太多的官方解釋。
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 是第七種 原始類(lèi)型
動(dòng)態(tài)導(dǎo)入
標(biāo)準(zhǔn)化 globalThis 對(duì)象
1. Array.flat() && Array.flatMap
Array.flat()
方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。
Array.flatMap()
方法首先使用映射函數(shù)映射每個(gè)元素,然后將結(jié)果壓縮成一個(gè)新數(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()
方法把鍵值對(duì)列表轉(zhuǎn)換為一個(gè)對(duì)象。
事例一:
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
早期的一個(gè)問(wèn)題是,如何編寫(xiě)正則表達(dá)式“match all”
?
最佳的答案將建議 String.match
與正則表達(dá)式和 /g
一起使用或者帶有 /g
的 RegExp.exec
或者帶有 /g
的 RegExp.test
。
咱們先看看舊規(guī)范是如何工作的。
帶字符串參數(shù)的 String.match
僅返回第一個(gè)匹配:
let string = 'Hello'; let matches = string.match('l'); console.log(matches[0]); // "l"
結(jié)果是單個(gè) "l"
(注意:匹配存儲(chǔ)在 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
方法呢? 在解疑這個(gè)問(wèn)題之前,先來(lái)看看 捕獲組。
正則表達(dá)式捕獲組
在 regex
中捕獲組只是從 ()
括號(hào)中提取一個(gè)模式,可以使用 /regex/.exec(string)
和string.match
捕捉組。
常規(guī)捕獲組是通過(guò)將模式包裝在 (pattern)
中創(chuàng)建的,但是要在結(jié)果對(duì)象上創(chuàng)建 groups
屬性,它是: (?<name>pattern)
。
要?jiǎng)?chuàng)建一個(gè)新的組名,只需在括號(hào)內(nèi)附加 ?<name>
,結(jié)果中,分組 (pattern)
匹配將成為 group.name
,并附加到 match
對(duì)象,以下是一個(gè)實(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
方法來(lái)遍歷整個(gè)搜索結(jié)果集。 在每次迭代期間調(diào)用.exec
時(shí),將顯示下一個(gè)結(jié)果(它不會(huì)立即返回所有匹配項(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
但奇怪的是:
如果你從這個(gè)正則表達(dá)式中刪除/g
,你將永遠(yuǎn)在第一個(gè)結(jié)果上創(chuàng)建一個(gè)無(wú)限循環(huán)。這在過(guò)去是一個(gè)巨大的痛苦。想象一下,從某個(gè)數(shù)據(jù)庫(kù)接收正則表達(dá)式時(shí),你不確定它的末尾是否有/g
,你得先檢查一下。
使用 .matchAll()
的好理由
在與捕獲組一起使用時(shí),它可以更加優(yōu)雅,捕獲組只是使用 () 提取模式的正則表達(dá)式的一部分。
它返回一個(gè)迭代器而不是一個(gè)數(shù)組,迭代器本身是有用的。
迭代器可以使用擴(kuò)展運(yùn)算符 (…) 轉(zhuǎn)換為數(shù)組。
它避免了帶有 /g 標(biāo)志的正則表達(dá)式,當(dāng)從數(shù)據(jù)庫(kù)或外部源檢索未知正則表達(dá)式并與陳舊的RegEx 對(duì)象一起使用時(shí),它非常有用。
使用 RegEx 對(duì)象創(chuàng)建的正則表達(dá)式不能使用點(diǎn) (.) 操作符鏈接。
高級(jí): RegEx 對(duì)象更改跟蹤最后匹配位置的內(nèi)部 .lastindex 屬性,這在復(fù)雜的情況下會(huì)造成嚴(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);
這一次你可以跳過(guò) /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); }
請(qǐng)注意已經(jīng)沒(méi)有 /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
不會(huì)導(dǎo)致無(wú)限循環(huán)。
綜合事例:
4.String.trimStart() 與 String.trimEnd()
trimStart()
:刪除字符串的開(kāi)頭空格。
trimEnd()
:刪除字符串末尾的空格。
事例一:
let greeting = " Space around "; greeting.trimEnd(); // " Space around"; greeting.trimStart(); // "Space around ";
事例二:
5.Symbol.Description
description
是一個(gè)只讀屬性,它會(huì)返回 Symbol
對(duì)象的可選描述的字符串。
事例一:
let mySymbol = 'My Symbol'; let symObj = Symbol(mySymbol); symObj; // Symbol(My Symbol) symObj.description; // "My Symbol"
事例二:
6.catch 的參數(shù)可以省略
在過(guò)去,try/catch
語(yǔ)句中的 catch
語(yǔ)句需要一個(gè)變量。 try/catch
語(yǔ)句幫助捕獲終端級(jí)別的錯(cuò)誤:
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 }
在某些情況下,所需的錯(cuò)誤變量是未使用的:
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 中,捕獲錯(cuò)誤的變量是可選的,現(xiàn)在可以跳過(guò)錯(cuò)誤變量:
事例一:
try { JSON.parse(text); return true; } catch { return false; }
事例二:
7. JSON ? ECMAScript
什么是 JSON 超集?還記得 ?
這個(gè)符號(hào)的可以這樣解釋該提案 JSON ? ECMAScript,簡(jiǎn)而言之就是讓 ECMAScript 兼容所有 JSON 支持的文本。ECMAScript 曾在標(biāo)準(zhǔn) JSON.parse 部分闡明 JSON 確為其一個(gè)子集,但由于 JSON 內(nèi)容可以正常包含 U+2028
行分隔符與 U+2029
段落分隔符而 ECMAScript 卻不行。
該草案旨在解決這一問(wèn)題。在這之前,如果你使用 JSON.parse()
執(zhí)行帶如上特殊字符的字符串時(shí),只會(huì)收到 SyntaxError
的錯(cuò)誤提示。該草案同樣是向后兼容的,其對(duì)用戶(hù)唯一的影響是保持原樣,即在暫不支持特殊字符解析的運(yùn)行環(huán)境中保持 SyntaxError
的報(bào)錯(cuò)。
8.格式良好的 JSON.stringify()
此更新修復(fù)了字符 U+D800
到 U+DFFF
的處理,有時(shí)可以進(jìn)入 JSON 字符串。 這可能是一個(gè)問(wèn)題,因?yàn)?JSON.stringify
可能會(huì)將這些數(shù)字格式化為沒(méi)有等效 UTF-8
字符的值, 但 JSON 格式需要 UTF-8 編碼。
解析方法使用格式良好的JSON字符串,如:
'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string
注意,要?jiǎng)?chuàng)建正確 JSON 格式的字符串,絕對(duì)需要在屬性名周?chē)由想p引號(hào)。缺少或任何其他類(lèi)型的引號(hào)都不會(huì)生成格式良好的JSON。
'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format string
JSON 字符串格式與 Object Literal 不同,后者看起來(lái)幾乎一樣,但可以使用任何類(lèi)型的引號(hào)括住屬性名,也可以包含方法(JSON格式不允許使用方法):
let object_literal = { property: 1, meth: () => {} };
不管怎樣,一切似乎都很好。第一個(gè)示例看起來(lái)是兼容的。但它們也是簡(jiǎn)單的例子,大多數(shù)情況下都能順利地工作!
U+2028 和 U+2029 字符
問(wèn)題是, ES10 之前的 EcmaScript 實(shí)際上并不完全支持 JSON 格式。前 ES10 時(shí)代不接受未轉(zhuǎn)義行分隔符 U+2028
和段落分隔符 U+2029
字符:
對(duì)于 U+D800 - U+DFFF 之間的所有字符也是如此
如果這些字符潛入 JSON 格式的字符串(假設(shè)來(lái)自數(shù)據(jù)庫(kù)記錄),你可能會(huì)花費(fèi)數(shù)小時(shí)試圖弄清楚為什么程序的其余部分會(huì)產(chǎn)生解析錯(cuò)誤。
因此,如果你傳遞 eval
這樣的字符串 “console.log(' hello ')”
,它將執(zhí)行 JS語(yǔ)句 (通過(guò)嘗試將字符串轉(zhuǎn)換為實(shí)際代碼),也類(lèi)似于 JSON.parse
將處理你的 JSON 字符串的方式。
ES10建議的解決方案是將未配對(duì)的代理代碼點(diǎn)表示為JSON轉(zhuǎn)義序列,而不是將它們作為單個(gè)UTF-16
代碼單元返回。
9.穩(wěn)定的 Array.prototype.sort()
V8 之前的實(shí)現(xiàn)對(duì)包含10個(gè)以上項(xiàng)的數(shù)組使用了一種不穩(wěn)定的快速排序算法。
一個(gè)穩(wěn)定的排序算法是當(dāng)兩個(gè)鍵值相等的對(duì)象在排序后的輸出中出現(xiàn)的順序與在未排序的輸入中出現(xiàn)的順序相同時(shí)。
但情況不再是這樣了,ES10 提供了一個(gè)穩(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);
控制臺(tái)輸出(項(xiàng)目以相反的順序出現(xiàn)):
事例二:
10.新的 Function.toString()
函數(shù)是對(duì)象,并且每個(gè)對(duì)象都有一個(gè) .toString()
方法,因?yàn)樗畛醮嬖谟?code>Object.prototype.toString() 上。 所有對(duì)象(包括函數(shù))都是通過(guò)基于原型的類(lèi)繼承從它繼承的。
這意味著我們以前已經(jīng)有 funcion.toString()
方法了。
但是 ES10 進(jìn)一步嘗試標(biāo)準(zhǔn)化所有對(duì)象和內(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ù)對(duì)象:
Symbol.toString(); ? function Symbol() { [native code] }
動(dòng)態(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 是第七種 原始類(lèi)型。
BigInt 是一個(gè)任意精度的整數(shù)。這意味著變量現(xiàn)在可以 表示²?³
數(shù)字,而不僅僅是9007199254740992
。
const b = 1n; // 追加 n 以創(chuàng)建 BigInt
在過(guò)去,不支持大于 9007199254740992
的整數(shù)值。如果超過(guò),該值將鎖定為 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.動(dòng)態(tài)導(dǎo)入
動(dòng)態(tài)導(dǎo)入返回請(qǐng)求模塊的模塊名稱(chēng)空間對(duì)象的promise
。因此,可以配合使用async/await
。
事例一:
element.addEventListener('click', async() => { const module = await import(`./api-scripts/button-click.js`); module.clickEvent(); })
事例二:
13.標(biāo)準(zhǔn)化 globalThis 對(duì)象
這在ES10之前, globalThis 還沒(méi)有標(biāo)準(zhǔn)化,在平時(shí)的項(xiàng)目可以通過(guò)以下方式來(lái)兼容不同的平臺(tái):
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
對(duì)象,從現(xiàn)在開(kāi)始,該對(duì)象用于在任何平臺(tái)上訪問(wèn)全局作用域:
但即使這樣也不總是奏效。因此,ES10 添加了 globalThis 對(duì)象,從現(xiàn)在開(kāi)始,該對(duì)象用于在任何平臺(tái)上訪問(wèn)全局作用域:
JS 是一種動(dòng)態(tài)語(yǔ)言,這對(duì) web 開(kāi)發(fā)非常有益。自 2015 年 ES6 出現(xiàn)以來(lái),JS 語(yǔ)言經(jīng)歷了一次充滿(mǎn)活力的演變。在這篇文章中,咱們回顧了ES10(2019)中出現(xiàn)的特性,并介紹了一些將在ES11(2020)
中保持穩(wěn)定的特性,因?yàn)樗鼈兲幱趕tate 3,并且很可能在下一個(gè)版本中被標(biāo)準(zhǔn)化。
盡管這些特性中的許多對(duì)于Web應(yīng)用程序的開(kāi)發(fā)可能不是必需的,但是一些特性可以規(guī)制咱們以前通過(guò)技巧或大量冗長(zhǎng)實(shí)現(xiàn)的代碼。
代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道,事后為了解決這些BUG,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試,這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
感謝各位的閱讀!關(guān)于“ES10新特性有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
標(biāo)題名稱(chēng):ES10新特性有哪些
本文地址:http://muchs.cn/article48/pipohp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)