ES6的新特性

總結(jié):

var? let const的區(qū)別

數(shù)組新增拓展

對(duì)象新增拓展

函數(shù)新增拓展

Set 和 Map

Promise

Generator

Proxy

Module

Decorator

具體介紹:

1.var? let? const

一昼窗、var

1、在ES5中位谋,頂層對(duì)象的屬性和全局變量是等價(jià)的茸俭,用var聲明的變量既是全局變量痊硕,也是頂層變量:

頂層對(duì)象,在瀏覽器環(huán)境指的是window對(duì)象,在 Node 指的是global對(duì)象

2静暂、使用var聲明的變量存在變量提升的情況

3聊倔、使用var晦毙,我們能夠?qū)σ粋€(gè)變量進(jìn)行多次聲明,后面聲明的變量會(huì)覆蓋前面的變量聲明:

在函數(shù)中使用使用var聲明變量時(shí)候耙蔑,該變量是局部的

而如果在函數(shù)內(nèi)不使用var见妒,該變量是全局的

二、let

1甸陌、let是ES6新增的命令徐鹤,用來聲明變量

2、用法類似于var邀层,但是所聲明的變量返敬,只在let命令所在的代碼塊內(nèi)有效,不存在變量提:

只要塊級(jí)作用域內(nèi)存在let命令寥院,這個(gè)區(qū)域就不再受外部影響

3劲赠、使用let聲明變量前,該變量都不可用秸谢,也就是大家常說的暫時(shí)性死區(qū):

let不允許在相同作用域中重復(fù)聲明

注意的是相同作用域凛澎,下面這種情況是不會(huì)報(bào)錯(cuò)的,因此估蹄,我們不能在函數(shù)內(nèi)部重新聲明參數(shù)

三塑煎、const

1、const聲明一個(gè)只讀的常量臭蚁,一旦聲明最铁,常量的值就不能改變:

const一旦聲明變量讯赏,就必須立即初始化,不能留到以后賦值

如果之前用var或let聲明過變量冷尉,再用const聲明同樣會(huì)報(bào)錯(cuò)

2漱挎、const實(shí)際上保證的并不是變量的值不得改動(dòng),而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng):

對(duì)于簡單類型的數(shù)據(jù)雀哨,值就保存在變量指向的那個(gè)內(nèi)存地址磕谅,因此等同于常量

對(duì)于復(fù)雜類型的數(shù)據(jù),變量指向的內(nèi)存地址雾棺,保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針膊夹,const只能保證這個(gè)指針是固定的,并不能確保改變量的結(jié)構(gòu)不變

四捌浩、區(qū)別

1放刨、變量提升:

var聲明的變量存在變量提升,即變量可以在聲明之前調(diào)用嘉栓,值為undefined

let和const不存在變量提升宏榕,即它們所聲明的變量一定要在聲明后使用,否則報(bào)錯(cuò)

2侵佃、暫時(shí)性死區(qū):

var不存在暫時(shí)性死區(qū)

let和const存在暫時(shí)性死區(qū)麻昼,只有等到聲明變量的那一行代碼出現(xiàn)秫舌,才可以獲取和使用該變量

3抽活、塊級(jí)作用域:

var不存在塊級(jí)作用域

let和const存在塊級(jí)作用域

4、重復(fù)聲明:

var允許重復(fù)聲明變量

let和const在同一作用域不允許重復(fù)聲明變量

5崩泡、修改聲明的變量:

var和let可以

const聲明一個(gè)只讀的常量迈螟。一旦聲明叉抡,常量的值就不能改變

五、使用

能用const的情況盡量使用const答毫,其他情況下大多數(shù)使用let褥民,避免使用var

二? 數(shù)組新增拓展

一、擴(kuò)展運(yùn)算符的應(yīng)用

1洗搂、ES6通過擴(kuò)展元素符...消返,好比 rest 參數(shù)的逆運(yùn)算,將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列:

主要用于函數(shù)調(diào)用的時(shí)候耘拇,將一個(gè)數(shù)組變?yōu)閰?shù)序列

可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組撵颊,能夠更簡單實(shí)現(xiàn)數(shù)組復(fù)制,數(shù)組的合并也更為簡潔

2惫叛、擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來倡勇,用于生成數(shù)組。如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值嘉涌,只能放在參數(shù)的最后一位妻熊,否則會(huì)報(bào)錯(cuò):

可以將字符串轉(zhuǎn)為真正的數(shù)組

3夸浅、定義了遍歷器(Iterator)接口的對(duì)象,都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組固耘。如果對(duì)沒有 Iterator 接口的對(duì)象题篷,使用擴(kuò)展運(yùn)算符词身,將會(huì)報(bào)錯(cuò)

二厅目、構(gòu)造函數(shù)新增的方法

1、Array.from():將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對(duì)象和可遍歷(iterable)的對(duì)象(包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map)

可以接受第二個(gè)參數(shù)法严,用來對(duì)每個(gè)元素進(jìn)行處理损敷,將處理后的值放入返回的數(shù)組

2、Array.of():用于將一組值深啤,轉(zhuǎn)換為數(shù)組

沒有參數(shù)的時(shí)候拗馒,返回一個(gè)空數(shù)組

當(dāng)參數(shù)只有一個(gè)的時(shí)候,實(shí)際上是指定數(shù)組的長度

參數(shù)個(gè)數(shù)不少于 2 個(gè)時(shí)溯街,Array()才會(huì)返回由參數(shù)組成的新數(shù)組

三诱桂、實(shí)例對(duì)象新增的方法

1、copyWithin():將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有成員)呈昔,然后返回當(dāng)前數(shù)組

target(必需):從該位置開始替換數(shù)據(jù)挥等。如果為負(fù)值,表示倒數(shù)堤尾。

start(可選):從該位置開始讀取數(shù)據(jù)肝劲,默認(rèn)為 0。如果為負(fù)值郭宝,表示從末尾開始計(jì)算辞槐。

end(可選):到該位置前停止讀取數(shù)據(jù),默認(rèn)等于數(shù)組長度粘室。如果為負(fù)值榄檬,表示從末尾開始計(jì)算。

2衔统、find()鹿榜、findIndex():find()用于找出第一個(gè)符合條件的數(shù)組成員

參數(shù)是一個(gè)回調(diào)函數(shù),接受三個(gè)參數(shù)依次為當(dāng)前的值缰冤、當(dāng)前的位置和原數(shù)組

findIndex返回第一個(gè)符合條件的數(shù)組成員的位置犬缨,如果所有成員都不符合條件,則返回-1

這兩個(gè)方法都可以接受第二個(gè)參數(shù)棉浸,用來綁定回調(diào)函數(shù)的this對(duì)象

3怀薛、fill():使用給定值,填充一個(gè)數(shù)組

還可以接受第二個(gè)和第三個(gè)參數(shù)迷郑,用于指定填充的起始位置和結(jié)束位置

注意枝恋,如果填充的類型為對(duì)象创倔,則是淺拷貝

4、entries()焚碌,keys()畦攘,values():

keys()是對(duì)鍵名的遍歷

values()是對(duì)鍵值的遍歷

entries()是對(duì)鍵值對(duì)的遍歷

5、includes():用于判斷數(shù)組是否包含給定的值

方法的第二個(gè)參數(shù)表示搜索的起始位置十电,默認(rèn)為0

參數(shù)為負(fù)數(shù)則表示倒數(shù)的位置

6知押、flat(),flatMap():將數(shù)組扁平化處理鹃骂,返回一個(gè)新數(shù)組台盯,對(duì)原數(shù)據(jù)沒有影響

flat():默認(rèn)只會(huì)“拉平”一層,如果想要“拉平”多層的嵌套數(shù)組畏线,可以將flat()方法的參數(shù)寫成一個(gè)整數(shù)静盅,表示想要拉平的層數(shù),默認(rèn)為1

flatMap()方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)相當(dāng)于執(zhí)行Array.prototype.map()寝殴,然后對(duì)返回值組成的數(shù)組執(zhí)行flat()方法蒿叠。該方法返回一個(gè)新數(shù)組,不改變?cè)瓟?shù)組蚣常。flatMap()方法還可以有第二個(gè)參數(shù)市咽,用來綁定遍歷函數(shù)里面的this

四、數(shù)組的空位

1史隆、數(shù)組的空位指魂务,數(shù)組的某一個(gè)位置沒有任何值

ES6 則是明確將空位轉(zhuǎn)為undefined

包括Array.from、擴(kuò)展運(yùn)算符泌射、copyWithin()粘姜、fill()、entries()熔酷、keys()孤紧、values()、find()和findIndex()

3.對(duì)象新增拓展

一拒秘、屬性的簡寫

1号显、ES6中,當(dāng)對(duì)象鍵名與對(duì)應(yīng)值名相等的時(shí)候躺酒,可以進(jìn)行簡寫押蚤。方法也能夠進(jìn)行簡寫。在函數(shù)內(nèi)作為返回值羹应,也會(huì)變得方便很多:

注意:簡寫的對(duì)象方法不能用作構(gòu)造函數(shù)揽碘,否則會(huì)報(bào)錯(cuò)

二、屬性名表達(dá)式

1、ES6 允許字面量定義對(duì)象時(shí)雳刺,將表達(dá)式放在括號(hào)內(nèi)劫灶。表達(dá)式還可以用于定義方法名:

注意,屬性名表達(dá)式與簡潔表示法掖桦,不能同時(shí)使用本昏,會(huì)報(bào)錯(cuò)

注意,屬性名表達(dá)式如果是一個(gè)對(duì)象枪汪,默認(rèn)情況下會(huì)自動(dòng)將對(duì)象轉(zhuǎn)為字符串[object Object]

三涌穆、super關(guān)鍵字

this關(guān)鍵字總是指向函數(shù)所在的當(dāng)前對(duì)象,ES6 又新增了另一個(gè)類似的關(guān)鍵字super料饥,指向當(dāng)前對(duì)象的原型對(duì)象

四蒲犬、擴(kuò)展運(yùn)算符的應(yīng)用

1朱监、在解構(gòu)賦值中岸啡,未被讀取的可遍歷的屬性,分配到指定的對(duì)象上面:

注意:解構(gòu)賦值必須是最后一個(gè)參數(shù)赫编,否則會(huì)報(bào)錯(cuò)

2巡蘸、解構(gòu)賦值是淺拷貝。對(duì)象的擴(kuò)展運(yùn)算符等同于使用Object.assign()方法

五擂送、屬性的遍歷

1悦荒、ES6 一共有 5 種方法可以遍歷對(duì)象的屬性:

for...in:循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)

Object.keys(obj):返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名

Object.getOwnPropertyNames(obj):回一個(gè)數(shù)組嘹吨,包含對(duì)象自身的所有屬性(不含 Symbol 屬性搬味,但是包括不可枚舉屬性)的鍵名

Object.getOwnPropertySymbols(obj):返回一個(gè)數(shù)組,包含對(duì)象自身的所有 Symbol 屬性的鍵名

Reflect.ownKeys(obj):返回一個(gè)數(shù)組蟀拷,包含對(duì)象自身的(不含繼承的)所有鍵名碰纬,不管鍵名是 Symbol 或字符串,也不管是否可枚舉

2问芬、上述遍歷悦析,都遵守同樣的屬性遍歷的次序規(guī)則:

首先遍歷所有數(shù)值鍵,按照數(shù)值升序排列

其次遍歷所有字符串鍵此衅,按照加入時(shí)間升序排列

最后遍歷所有 Symbol 鍵强戴,按照加入時(shí)間升序排

六、對(duì)象新增的方法

1挡鞍、Object.is():嚴(yán)格判斷兩個(gè)值是否相等骑歹,與嚴(yán)格比較運(yùn)算符(===)的行為基本一致,不同之處只有兩個(gè):一是+0不等于-0墨微,二是NaN等于自身

2道媚、Object.assign():

Object.assign()方法用于對(duì)象的合并,將源對(duì)象source的所有可枚舉屬性,復(fù)制到目標(biāo)對(duì)象target

Object.assign()方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象衰琐,后面的參數(shù)都是源對(duì)象

注意:Object.assign()方法是淺拷貝也糊,遇到同名屬性會(huì)進(jìn)行替換

3、Object.getOwnPropertyDescriptors():返回指定對(duì)象所有自身屬性(非繼承屬性)的描述對(duì)象

4羡宙、Object.setPrototypeOf():用來設(shè)置一個(gè)對(duì)象的原型對(duì)象

5狸剃、Object.getPrototypeOf():用于讀取一個(gè)對(duì)象的原型對(duì)象

6、Object.keys():返回自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名的數(shù)組

7狗热、Object.values():返回自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵對(duì)應(yīng)值的數(shù)組

8钞馁、Object.entries():返回一個(gè)對(duì)象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對(duì)的數(shù)組

9、Object.fromEntries():用于將一個(gè)鍵值對(duì)數(shù)組轉(zhuǎn)為對(duì)象

4.函數(shù)新增拓展

一匿刮、參數(shù)

1僧凰、ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值:

函數(shù)的形參是默認(rèn)聲明的,不能使用let或const再次聲明

參數(shù)默認(rèn)值可以與解構(gòu)賦值的默認(rèn)值結(jié)合起來使用

當(dāng)參數(shù)為對(duì)象的時(shí)候才能進(jìn)行解構(gòu)熟丸,如果沒有提供參數(shù)的時(shí)候训措,變量x和y就不會(huì)生成,從而報(bào)錯(cuò)光羞,這里設(shè)置默認(rèn)值避免

參數(shù)默認(rèn)值應(yīng)該是函數(shù)的尾參數(shù)绩鸣,如果不是非尾部的參數(shù)設(shè)置默認(rèn)值,實(shí)際上這個(gè)參數(shù)是沒發(fā)省略的

二纱兑、屬性

1呀闻、length:

length將返回沒有指定默認(rèn)值的參數(shù)個(gè)數(shù)

rest 參數(shù)也不會(huì)計(jì)入length屬性

如果設(shè)置了默認(rèn)值的參數(shù)不是尾參數(shù),那么length屬性也不再計(jì)入后面的參數(shù)了

2潜慎、name:

返回該函數(shù)的函數(shù)名

如果將一個(gè)具名函數(shù)賦值給一個(gè)變量捡多,則 name屬性都返回這個(gè)具名函數(shù)原本的名字

Function構(gòu)造函數(shù)返回的函數(shù)實(shí)例,name屬性的值為anonymous

bind返回的函數(shù)铐炫,name屬性值會(huì)加上bound前綴

三垒手、作用域

1、一旦設(shè)置了參數(shù)的默認(rèn)值驳遵,函數(shù)進(jìn)行聲明初始化時(shí)淫奔,參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域

2、等到初始化結(jié)束堤结,這個(gè)作用域就會(huì)消失唆迁。這種語法行為,在不設(shè)置參數(shù)默認(rèn)值時(shí)竞穷,是不會(huì)出現(xiàn)的

四唐责、嚴(yán)格模式

只要函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值瘾带、或者擴(kuò)展運(yùn)算符鼠哥,那么函數(shù)內(nèi)部就不能顯式設(shè)定為嚴(yán)格模式,否則會(huì)報(bào)錯(cuò)

五、箭頭函數(shù)

1朴恳、如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)抄罕,就使用一個(gè)圓括號(hào)代表參數(shù)部分

2、如果箭頭函數(shù)的代碼塊部分多于一條語句于颖,就要使用大括號(hào)將它們括起來呆贿,并且使用return語句返回

3、如果返回對(duì)象森渐,需要加括號(hào)將對(duì)象包裹

4做入、注意點(diǎn):

函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象同衣,而不是使用時(shí)所在的對(duì)象

不可以當(dāng)作構(gòu)造函數(shù)竟块,也就是說,不可以使用new命令耐齐,否則會(huì)拋出一個(gè)錯(cuò)誤

不可以使用arguments對(duì)象浪秘,該對(duì)象在函數(shù)體內(nèi)不存在。如果要用蚪缀,可以用 rest 參數(shù)代替

不可以使用yield命令秫逝,因此箭頭函數(shù)不能用作 Generator 函數(shù)

5.Set Map

一、定義

1询枚、Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu),Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu)

2浙巫、什么是集合和字典:

集合:是由一堆無序的金蜀、相關(guān)聯(lián)的,且不重復(fù)的內(nèi)存結(jié)構(gòu)【數(shù)學(xué)中稱為元素】組成的組合

字典:是一些元素的集合的畴。每個(gè)元素有一個(gè)稱作key 的域渊抄,不同元素的key 各不相同

3、區(qū)別:

共同點(diǎn):集合丧裁、字典都可以存儲(chǔ)不重復(fù)的值

不同點(diǎn):集合是以[值护桦,值]的形式存儲(chǔ)元素,字典是以[鍵煎娇,值]的形式存儲(chǔ)

二二庵、Set

1、Set是es6新增的數(shù)據(jù)結(jié)構(gòu)缓呛,類似于數(shù)組催享,但是成員的值都是唯一的,沒有重復(fù)的值哟绊,我們一般稱為集合

Set本身是一個(gè)構(gòu)造函數(shù)因妙,用來生成 Set 數(shù)據(jù)結(jié)構(gòu)

2、增刪改查:

add():添加某個(gè)值,返回 Set 結(jié)構(gòu)本身攀涵。當(dāng)添加實(shí)例中已經(jīng)存在的元素铣耘,set不會(huì)進(jìn)行處理添加

delete():刪除某個(gè)值,返回一個(gè)布爾值以故,表示刪除是否成功

has():返回一個(gè)布爾值涡拘,判斷該值是否為Set的成員

clear():清除所有成員,沒有返回值

2据德、遍歷:

keys():返回鍵名的遍歷器

values():返回鍵值的遍歷器

entries():返回鍵值對(duì)的遍歷器

forEach():使用回調(diào)函數(shù)遍歷每個(gè)成員

3鳄乏、Set的遍歷順序就是插入順序:

keys方法、values方法棘利、entries方法返回的都是遍歷器對(duì)象

forEach()用于對(duì)每個(gè)成員執(zhí)行某種操作橱野,沒有返回值,鍵值善玫、鍵名都相等水援,同樣的forEach方法有第二個(gè)參數(shù),用于綁定處理函數(shù)的this

擴(kuò)展運(yùn)算符和Set 結(jié)構(gòu)相結(jié)合實(shí)現(xiàn)數(shù)組或字符串去重

實(shí)現(xiàn)并集茅郎、交集蜗元、和差集

三、Map

1系冗、Map類型是鍵值對(duì)的有序列表奕扣,而鍵和值都可以是任意類型

Map本身是一個(gè)構(gòu)造函數(shù),用來生成 Map 數(shù)據(jù)結(jié)構(gòu)

2掌敬、增刪改查:

size:size屬性返回 Map 結(jié)構(gòu)的成員總數(shù)惯豆。

set():設(shè)置鍵名key對(duì)應(yīng)的鍵值為value,然后返回整個(gè) Map 結(jié)構(gòu)奔害。如果key已經(jīng)有值楷兽,則鍵值會(huì)被更新,否則就新生成該鍵华临。同時(shí)返回的是當(dāng)前Map對(duì)象芯杀,可采用鏈?zhǔn)綄懛?/p>

get():get方法讀取key對(duì)應(yīng)的鍵值,如果找不到key雅潭,返回undefined

has():has方法返回一個(gè)布爾值揭厚,表示某個(gè)鍵是否在當(dāng)前 Map 對(duì)象之中

delete():delete方法刪除某個(gè)鍵,返回true寻馏。如果刪除失敗棋弥,返回false

clear():clear方法清除所有成員,沒有返回值

3诚欠、遍歷:

keys():返回鍵名的遍歷器

values():返回鍵值的遍歷器

entries():返回所有成員的遍歷器

forEach():遍歷 Map 的所有成員

4顽染、遍歷順序就是插入順序

四漾岳、WeakSet

1、WeakSet可以接受一個(gè)具有 Iterable接口的對(duì)象作為參數(shù)

2粉寞、在API中WeakSet與Set有兩個(gè)區(qū)別:

沒有遍歷操作的API

沒有size屬性

3尼荆、WeackSet只能成員只能是引用類型,而不能是其他類型的值

4唧垦、WeakSet里面的引用只要在外部消失捅儒,它在 WeakSet里面的引用就會(huì)自動(dòng)消失

五、WeakMap

1振亮、WeakMap結(jié)構(gòu)與Map結(jié)構(gòu)類似巧还,也是用于生成鍵值對(duì)的集合

2、在API中WeakMap與Map有兩個(gè)區(qū)別:

沒有遍歷操作的API

沒有clear清空方法

3坊秸、WeakMap只接受對(duì)象作為鍵名(null除外)麸祷,不接受其他類型的值作為鍵名

4、WeakMap的鍵名所指向的對(duì)象褒搔,一旦不再需要阶牍,里面的鍵名對(duì)象和所對(duì)應(yīng)的鍵值對(duì)會(huì)自動(dòng)消失,不用手動(dòng)刪除引用

6.Promise

一星瘾、定義

1走孽、Promise,譯為承諾琳状,是異步編程的一種解決方案磕瓷,比傳統(tǒng)的解決方案(回調(diào)函數(shù))更加合理和更加強(qiáng)大

2、狀態(tài):pending(進(jìn)行中)算撮、fulfilled(已成功)生宛、rejected(已失敗)

二肮柜、優(yōu)點(diǎn)

鏈?zhǔn)讲僮鳒p低了編碼難度

代碼可讀性明顯增強(qiáng)

三、特點(diǎn)

對(duì)象的狀態(tài)不受外界影響倒彰,只有異步操作的結(jié)果审洞,可以決定當(dāng)前是哪一種狀態(tài)

一旦狀態(tài)改變(從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected),就不會(huì)再變待讳,任何時(shí)候都可以得到這個(gè)結(jié)果

四芒澜、用法

1、Promise對(duì)象是一個(gè)構(gòu)造函數(shù)创淡,用來生成Promise實(shí)例:

const promise = new Promise(function(resolve, reject) {});

2痴晦、Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject:

resolve函數(shù)的作用是琳彩,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α?/p>

reject函數(shù)的作用是誊酌,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆?/p>

3部凑、實(shí)例方法:Promise構(gòu)建出來的實(shí)例存在以下方法

then():then是實(shí)例狀態(tài)發(fā)生改變時(shí)的回調(diào)函數(shù),第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù)碧浊,第二個(gè)參數(shù)是rejected狀態(tài)的回調(diào)函數(shù)

catch():catch()方法是.then(null, rejection)或.then(undefined, rejection)的別名涂邀,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)

finally():finally()方法用于指定不管 Promise 對(duì)象最后狀態(tài)如何,都會(huì)執(zhí)行的操作

4箱锐、構(gòu)造函數(shù)方法:Promise構(gòu)造函數(shù)存在以下方法

all():Promise.all()方法用于將多個(gè) Promise實(shí)例比勉,包裝成一個(gè)新的 Promise實(shí)例

race():Promise.race()方法同樣是將多個(gè) Promise 實(shí)例,包裝成一個(gè)新的 Promise 實(shí)

allSettled():Promise.allSettled()方法接受一組 Promise 實(shí)例作為參數(shù)驹止,包裝成一個(gè)新的 Promise 實(shí)例

resolve():將現(xiàn)有對(duì)象轉(zhuǎn)為 Promise對(duì)象

reject():Promise.reject(reason)方法也會(huì)返回一個(gè)新的 Promise 實(shí)例浩聋,該實(shí)例的狀態(tài)為rejected

五、使用場景

將圖片的加載寫成一個(gè)Promise臊恋,一旦加載完成衣洁,Promise的狀態(tài)就發(fā)生變化

通過鏈?zhǔn)讲僮鳎瑢⒍鄠€(gè)渲染數(shù)據(jù)分別給個(gè)then捞镰,讓其各司其職闸与。或當(dāng)下個(gè)異步請(qǐng)求依賴上個(gè)請(qǐng)求結(jié)果的時(shí)候岸售,我們也能夠通過鏈?zhǔn)讲僮饔押媒鉀Q問題

通過all()實(shí)現(xiàn)多個(gè)請(qǐng)求合并在一起践樱,匯總所有請(qǐng)求結(jié)果,只需設(shè)置一個(gè)loading即可

通過race可以設(shè)置圖片請(qǐng)求超時(shí)

7.Generator

一凸丸、定義

1拷邢、Generator 函數(shù)是 ES6 提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同

2屎慢、執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象瞭稼,可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)

二、特征

1腻惠、function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)

2环肘、函數(shù)體內(nèi)部使用yield表達(dá)式,定義不同的內(nèi)部狀態(tài)

三集灌、異步解決方案

1悔雹、回調(diào)函數(shù):所謂回調(diào)函數(shù),就是把任務(wù)的第二段單獨(dú)寫在一個(gè)函數(shù)里面欣喧,等到重新執(zhí)行這個(gè)任務(wù)的時(shí)候腌零,再調(diào)用這個(gè)函數(shù)

2、Promise:Promise就是為了解決回調(diào)地獄而產(chǎn)生的唆阿,將回調(diào)函數(shù)的嵌套益涧,改成鏈?zhǔn)秸{(diào)用

3、generator:yield表達(dá)式可以暫停函數(shù)執(zhí)行驯鳖,next方法用于恢復(fù)函數(shù)執(zhí)行闲询,這使得Generator函數(shù)非常適合將異步任務(wù)同步化

4久免、async/await:將上面Generator函數(shù)改成async/await形式,更為簡潔嘹裂,語義化更強(qiáng)了

5妄壶、區(qū)別:

promise和async/await是專門用于處理異步操作的

Generator并不是為異步而設(shè)計(jì)出來的,它還有其他功能(對(duì)象迭代寄狼、控制輸出丁寄、部署Interator接口...)

promise編寫代碼相比Generator、async更為復(fù)雜化泊愧,且可讀性也稍差

Generator伊磺、async需要與promise對(duì)象搭配處理異步情況

async實(shí)質(zhì)是Generator的語法糖,相當(dāng)于會(huì)自動(dòng)執(zhí)行Generator函數(shù)

async使用上更為簡潔删咱,將異步代碼以同步的形式進(jìn)行編寫屑埋,是處理異步編程的最終方案

8.Proxy

一、定義

用于定義基本操作的自定義行為

二痰滋、本質(zhì)

1摘能、修改的是程序默認(rèn)形為,就形同于在編程語言層面上做修改敲街,屬于元編程(meta programming)

2团搞、Proxy 亦是如此,用于創(chuàng)建一個(gè)對(duì)象的代理多艇,從而實(shí)現(xiàn)基本操作的攔截和自定義(如屬性查找逻恐、賦值、枚舉峻黍、函數(shù)調(diào)用等)

三复隆、用法

1、Proxy為 構(gòu)造函數(shù)姆涩,用來生成 Proxy實(shí)例

var proxy = new Proxy(target, handler)

2挽拂、參數(shù):

target表示所要攔截的目標(biāo)對(duì)象(任何類型的對(duì)象,包括原生數(shù)組骨饿,函數(shù)轻局,甚至另一個(gè)代理))

handler通常以函數(shù)作為屬性的對(duì)象,各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理 p 的行為

四样刷、使用場景

1、Proxy其功能非常類似于設(shè)計(jì)模式中的代理模式览爵,常用功能如下:

攔截和監(jiān)視外部對(duì)對(duì)象的訪問

降低函數(shù)或類的復(fù)雜度

在復(fù)雜操作前對(duì)操作進(jìn)行校驗(yàn)或?qū)λ栀Y源進(jìn)行管理

2置鼻、使用 Proxy 保障數(shù)據(jù)類型的準(zhǔn)確性:

聲明了一個(gè)私有的 apiKey,便于 api 這個(gè)對(duì)象內(nèi)部的方法調(diào)用蜓竹,但不希望從外部也能夠訪問 api._apiKey

3箕母、觀察者模式(Observer mode)指的是函數(shù)自動(dòng)觀察數(shù)據(jù)對(duì)象储藐,一旦對(duì)象有變化,函數(shù)就會(huì)自動(dòng)執(zhí)行:

observable函數(shù)返回一個(gè)原始對(duì)象的 Proxy代理嘶是,攔截賦值操作钙勃,觸發(fā)充當(dāng)觀察者的各個(gè)函數(shù)

4、觀察者函數(shù)都放進(jìn)Set集合聂喇,當(dāng)修改obj的值辖源,在會(huì)set函數(shù)中攔截,自動(dòng)執(zhí)行Set所有的觀察者

9.Module

一希太、定義

1克饶、模塊:

是能夠單獨(dú)命名并獨(dú)立地完成一定功能的程序語句的集合(即程序代碼和數(shù)據(jù)結(jié)構(gòu)的集合體)

2、原因:

變量和方法不容易維護(hù)誊辉,容易污染全局作用域

加載資源的方式通過script標(biāo)簽從上到下矾湃。

依賴的環(huán)境主觀邏輯偏重,代碼較多就會(huì)比較復(fù)雜堕澄。

大型項(xiàng)目資源難以維護(hù)邀跃,特別是多人合作的情況下,資源的引入會(huì)讓人奔潰

二蛙紫、方案

1拍屑、CommonJs(典型代表:node.js早期):

它通過 require 來引入模塊,通過 module.exports 定義模塊的輸出接口

這種模塊加載方案是服務(wù)器端的解決方案惊来,它是以同步的方式來引入模塊的

因?yàn)樵诜?wù)端文件都存儲(chǔ)在本地磁盤丽涩,所以讀取非常快裁蚁,所以以同步的方式加載沒有問題

但如果是在瀏覽器端矢渊,由于模塊的加載是使用網(wǎng)絡(luò)請(qǐng)求,因此使用異步加載的方式更加合適

2枉证、AMD(典型代表:require.js):

這種方案采用異步加載的方式來加載模塊矮男,模塊的加載不影響后面語句的執(zhí)行

所有依賴這個(gè)模塊的語句都定義在一個(gè)回調(diào)函數(shù)里,等到加載完成后再執(zhí)行回調(diào)函數(shù)室谚。require.js 實(shí)現(xiàn)了 AMD 規(guī)范

3毡鉴、CMD(典型代表:sea.js):

這種方案和 AMD 方案都是為了解決異步模塊加載的問題,sea.js 實(shí)現(xiàn)了 CMD 規(guī)范

它和require.js的區(qū)別在于模塊定義時(shí)對(duì)依賴的處理不同和對(duì)依賴模塊的執(zhí)行時(shí)機(jī)的處理不同

4秒赤、ES6 Module:

ES6 提出的方案猪瞬,使用 import 和 export 的形式來導(dǎo)入導(dǎo)出模塊

10.Decorator

一、定義

1入篮、Decorator陈瘦,即裝飾器,從名字上很容易讓我們聯(lián)想到裝飾者模式:

簡單來講潮售,裝飾者模式就是一種在不改變?cè)惡褪褂美^承的情況下痊项,動(dòng)態(tài)地?cái)U(kuò)展對(duì)象功能的設(shè)計(jì)理論

2锅风、ES6中Decorator功能亦如此,其本質(zhì)也不是什么高大上的結(jié)構(gòu)鞍泉,就是一個(gè)普通的函數(shù)皱埠,用于擴(kuò)展類屬性和類方法:

代碼可讀性變強(qiáng)了,裝飾器命名相當(dāng)于一個(gè)注釋

在不改變?cè)写a情況下咖驮,對(duì)原來功能進(jìn)行擴(kuò)展

二边器、用法

1、類的裝飾:當(dāng)對(duì)類本身進(jìn)行裝飾的時(shí)候游沿,能夠接受一個(gè)參數(shù)饰抒,即類本身

2、類屬性的裝飾:當(dāng)對(duì)類屬性進(jìn)行裝飾的時(shí)候诀黍,能夠接受三個(gè)參數(shù)

類的原型對(duì)象

需要裝飾的屬性名

裝飾屬性名的描述對(duì)象

3袋坑、注意:裝飾器不能用于修飾函數(shù),因?yàn)楹瘮?shù)存在變量聲明情況

三眯勾、使用場景

1枣宫、基于Decorator強(qiáng)大的作用,我們能夠完成各種場景的需求吃环,下面簡單列舉幾種

2也颤、使用react-redux的時(shí)候,如果寫成下面這種形式郁轻,既不雅觀也很麻煩:

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

3翅娶、通過裝飾器就變得簡潔多了:

@connect(mapStateToProps, mapDispatchToProps)

export default class MyReactComponent extends React.Component {}

4、將mixins好唯,也可以寫成裝飾器竭沫,讓使用更為簡潔了:

function mixins(...list) {

? return function (target) {

? ? Object.assign(target.prototype, ...list);

? };

}

// 使用

const Foo = {

? foo() { console.log('foo') }

};

@mixins(Foo)

class MyClass {}

let obj = new MyClass();

obj.foo() // "foo"

文鏈接:https://blog.csdn.net/qq_56966124/article/details/124264185

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市骑篙,隨后出現(xiàn)的幾起案子蜕提,更是在濱河造成了極大的恐慌,老刑警劉巖靶端,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谎势,死亡現(xiàn)場離奇詭異,居然都是意外死亡杨名,警方通過查閱死者的電腦和手機(jī)脏榆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來台谍,“玉大人姐霍,你說我怎么就攤上這事。” “怎么了镊折?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長介衔。 經(jīng)常有香客問我恨胚,道長,這世上最難降的妖魔是什么炎咖? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任赃泡,我火速辦了婚禮,結(jié)果婚禮上乘盼,老公的妹妹穿的比我還像新娘升熊。我一直安慰自己,他們只是感情好绸栅,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布级野。 她就那樣靜靜地躺著,像睡著了一般粹胯。 火紅的嫁衣襯著肌膚如雪蓖柔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天风纠,我揣著相機(jī)與錄音况鸣,去河邊找鬼。 笑死竹观,一個(gè)胖子當(dāng)著我的面吹牛镐捧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播臭增,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼懂酱,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了速址?” 一聲冷哼從身側(cè)響起玩焰,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芍锚,沒想到半個(gè)月后昔园,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡并炮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年默刚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逃魄。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡荤西,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情邪锌,我是刑警寧澤勉躺,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站觅丰,受9級(jí)特大地震影響饵溅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜妇萄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一蜕企、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧冠句,春花似錦轻掩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至基茵,卻和暖如春奋构,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拱层。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工弥臼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人根灯。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓径缅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親烙肺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子纳猪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • ES6 核心特性 [圖片上傳失敗...(image-b01919-1545900229494)] 一、開發(fā)環(huán)境配置...
    圓滾滾1991閱讀 537評(píng)論 0 0
  • ES6桃笙、ES7氏堤、ES8特性一鍋燉(ES6、ES7搏明、ES8學(xué)習(xí)指南) 概述 ES全稱ECMAScript鼠锈,ECMAS...
    李振亞_cb74閱讀 314評(píng)論 0 0
  • let和const命令 var:聲明變量,更多的是全局作用域星著,存在變量提升 let:聲明變量购笆,存在于塊級(jí)作用域,不...
    zhangivon閱讀 2,480評(píng)論 1 13
  • ECMAScript 6(簡稱ES6)是于2015年6月正式發(fā)布的JavaScript語言的標(biāo)準(zhǔn)虚循,正式名為ECMA...
    陳yc閱讀 1,474評(píng)論 1 14
  • 在近期的Vue開發(fā)中同欠,使用了大量的ES6語法样傍,因此覺得有必要找個(gè)時(shí)間來整理下近期的學(xué)習(xí)筆記。ES6相對(duì)ES5增加了...
    zhanzhan_wu閱讀 7,970評(píng)論 1 10