總結(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