JavaScript:ES2019 的新特性(譯)
作為最流行的編程語(yǔ)言和最重要的 Web 開(kāi)發(fā)語(yǔ)言之一,JavaScript 不斷演變,每次迭代都會(huì)得到一些新的內(nèi)部更新。讓我們來(lái)看看 ES2019 有哪些新的特性,并加入到我們?nèi)粘i_(kāi)發(fā)中:
Array.prototype.flat()
Array.prototype.flat() 遞歸地將嵌套數(shù)組拼合到指定深度。默認(rèn)值為 1,如果要全深度則使用 Infinity 。此方法不會(huì)修改原始數(shù)組,但會(huì)創(chuàng)建一個(gè)新數(shù)組:
const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(2); // [1, 2, 3, 4, 5, 6] const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]]; arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
flat() 方法會(huì)移除數(shù)組中的空項(xiàng):
const arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]
Array.prototype.flatMap()
flatMap() 方法首先使用映射函數(shù)映射每個(gè)元素,然后將結(jié)果壓縮成一個(gè)新數(shù)組。它與 Array.prototype.map 和 深度值為 1的 Array.prototype.flat 幾乎相同,但 flatMap 通常在合并成一種方法的效率稍微高一些。
const arr1 = [1, 2, 3]; arr1.map(x => [x * 4]); // [[4], [8], [12]] arr1.flatMap(x => [x * 4]); // [4, 8, 12]
更好的示例:
const sentence = ["This is a", "regular", "sentence"]; sentence.map(x => x.split(" ")); // [["This","is","a"],["regular"],["sentence"]] sentence.flatMap(x => x.split(" ")); // ["This","is","a","regular", "sentence"] // 可以使用 歸納(reduce) 與 合并(concat)實(shí)現(xiàn)相同的功能 sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);
String.prototype.trimStart() 和 String.prototype.trimEnd()
除了能從字符串兩端刪除空白字符的 String.prototype.trim() 之外,現(xiàn)在還有單獨(dú)的方法,只能從每一端刪除空格:
const test = " hello "; test.trim(); // "hello"; test.trimStart(); // "hello "; test.trimEnd(); // " hello";
- trimStart() :別名 trimLeft(),移除原字符串左端的連續(xù)空白符并返回,并不會(huì)直接修改原字符串本身。
- trimEnd() :別名 trimRight(),移除原字符串右端的連續(xù)空白符并返回,并不會(huì)直接修改原字符串本身。
Object.fromEntries
將鍵值對(duì)列表轉(zhuǎn)換為 Object 的新方法。
它與已有 Object.entries() 正好相反,Object.entries()方法在將對(duì)象轉(zhuǎn)換為數(shù)組時(shí)使用,它返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組。
但現(xiàn)在您可以通過(guò) Object.fromEntries 將操作的數(shù)組返回到對(duì)象中。
下面是一個(gè)示例(將所有對(duì)象屬性的值平方):
const obj = { prop1: 2, prop2: 10, prop3: 15 }; // 轉(zhuǎn)化為鍵值對(duì)數(shù)組: let array = Object.entries(obj); // [["prop1", 2], ["prop2", 10], ["prop3", 15]]
將所有對(duì)象屬性的值平方:
array = array.map(([key, value]) => [key, Math.pow(value, 2)]); // [["prop1", 4], ["prop2", 100], ["prop3", 225]]
我們將轉(zhuǎn)換后的數(shù)組 array 作為參數(shù)傳入 Object.fromEntries ,將數(shù)組轉(zhuǎn)換成了一個(gè)對(duì)象:
const newObj = Object.fromEntries(array); // {prop1: 4, prop2: 100, prop3: 225}
可選的 Catch 參數(shù)
新提案允許您完全省略 catch() 參數(shù),因?yàn)樵谠S多情況下,您并不想使用它:
try { //... } catch (er) { //handle error with parameter er } try { //... } catch { //handle error without parameter }
Symbol.description
description 是一個(gè)只讀屬性,它會(huì)返回 Symbol 對(duì)象的可選描述的字符串,用來(lái)代替 toString() 方法。
const testSymbol = Symbol("Desc"); testSymbol.description; // "Desc" testSymbol.toString(); // "Symbol(Desc)"
Function.toString()
現(xiàn)在,在函數(shù)上調(diào)用 toString() 會(huì)返回函數(shù),與它的定義完全一樣,包括空格和注釋。
之前:
function /* foo comment */ foo() {} foo.toString(); // "function foo() {}"
現(xiàn)在:
foo.toString(); // "function /* foo comment */ foo() {}"
JSON.parse() 改進(jìn)
行分隔符 (u2028) 和段落分隔符 (u2029),現(xiàn)在被正確解析,而不是報(bào)一個(gè)語(yǔ)法錯(cuò)誤。
var str = '{"name":"Bottle\u2028AnGe"}' JSON.parse(str) // {name: "Bottle AnGe"}
原文鏈接:JavaScript: What's new in ES2019
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)
這篇文章主要介紹了BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06HTML頁(yè)面定時(shí)跳轉(zhuǎn)方法解析(2種任選)
本文主要對(duì)HTML頁(yè)面定時(shí)跳轉(zhuǎn)進(jìn)行方法介紹:1、meta refresh 實(shí)現(xiàn)。2、JavaScript 實(shí)現(xiàn)。具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12簡(jiǎn)單談?wù)刼ffsetleft、offsetTop和offsetParent
這篇文章主要給大家介紹了offsetleft、offsetTop和offsetParent的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對(duì)象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺(jué)看不到摸不著的比較別扭,下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個(gè)全新的思路2016-01-01electron獲取位置坐標(biāo)信息的方法小結(jié)
這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02javascript html5實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript html5實(shí)現(xiàn)表單驗(yàn)證的具體代碼,感興趣的小伙伴們可以參考一下2016-03-03