（轉(zhuǎn)載）ES6、ES7、ES8、ES9、ES10新特性一覽

1.ES6新特性（2015）

類

模塊化

箭頭函數(shù)

函數(shù)參數(shù)默認值

模板字符串

解構(gòu)賦值

延展操作符

對象屬性簡寫

Promise

Let與Const

1.1模塊化(Module)

ES5不支持原生的模塊化，在ES6中模塊作為重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成。每一個模塊都有自己單獨的作用域，模塊之間的相互調(diào)用關(guān)系是通過 export 來規(guī)定模塊對外暴露的接口，通過import來引用其它模塊提供的接口。同時還為模塊創(chuàng)造了命名空間，防止函數(shù)的命名沖突。

1.1.1導(dǎo)出(export)

//導(dǎo)出變量export?var?name?=?'Rainbow' ?var?name?=?'Rainbow';var?age?=?'24';export?{name,?age};? ? //導(dǎo)出常量export?const?sqrt?=?Math.sqrt;? //導(dǎo)出函數(shù)export?function?myModule(someArg)?{??return?someArg;

1.1.2導(dǎo)入(import)

import?{myModule}?from?'myModule';//用到了結(jié)構(gòu)賦值import?{name,age}?from?'test';? //一條import?語句可以同時導(dǎo)入默認函數(shù)和其它變量。import?defaultMethod,?{?otherMethod?}?from?'xxx.js';

1.2箭頭（Arrow）函數(shù)

這是ES6中最令人激動的特性之一。=>不只是關(guān)鍵字function的簡寫，它還帶來了其它好處。箭頭函數(shù)與包圍它的代碼共享同一個this,能幫你很好的解決this的指向問題。有經(jīng)驗的JavaScript開發(fā)者都熟悉諸如var self = this;或var that = this這種引用外圍this的模式。但借助=>，就不需要這種模式了。

1.2.1箭頭函數(shù)的結(jié)構(gòu)

箭頭函數(shù)的箭頭=>之前是一個空括號、單個的參數(shù)名、或用括號括起的多個參數(shù)名，而箭頭之后可以是一個表達式（作為函數(shù)的返回值），或者是用花括號括起的函數(shù)體（需要自行通過return來返回值，否則返回的是undefined）。

//?箭頭函數(shù)的例子()=>1v=>v+1(a,b)=>a+b ()=>{ ????alert("foo"); } e=>{????if?(e?==?0){????????return?0; ????}????return?1000/e;

原文中說：

“不論是箭頭函數(shù)還是bind，每次被執(zhí)行都返回的是一個新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載-），那么你必須自己保存這個引用。”

//錯誤做法class?PauseMenu?extends?React.Component{ ????componentWillMount(){ ????????AppStateIOS.addEventListener('change',?this.onAppPaused.bind(this)); ????} ????componentWillUnmount(){ ????????AppStateIOS.removeEventListener('change',?this.onAppPaused.bind(this)); ????} ????onAppPaused(event){ ????} }? //正確做法class?PauseMenu?extends?React.Component{????constructor(props){????????super(props);????????this._onAppPaused?=?this.onAppPaused.bind(this); ????} ????componentWillMount(){ ????????AppStateIOS.addEventListener('change',?this._onAppPaused); ????} ????componentWillUnmount(){ ????????AppStateIOS.removeEventListener('change',?this._onAppPaused); ????} ????onAppPaused(event){ ????} }? //簡化的正確做法class?PauseMenu?extends?React.Component{ ????componentWillMount(){ ????????AppStateIOS.addEventListener('change',?this.onAppPaused); ????} ????componentWillUnmount(){ ????????AppStateIOS.removeEventListener('change',?this.onAppPaused); ????} ????onAppPaused?=?(event)?=>?{????????//把函數(shù)直接作為一個arrow?function的屬性來定義，初始化的時候就綁定好了this指針 ????} }? ? //需要注意的是：不論是bind還是箭頭函數(shù)，每次被執(zhí)行都返回的是一個新的函數(shù)引用，//因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載-），那么你必須自己保存這個引用。

1.3默認參數(shù)

const?test?=?(a='a',b='b',c='c')=>{????return?a+b+c }? console.log(test('A','B','C'))?//ABCconsole.log(test('A','B'))?????//ABcconsole.log(test('A'))?????????//Abc

1.4模板字符串

//不使用模板字符串： ?var?name?=?'Your?name?is?'?+?first?+?'?'?+?last?+?'.' ?//使用模板字符串： ?var?name?=?`Your?name?is?${first}?${last}.`

1.5.結(jié)構(gòu)賦值

1.5.1數(shù)組的結(jié)構(gòu)賦值

var?foo?=?["one",?"two",?"three",?"four"];? var?[one,?two,?three]?=?foo;console.log(one);?//?"one"console.log(two);?//?"two"console.log(three);?//?"three" ?//如果你要忽略某些值，你可以按照下面的寫法獲取你想要的值var?[first,?,?,?last]?=?foo;console.log(first);?//?"one"console.log(last);?//?"four" ?//你也可以這樣寫var?a,?b;?//先聲明變量 ?[a,?b]?=?[1,?2];console.log(a);?//?1console.log(b);?//?2

利用結(jié)構(gòu)賦值交換兩個變量的值。

var?a?=?1;var?b?=?3; ? [a,?b]?=?[b,?a];console.log(a);?//?3console.log(b);?//?1

1.5.2對象的結(jié)構(gòu)賦值

const?student?=?{??name:'Ming',??age:'18',??city:'Shanghai'??};? const?{name,age,city}?=?student;console.log(name);?//?"Ming"console.log(age);?//?"18"console.log(city);?//?"Shanghai"

1.6延展操作符(Spread operator)

展開數(shù)組或者對象。

var?arr1?=?[0,?1,?2];var?arr2?=?[3,?4,?5];var?arr3?=?[...arr1,?...arr2];//?將?arr2?中所有元素附加到?arr1?后面并返回//等同于var?arr4?=?arr1.concat(arr2); ? ? ?var?obj1?=?{?foo:?'bar',?x:?42?};var?obj2?=?{?foo:?'baz',?y:?13?}; ?var?clonedObj?=?{?...obj1?};//?克隆后的對象:?{?foo:?"bar",?x:?42?} ?var?mergedObj?=?{?...obj1,?...obj2?};//?合并后的對象:?{?foo:?"baz",?x:?42,?y:?13?}

react中應(yīng)用

const?params?=?{ ????name:?'Jine', ????age:?21} ? ? var?params?=?{ ????name:?'123', ????title:?'456',????type:?'aaa'}? var?{?type,?...other?}?=?params; ? //等同于

1.7Promise

var?test?=?(a,b)=>{????return?new?Promise((reslove,reject)=>{????????//異步操作 ????????//... ???????? ????????reslove(resoult)//返回正確結(jié)果 ???????? ????????//... ????????reject(err)????//出錯時的結(jié)果 ????}) }? ? //使用 ?test(a,b).then(res=>{????//...promise???reslove（）返回正確結(jié)果后執(zhí)行到這里}).catch(err=>{????//前面reject（err）后代碼會執(zhí)行到里})? //或者 ?try{????var?resoult?=?await?test(a,b)????//...}catch(er){????//...}

2 ES7新特性（2016）

數(shù)組includes()方法，用來判斷一個數(shù)組是否包含一個指定的值，根據(jù)情況，如果包含則返回true，否則返回false。

a ** b指數(shù)運算符，它與 Math.pow(a, b)相同。

2.1?includes()

includes()?函數(shù)用來判斷一個數(shù)組是否包含一個指定的值，如果包含則返回?true，否則返回false。

let?arr?=?['react',?'angular',?'vue'];? if?(arr.includes('react')) {????console.log('react存在'); }

2.2指數(shù)運算符**

在ES7中引入了指數(shù)運算符，具有與Math.pow(..)等效的計算結(jié)果

console.log(2**10);//?輸出1024console.log(Math.pow(2,?10))?//?輸出1024

3 ES8新特性（2017）

async/await

Object.values()

Object.entries()

String padding: padStart()和padEnd()，填充字符串達到當(dāng)前長度

函數(shù)參數(shù)列表結(jié)尾允許逗號

Object.getOwnPropertyDescriptors()

ShareArrayBuffer和Atomics對象，用于從共享內(nèi)存位置讀取和寫入

3.1 async/await

async?function?init()?{????console.log('開始')????await?this.testSync()????console.log('結(jié)束') ??}??this.init()??async?function?testSync()?{????const?response?=?await?new?Promise(resolve?=>?{ ??????setTimeout(()?=>?{ ??????????resolve("async?await?test..."); ????????},?1000); ????});????console.log(response); ??}

3.2?Object.keys()

var?obj?=?{?foo:?"bar",?baz:?42?};Object.keys(obj)//?["foo",?"baz"]

3.3?Object.values()

var?obj?=?{?foo:?"bar",?baz:?42?};Object.values(obj)//?["bar",?42]

3.4 Object.entries()

Object.entries方法返回一個數(shù)組，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（ enumerable ）屬性的鍵值對數(shù)組。

var?obj?=?{?foo:?'bar',?baz:?42?};Object.entries(obj)//?[?["foo",?"bar"],?["baz",?42]?]const?obj1?=?{a:?1,?b:?2,?c:?3}for(let?[key,value]?of?Object.entries(obj1)){????console.log(`key:?${key}?value:${value}`) }//key:a?value:1//key:b?value:2//key:c?value:3

Object.entries方法的一個用處是，將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)。

var?obj?=?{?foo:?'bar',?baz:?42?};var?map?=?new?Map(Object.entries(obj)); map?//?Map?{?foo:?"bar",?baz:?42?}

object對象keys(), values() entries()

3.5 String padding

String.padStart(targetLength,[padString])

String.padEnd(targetLength,padString])

targetLength:當(dāng)前字符串需要填充到的目標長度。如果這個數(shù)值小于當(dāng)前字符串的長度，則返回當(dāng)前字符串本身。

padString:(可選)填充字符串。如果字符串太長，使填充后的字符串長度超過了目標長度，則只保留最左側(cè)的部分，其他部分會被截斷，此參數(shù)的缺省值為 " "。

console.log('0.0'.padStart(4,'*'))console.log('0.0'.padStart(20))console.log('0.0'.padEnd(4,'*'))? console.log('0.0'.padEnd(10,'*'))? /* *0.0 ?????????????????0.0 0.0* 0.0******* */

3.6?Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptor 方法會返回某個對象（descriptor）。ES6 引入了 Object.getOwnPropertyDescriptors 方法，返回指定對象所有自身屬性（非繼承屬性）的描述對象。

const?obj?=?{ ??foo:?123, ??get?bar()?{?return?'abc'?}}; ?Object.getOwnPropertyDescriptors(obj)//?{?foo://????{?value:?123,//??????writable:?true,//??????enumerable:?true,//??????configurable:?true?},//???bar://????{?get:?[Function:?bar],//??????set:?undefined,//??????enumerable:?true,//??????configurable:?true?}?}

上面代碼中，Object.getOwnProperDescriptors 方法返回一個對象，所有原對象的屬性名都是該對象的屬性名，對應(yīng)的屬性值就是該屬性描述對象。

該方法的引入目的，主要是為了解決 Object.assign() 無法正確拷貝 get 屬性和 set 屬性的問題。

const?source?=?{??set?foo(value)?{????console.log(value); ??} };? const?target1?=?{};Object.assign(target1,?source);? Object.getOwnPropertyDescriptor(target1,?'foo')//?{?value:?undefined,//???writable:?true,//???enumerable:?true,//???configurable:?true?}

上面代碼中，source 對象的 foo 屬性的值是一個賦值函數(shù)，Object.assign 方法將這個屬性拷貝給 target1 對象，結(jié)果該屬性的值變成了 undefined。這是因為 Object.assign 方法總是拷貝一個屬性的值，而不會拷貝它背后的賦值方法或取值方法。

ES6-對象的擴展-Object.getOwnPropertyDescriptors()

3.7?SharedArrayBuffer對象

有了 SharedArrayBuffer 后，多個 web worker 就可以同時讀寫同一塊內(nèi)存了你再也不需要 postMessage 伴有時延的通信了，多個 web worker 對數(shù)據(jù)訪問都沒有時延了

SharedArrayBuffer 對象用來表示一個通用的，固定長度的原始二進制數(shù)據(jù)緩沖區(qū)，類似于 ArrayBuffer 對象，它們都可以用來在共享內(nèi)存（shared memory）上創(chuàng)建視圖。與 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分離。

/**?*? ?*?@param?{*}?length?所創(chuàng)建的數(shù)組緩沖區(qū)的大小，以字節(jié)(byte)為單位。?? ?*?@returns?{SharedArrayBuffer}?一個大小指定的新?SharedArrayBuffer?對象。其內(nèi)容被初始化為?0。 ?*/new?SharedArrayBuffer(length)

「譯」圖解 ArrayBuffers 和 SharedArrayBuffers

3.8?Atomics對象

Atomics 對象提供了一組靜態(tài)方法用來對 SharedArrayBuffer 對象進行原子操作。

這些原子操作屬于 Atomics 模塊。與一般的全局對象不同，Atomics 不是構(gòu)造函數(shù)，因此不能使用 new 操作符調(diào)用，也不能將其當(dāng)作函數(shù)直接調(diào)用。Atomics 的所有屬性和方法都是靜態(tài)的（與 Math 對象一樣）。

多個共享內(nèi)存的線程能夠同時讀寫同一位置上的數(shù)據(jù)。原子操作會確保正在讀或?qū)懙臄?shù)據(jù)的值是符合預(yù)期的，即下一個原子操作一定會在上一個原子操作結(jié)束后才會開始，其操作過程不會中斷。

Atomics.add()//將指定位置上的數(shù)組元素與給定的值相加，并返回相加前該元素的值。 ? ?Atomics.and()//將指定位置上的數(shù)組元素與給定的值相與，并返回與操作前該元素的值。 ? ?Atomics.compareExchange()//如果數(shù)組中指定的元素與給定的值相等，則將其更新為新的值，并返回該元素原先的值。 ? ?Atomics.exchange()//將數(shù)組中指定的元素更新為給定的值，并返回該元素更新前的值。 ? ?Atomics.load()//返回數(shù)組中指定元素的值。 ? ?Atomics.or()//將指定位置上的數(shù)組元素與給定的值相或，并返回或操作前該元素的值。 ? ?Atomics.store()//將數(shù)組中指定的元素設(shè)置為給定的值，并返回該值。 ? ?Atomics.sub()//將指定位置上的數(shù)組元素與給定的值相減，并返回相減前該元素的值。 ? ?Atomics.xor()//將指定位置上的數(shù)組元素與給定的值相異或，并返回異或操作前該元素的值。 ?//wait()?和?wake()?方法采用的是?Linux?上的?futexes?模型（fast?user-space?mutex，//快速用戶空間互斥量），可以讓進程一直等待直到某個特定的條件為真，主要用于實現(xiàn)阻塞。 ?Atomics.wait()//檢測數(shù)組中某個指定位置上的值是否仍然是給定值，是則保持掛起直到被喚醒或超時。//返回值為?"ok"、"not-equal"?或?"time-out"。調(diào)用時，如果當(dāng)前線程不允許阻塞，則會拋出異常//（大多數(shù)瀏覽器都不允許在主線程中調(diào)用?wait()）。 ? ?Atomics.wake()//喚醒等待隊列中正在數(shù)組指定位置的元素上等待的線程。返回值為成功喚醒的線程數(shù)量。 ? ?Atomics.isLockFree(size)//可以用來檢測當(dāng)前系統(tǒng)是否支持硬件級的原子操作。對于指定大小的數(shù)組，如果當(dāng)前系統(tǒng)支持硬件級的原子操作，//則返回?true；否則就意味著對于該數(shù)組，Atomics?對象中的各原子操作都只能用鎖來實現(xiàn)。此函數(shù)面向的是技術(shù)專家。

4 ES9新特性（2018）

異步迭代器

非轉(zhuǎn)義序列的模板字符串

正則表達式反向(lookbehind)斷言（本文）

正則表達式 Unicode 轉(zhuǎn)義

正則表達式 s/dotAll 模式

正則表達式命名捕獲組

對象展開運算符

Promise.prototype.finally

4.1?異步迭代器

ES2018引入異步迭代器（asynchronous iterators），這就像常規(guī)迭代器，除了next()方法返回一個Promise。因此await可以和for...of循環(huán)一起使用，以串行的方式運行異步操作。例如：

async?function?process(array)?{??for?await?(let?i?of?array)?{ ????doSomething(i); ??} }

4.2 非轉(zhuǎn)義序列的模板字符串

標簽使您可以用函數(shù)解析模板字符串。標簽函數(shù)的第一個參數(shù)包含一個字符串值的數(shù)組。其余的參數(shù)與表達式相關(guān)。最后，你的函數(shù)可以返回處理好的的字符串（或者它可以返回完全不同的東西）。

function?foo(str)?{????return?str[0].toUpperCase(); } foo`justjavac`;?//?輸出?JUSTJAVACfoo`Xyz`;?//?輸出?XYZ

ES2018 新特征之：非轉(zhuǎn)義序列的模板字符串

4.3 正則表達式反向(lookbehind)斷言（本文）

斷言(Assertion)是一個對當(dāng)前匹配位置之前或之后的字符的測試， 它不會實際消耗任何字符，所以斷言也被稱為“非消耗性匹配”或“非獲取匹配”。

正則表達式的斷言一共有 4 種形式：

(?=pattern)零寬正向肯定斷言(zero-width positive lookahead assertion)

(?!pattern)零寬正向否定斷言(zero-width negative lookahead assertion)

(?<=pattern)零寬反向肯定斷言(zero-width positive lookbehind assertion)

(?

這里面的 pattern 是一個正則表達式。

lookahead 和 lookbehind 通過被翻譯為：

正向 負向

前向 后向

正向 反向

前瞻 后瞻

……

本文檔使用“正向”、“反向”。

正則表達式反向(lookbehind)斷言

4.4 正則表達式 Unicode 轉(zhuǎn)義

一般來說，數(shù)字字符解釋[0-9]，單詞字符就是[0-9a-zA-Z_]，空白字符則包括空格、回車等字符，但這是 ASCII 編碼中的情況，在 Unicode 編碼中并非如此。

因為包括了多種語言和字符，所以在 Unicode 編碼中，全角數(shù)字0、1、2之類也算作“數(shù)字字符”，可以由\d匹配；中文字符，也可以算作“單詞字符”，由\w匹配；同樣的道理，中文的全角空格（碼值為30 ff），也可以算作“空白字符”，由\s匹配。所以，如果在 Python 2 中指定了正則表達式使用 Unicode 模式（最簡單的方式解釋在正則表達式的開頭指定模式修飾符(?u)），\d，\w，\s就能匹配全角數(shù)字、中文字符、全角空格。對于這種情況，本書中稱為Unicode 匹配規(guī)則；相應(yīng)地，之前 ASCII 編碼中的匹配，稱為ASCII 匹配規(guī)則。

正則表達式——Unicode 匹配規(guī)則

4.5 正則表達式 s/dotAll 模式

正則表達式 s/dotAll 模式

4.6?正則表達式命名捕獲組

const ??reDate?=?/(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/, ??match??=?reDate.exec('2018-04-30'), ??year???=?match.groups.year,??//?2018 ??month??=?match.groups.month,?//?04 ??day????=?match.groups.day;???//?30 ?const ??reDate?=?/(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/, ??d??????=?'2018-04-30', ??usDate?=?d.replace(reDate,?'$-$-$');

4.7 對象展開運算符

let?a?=?[1,2,3];let?b?=?[0,?...a,?4];?//?[0,1,2,3,4] ?let?obj?=?{?a:?1,?b:?2?};let?obj2?=?{?...obj,?c:?3?};?//?{?a:1,?b:2,?c:3?}let?obj3?=?{?...obj,?a:?3?};?//?{?a:3,?b:2?}

let?object?=?{ ??a:?'01',?b:?'02'};? let?newObject?=?{ ??c:?'03', ??...object}; ? console.log(newObject);?//{c:?"03",?a:?"01",?b:?"02"}

4.8?Promise.finally()

一個Promise調(diào)用鏈要么成功到達最后一個.then()，要么失敗觸發(fā).catch()。在某些情況下，你想要在無論Promise運行成功還是失敗，運行相同的代碼，例如清除，刪除對話，關(guān)閉數(shù)據(jù)庫連接等。

function?doSomething()?{ ??doSomething1() ??.then(doSomething2) ??.then(doSomething3) ??.catch(err?=>?{????console.log(err); ??}) ??.finally(()?=>?{????//?finish?here! ??}); }

5 ES10新特性（2019）

新增了Array的flat()方法和flatMap()方法

新增了String的trimStart()方法和trimEnd()方法

Object.fromEntries()

Symbol.prototype.description

String.prototype.matchAll

Function.prototype.toString()現(xiàn)在返回精確字符，包括空格和注釋

JSON?ECMAScript

簡化try {} catch {},修改 catch 綁定

新的基本數(shù)據(jù)類型BigInt

globalThis

import()

Legacy RegEx

私有的實例方法和訪問器

5.1 新增了Array的flat()方法和flatMap()方法

flat()和flatMap()本質(zhì)上就是是歸納（reduce） 與 合并（concat）的操作。

flat()?方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

flat()方法最基本的作用就是數(shù)組降維

其次，還可以利用flat()方法的特性來去除數(shù)組的空項

5.1.1 flat()

var?arr1?=?[1,?2,?[3,?4]];arr1.flat();?//?[1,?2,?3,?4] ?var?arr2?=?[1,?2,?[3,?4,?[5,?6]]];arr2.flat();//?[1,?2,?3,?4,?[5,?6]] ?var?arr3?=?[1,?2,?[3,?4,?[5,?6]]];arr3.flat(2);//?[1,?2,?3,?4,?5,?6] ?//使用?Infinity?作為深度，展開任意深度的嵌套數(shù)組arr3.flat(Infinity);?//?[1,?2,?3,?4,?5,?6] ? ?//去除空項var?arr4?=?[1,?2,?,?4,?5];arr4.flat();//?[1,?2,?4,?5]

5.1.2 flatMap()

var?arr1?=?[1,?2,?3,?4]; arr1.map(x?=>?[x?*?2]);? //?[[2],?[4],?[6],?[8]]arr1.flatMap(x?=>?[x?*?2]); //?[2,?4,?6,?8] //?只會將?flatMap?中的函數(shù)返回的數(shù)組?“壓平”?一層 arr1.flatMap(x?=>?[[x?*?2]]); //?[[2],?[4],?[6],?[8]]

5.2 新增了String的trimStart()方法和trimEnd()方法

String.trimStart() 可用于從字符串的開頭去掉空白。String.trimEnd() 可用于從字符串的尾部去掉空白。

let??greeting?=??"????Hello?World";console.log(greeting.trimStart());//?"Hello?World"let?greeting?=?"Hello?World????";console.log(greeting.trimEnd());//?"Hello?World"

5.3?Object.fromEntries()

Object.entries()方法的作用是返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致（區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性）。

而Object.fromEntries() 則是 Object.entries() 的反轉(zhuǎn)。

Object.fromEntries() 函數(shù)傳入一個鍵值對的列表，并返回一個帶有這些鍵值對的新對象。這個迭代參數(shù)應(yīng)該是一個能夠?qū)崿F(xiàn)@iterator方法的的對象，返回一個迭代器對象。它生成一個具有兩個元素的類似數(shù)組的對象，第一個元素是將用作屬性鍵的值，第二個元素是與該屬性鍵關(guān)聯(lián)的值。

通過 Object.fromEntries， 可以將 Map 轉(zhuǎn)化為 Object:

const?map?=?new?Map([?['foo',?'bar'],?['baz',?42]?]);const?obj?=?Object.fromEntries(map);console.log(obj);?//?{?foo:?"bar",?baz:?42?}

通過 Object.fromEntries， 可以將 Array 轉(zhuǎn)化為 Object:

const?arr?=?[?['0',?'a'],?['1',?'b'],?['2',?'c']?];const?obj?=?Object.fromEntries(arr);console.log(obj);?//?{?0:?"a",?1:?"b",?2:?"c"?}

5.4 Symbol.prototype.description

只讀描述屬性，是一個返回Symbol對象的可選描述的字符串。

let?mySymbol?=?`My?Symbol`;let?symObj?=?Symbol(mySymbol);console.log(symObj)?//?Symbol(mySymbol);console.log(String(symObj)?===?`Symbol(${mySymbol})`);?//?trueconsole.log(symObj.description);?//?"My?Symbol"

5.5 String.protype.matchAll()

matchAll() 方法返回所有與正則表達式匹配字符串的結(jié)果的迭代器，包括捕獲組。

const?string?=?'十六進制數(shù)字:DEADBEEF?CAFE'const?regex?=?'\b\p{ASCII_Hex_digit}+\b/gu'for(const?match?of?string.match(regex))?{??console.log(Math) }/* ??輸出 ??DEADBEEF ??CAFE *///?2.string.matchAll?給出每個匹配更加詳細的信息const?string?=?'十六進制數(shù)字:DEADBEEF?CAFE'const?regex?=?'\b\p{ASCII_Hex_digit}+\b/gu'for(const?match?of?string.matchAll(regex))?{??console.log(Math) }/* ?輸出 ?["DEADBEEF",?index:?8,?input:?"十六進制數(shù)字:DEADBEEF?CAFE",?groups:?undefind] ?["CAFE",?index:?17,?input:?"十六進制數(shù)字:DEADBEEF?CAFE",?groups:?undefind]? */

5.6 Function.prototype.toString()現(xiàn)在返回精確字符，包括空格和注釋

toString() 方法返回一個表示函數(shù)源代碼的字符串。在ES6中，當(dāng)在函數(shù)上調(diào)用toString時，它將根據(jù)ECMAScript引擎返回該函數(shù)的字符串表示形式。如果可能，它將返回源代碼，否則-一個標準化的占位符。

this.fruits?=?[]function?buyFruits(fruit)?{ ??this.fruits?=?[...this.fruits,?fruit] } console.log(buyFruits.toString()) /*function?buyFruits(fruit)?{ ??this.fruits?=?[...this.fruits,?fruit] } */

5.7 JSON?ECMAScript

在ES10之前的版本中，不接受非轉(zhuǎn)義的行分隔符U+2028和段落分隔符U+2029。

U+2028是段落分隔符。

U+2029是行分隔符。

let?LS?=?""const?PS?=?eval("'\u2029'")

5.8 簡化try {} catch {},修改 catch 綁定

可選的 catch binding 允許開發(fā)人員在catch塊中，不使用error參數(shù)的情況下使用try/catch。

//?ES2019?之前使用try?{??//?some?code}catch?(err)?{??//?error?handling?code}//?現(xiàn)在使用ES2019這樣的try?/?catch：try??{??//?some?code}catch?{??//?error?handling?code}

5.9 新的基本數(shù)據(jù)類型BigInt

BigInt是第7個原始類型，它是一個任意精度的整數(shù)。而不僅僅是在9007199254740992處的最大值。

ES10的13個新特性示例

elasticsearch 數(shù)據(jù)結(jié)構(gòu)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。