摘要:可選的語句中的有時(shí)候并沒有用,思考下面代碼使用瀏覽器可能尚未實(shí)現(xiàn)的功能這里回調(diào)函數(shù)中已經(jīng)幫我們處理好的錯(cuò)誤此代碼中的回調(diào)的信息并沒有用處。
為了保證可讀性,本文采用意譯而非直譯。
ECMAScript 2015,也稱為ES6,是一個(gè)花了6年時(shí)間完成的主要版本。從那時(shí)起,負(fù)責(zé)ECMAScript標(biāo)準(zhǔn)開發(fā)的技術(shù)委員會39 (TC39)每年都會發(fā)布該標(biāo)準(zhǔn)的新版本。這個(gè)年度發(fā)布周期簡化了這個(gè)過程,并使新特性快速可用,JavaScript社區(qū)對此表示歡迎。
今年,ECMAScript 2019(簡稱ES2019)將會發(fā)布。 新功能包括Object.fromEntries(),trimStart(),trimEnd(),flat(),flatMap(),symbol對象的description屬性,可選的catch綁定等。
好消息是這些功能已經(jīng)在最新版本的Firefox和Chrome中實(shí)現(xiàn),并且它們也可以被轉(zhuǎn)換,以便舊版瀏覽器能夠處理它們。
1. Object.fromEntries()在JavaScript中,將數(shù)據(jù)從一種格式轉(zhuǎn)換為另一種格式非常常見。 為了便于將對象轉(zhuǎn)換為數(shù)組,ES2017引入了Object.entrie()方法。 此方法將對象作為參數(shù),并以[key,value]的形式返回對象自己的可枚舉字符串鍵控屬性對的數(shù)組。 例如:
const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]]
但是如果我們想要做相反的事情并將鍵值對列表轉(zhuǎn)換為對象呢? 某些編程語言(如Python)為此提供了dict()函數(shù)。 在Underscore.js和Lodash中還有_.fromPairs函數(shù)。
ES2019引入Object.fromEntries()方法為JavaScript帶來類似的功能, 此靜態(tài)方法允許你輕松地將鍵值對列表轉(zhuǎn)換為對象:
const myArray = [["one", 1], ["two", 2], ["three", 3]]; const obj = Object.fromEntries(myArray); console.log(obj); // => {one: 1, two: 2, three: 3}
如你所見,Object.fromEntries()與Object.entries()所做的事情正好相反。 雖然以前可以實(shí)現(xiàn)Object.fromEntries()相同的功能,但它實(shí)現(xiàn)方式有些復(fù)雜:
const myArray = [["one", 1], ["two", 2], ["three", 3]]; const Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {}) console.log(obj); // => {one: 1, two: 2, three: 3}
請記住,傳遞給Object.fromEntries()的參數(shù)可以是實(shí)現(xiàn)可迭代協(xié)議的任何對象,只要它返回一個(gè)兩元素,類似于數(shù)組的對象即可。
例如,在以下代碼中,Object.fromEntries() 將Map對象作為參數(shù),并創(chuàng)建一個(gè)新對象,其鍵和對應(yīng)值由Map中的對給出:
const map = new Map(); map.set("one", 1); map.set("two", 2); const obj = Object.fromEntries(map); console.log(obj); // => {one: 1, two: 2}
Object.fromEntries() 方法對于轉(zhuǎn)換對象也非常有用,思考以下代碼:
const obj = {a: 4, b: 9, c: 16}; // 將對象轉(zhuǎn)換為數(shù)組 const arr = Object.entries(obj); // 計(jì)算數(shù)字的平方根 const map = arr.map(([key, val]) => [key, Math.sqrt(val)]); // 將數(shù)組轉(zhuǎn)換回對象 const obj2 = Object.fromEntries(map); console.log(obj2); // => {a: 2, b: 3, c: 4}
上述代碼將對象中的值轉(zhuǎn)換為其平方根。 為此,它首先將對象轉(zhuǎn)換為數(shù)組,然后使用map()方法獲取數(shù)組中值的平方根,結(jié)果是可以轉(zhuǎn)換回對象的數(shù)組。
使用Object.fromEntries()的另一種情況是處理URL的查詢字符串,如本例所示
const paramsString = "param1=foo¶m2=baz"; const searchParams = new URLSearchParams(paramsString); Object.fromEntries(searchParams); // => {param1: "foo", param2: "baz"}
此代碼中,查詢字符串將傳遞給 URLSearchParams()構(gòu)造函數(shù)。 然后將返回值(即URLSearchParams對象實(shí)例)傳遞給Object.fromEntries() 方法,結(jié)果是一個(gè)包含每個(gè)參數(shù)作為屬性的對象。
Object.fromEntries() 方法目前是第4階段提案,這意味著它已準(zhǔn)備好包含在ES2019標(biāo)準(zhǔn)中。
2. trimStart() and trimEnd()trimStart()和trimEnd()方法在實(shí)現(xiàn)與trimLeft()和trimRight()相同。這些方法目前處于第4階段,將被添加到規(guī)范中,以便與padStart()和padEnd()保持一致,來看一些例子:
const str = " string "; // es2019 console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string" // 相同結(jié)果 console.log(str.trimLeft()); // => "string " console.log(str.trimRight()); // => " string"
對于Web兼容性,trimLeft() 和trimRight() 將保留為trimStart() 和trimEnd() 的別名。
3. flat() and flatMap()flat() 方法可以將多維數(shù)組展平成一維數(shù)組
const arr = ["a", "b", ["c", "d"]]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
以前,我們經(jīng)常使用reduce()或concat()來展平多維數(shù)組:
const arr = ["a", "b", ["c", "d"]]; const flattend = [].concat.apply([], arr); // or // const flattened = [].concat(...arr); console.log(flattened); // => ["a", "b", "c", "d"]
請注意,如果提供的數(shù)組中有空值,它們會被丟棄:
const arr = ["a", , , "b", ["c", "d"]]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
flat() 還接受一個(gè)可選參數(shù),該參數(shù)指定嵌套數(shù)組應(yīng)該被展平的級別數(shù)。 如果未提供參數(shù),則將使用默認(rèn)值1:
const arr = [10, [20, [30]]]; console.log(arr.flat()); // => [10, 20, [30]] console.log(arr.flat(1)); // => [10, 20, [30]] console.log(arr.flat(2)); // => [10, 20, 30]
flatMap() 方法將map()和flat()組合成一個(gè)方法。 它首先使用提供的函數(shù)的返回值創(chuàng)建一個(gè)新數(shù)組,然后連接該數(shù)組的所有子數(shù)組元素。 來個(gè)例子:
const arr = [4.25, 19.99, 25.5]; console.log(arr.map(value => [Math.round(value)])); // => [[4], [20], [26]] console.log(arr.flatMap(value => [Math.round(value)])); // => [4, 20, 26]
數(shù)組將被展平的深度級別為1.如果要從結(jié)果中刪除項(xiàng)目,只需返回一個(gè)空數(shù)組:
const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]]; // do not include items bigger than 9 arr.flatMap(value => { if (value >= 10) { return []; } else { return Math.round(value); } }); // returns: // => [7, 8, 9]
除了正在處理的當(dāng)前元素外,回調(diào)函數(shù)還將接收元素的索引和對數(shù)組本身的引用。flat()和flatMap()方法目前處于第4階段。
4.Symbol 對象的 description 屬性在創(chuàng)建Symbol時(shí),可以為調(diào)試目的向其添加description (描述)。有時(shí)候,能夠直接訪問代碼中的description 是很有用的。
ES2019 中為Symbol對象添加了只讀屬性 description ,該對象返回包含Symbol描述的字符串。
let sym = Symbol("foo"); console.log(sym.description); // => foo sym = Symbol(); console.log(sym.description); // => undefined // create a global symbol sym = Symbol.for("bar"); console.log(sym.description); // => bar5.可選的 catch
try catch 語句中的catch有時(shí)候并沒有用,思考下面代碼:
try { // 使用瀏覽器可能尚未實(shí)現(xiàn)的功能 } catch (unused) { // 這里回調(diào)函數(shù)中已經(jīng)幫我們處理好的錯(cuò)誤 }
此代碼中的catch回調(diào)的信息并沒有用處。 但這樣寫是為了避免SyntaxError錯(cuò)誤。 ES2019可以省略catch周圍的括號:
try { // ... } catch { // .... }另外:ES2020 的 String.prototype.matchAll
matchAll() 方法是ES2020 第4階段提議,它針對正則表達(dá)式返回所有匹配(包括捕獲組)的迭代器對象。
為了與match()方法保持一致,TC39 選擇了“matchAll”而不是其他建議的名稱,例如 “matches” 或 Ruby的 “scan”。看個(gè)簡單的例子:
const re = /(Dr. )w+/g; const str = "Dr. Smith and Dr. Anderson"; const matches = str.matchAll(re); for (const match of matches) { console.log(match); } // logs: // => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined] // => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
此正則表達(dá)式中的捕獲組匹配字符“Dr”,后跟一個(gè)點(diǎn)和一個(gè)空格。w+ 匹配任何單詞字符一次或多次。 并且g標(biāo)志指示引擎在整個(gè)字符串中搜索模式。
之前,必須在循環(huán)中使用exec()方法來實(shí)現(xiàn)相同的結(jié)果,這不是非常有效:
const re = /(Dr.) w+/g; const str = "Dr. Smith and Dr. Anderson"; let matches; while ((matches = re.exec(str)) !== null) { console.log(matches); } // logs: // => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined] // => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
重要的是要注意盡管match() 方法可以與全局標(biāo)志g一起使用來訪問所有匹配,但它不提供匹配的捕獲組或索引位置。 比較以下代碼:
const re = /page (d+)/g; const str = "page 2 and page 10"; console.log(str.match(re)); // => ["page 2", "page 10"] console.log(...str.matchAll(re)); // => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] // => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]總結(jié)
在這篇文章中,我們仔細(xì)研究了 ES2019 中引入的幾個(gè)關(guān)鍵特性,包括Object.fromEntries(),trimStart(), trimEnd(), flat(), flatMap(),symbol 對象的description 屬性以及可選的catch 。
盡管一些瀏覽器還沒有完全實(shí)現(xiàn)這些特性,但可以使用Babel和其他JavaScript轉(zhuǎn)換器,仍然可以在項(xiàng)目中使用它們。
交流干貨系列文章匯總?cè)缦拢X得不錯(cuò)點(diǎn)個(gè)Star,歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!
關(guān)注公眾號,后臺回復(fù)福利,即可看到福利,你懂的。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104959.html
摘要:可選鏈?zhǔn)秸{(diào)用這是我們現(xiàn)在中會遇到的問題,原因是中沒有對象,然后我們這樣判斷這樣的寫法很差勁新特性可以這樣寫類似于的安全操作符空值合并我們判斷空值一般這樣或者這樣新特性可以這樣寫管道運(yùn)算符舉個(gè)例子,通過三個(gè)函數(shù)對字符串進(jìn)行處理,通常是這樣通過 showImg(https://segmentfault.com/img/remote/1460000019296541); 1、Optional...
摘要:雖然正則中可以匹配任何字符,但卻無法匹配換行符。精讀文中列舉的四個(gè)新特性是加入到正則中的。討論地址是精讀正則如果你想?yún)⑴c討論,請點(diǎn)擊這里,每周都有新的主題,周末或周一發(fā)布。 1. 引言 本周精讀的文章是 regexp-features-regular-expressions。 這篇文章介紹了 ES2018 正則支持的幾個(gè)重要特性: Lookbehind assertions - 后行...
摘要:的新特性說了這么多,看都會有哪些特性來改變我們寫代碼的方式呢局部變量類型推斷局部變量類型推斷可以說是中最值得注意的特性,這是語言開發(fā)人員為了簡化應(yīng)用程序的編寫而采取的又一步,如下圖所示。 showImg(https://segmentfault.com/img/remote/1460000015356980); Java 9才發(fā)布幾個(gè)月,很多玩意都沒整明白,現(xiàn)在Java 10又快要來了...
摘要:但是在中,可以通過關(guān)鍵字來實(shí)現(xiàn)類的繼承的使用可以使得繼承意義更加明確并且值得一提的是,如果你使用來定義的組件,那么可以在類的構(gòu)造器里面,用簡單的的聲明方式來替代方法。 原文:The 10 min ES6 course for the beginner React Developer譯者:Jim Xiao 著名的80/20定律可以用來解釋React和ES6的關(guān)系。因?yàn)镋S6增加了超過75...
閱讀 2604·2021-11-02 14:39
閱讀 4321·2021-10-11 10:58
閱讀 1446·2021-09-06 15:12
閱讀 1837·2021-09-01 10:49
閱讀 1326·2019-08-29 18:31
閱讀 1882·2019-08-29 16:10
閱讀 3331·2019-08-28 18:21
閱讀 867·2019-08-26 10:42