我的ES6學習筆記

前幾年一直覺得瀏覽器對ES6的支持度不高,要用工具編譯成ES5很麻煩,就一直沒狠下心學,如今雖然TS很好,但我還是決定先學學ES6。

這是學習筆記,并不是教程。本人學習的教程為阮一峰老師的

ES6教程

1. let和const

1.1 let聲明的變量為塊級作用域變量

1.2 沒有命名提升,不能重復(fù)聲明,不能在聲明前使用

1.3 for循環(huán)中計數(shù)量和循環(huán)內(nèi)可以聲明同一名稱變量,但是不是指向同一個值。

1.4 注意暫時性死區(qū)

1.6 塊級作用域中可以聲明”局部”函數(shù),但是具體怎樣還是根據(jù)瀏覽器自己的實現(xiàn)方式?jīng)Q定。建議使用函數(shù)表達式

1.7 const用于聲明常量,必須立即初始化,也是處于塊級作用域

1.8 對簡單類型數(shù)據(jù),const為常量,隊伍復(fù)合類型數(shù)據(jù),const只會保證指向地址不改變,其數(shù)據(jù)結(jié)構(gòu)可以改變,如給對象多加一個屬性值

1.9 想凍結(jié)對象需要使用Object.freeze方法

1.10 let和const聲明的全局作用域?qū)ο蟛辉陧攲訉ο笾?/p>

2. 變量的結(jié)構(gòu)賦值

2.1 模式匹配,解構(gòu)不成功會賦值為undefined

2.2 可以不完全解構(gòu),即左邊的項數(shù)少于需要被解構(gòu)的變量

2.3 被解構(gòu)的必須是可遍歷結(jié)構(gòu)

2.4 可以賦默認值,只有當被解構(gòu)對象相對應(yīng)的此位置為嚴格的undefined時才會賦予默認值,要注意暫時性死區(qū)

2.5 如果使用函數(shù)作為默認值,則該函數(shù)是惰性的,即必須賦予默認值時才會運行該函數(shù)

2.6 對象解構(gòu)時必須名稱對應(yīng),可以取到繼承的屬性

2.7 如果用對象解構(gòu)對象時,雙方按照相同鍵名賦值,同時鍵名不可訪問

2.8 也可以使用嵌套對象解構(gòu),可以使用默認值

2.9 使用已經(jīng)聲明的變量,進行解構(gòu)時需要將整條解構(gòu)語句放入小括號中,避免由于行首出現(xiàn){而被解析成代碼塊而報錯

2.10 可以對數(shù)組進行對象解構(gòu)(待補充詳情)

2.11 字符串也可以直接解構(gòu),可以對字符串的length屬性進行對象解構(gòu)

2 .12 如果被解構(gòu)對象是數(shù)值或者布爾值,會先轉(zhuǎn)化成對象

2.13 不能直接對null或者undefined進行解構(gòu),因為他們不能轉(zhuǎn)化成對象

2.14 函數(shù)傳參時可以使用解構(gòu)的方式

2.15 盡量少使用小括號,變量聲明和函數(shù)傳參的時候使用小括號會報錯

2.16 解構(gòu)的一些用途:

? 2.16.1 交換變量的值

? 2.16.2 函數(shù)返回多個值

? 2.16.3 函數(shù)參數(shù)定義

? 2.16.4 提取json數(shù)據(jù)

? 2.16.5 函數(shù)參數(shù)默認值賦予

? 2.16.6 遍歷0MAP結(jié)構(gòu)(可以同時獲取鍵名和鍵值,或者獲得其一)

? 2.16.7 導(dǎo)入模塊指定方法

3. 字符串的拓展

3.1 增強了對Unicode的支持

3.2 可以使用 for? of 遍歷字符串,可以正確識別大于0xFFFF的字符

3.3 模板字符串使用反引號 ` ,默認保留所有空格和換行,

????3.3.1 如果想要清除換行,需要對字符串使用trim()函數(shù)

????3.3.2如果想要嵌入變量, 則需要將變量名寫在 ${} 之中, 同時 {} 內(nèi)部還可以放入任意的js表達式,包括運算, 引用對象屬性等, 還可以調(diào)用函數(shù)

4. set 和 map 數(shù)據(jù)結(jié)構(gòu)

4.1 set不會接受重復(fù)的成員

4.2 set的構(gòu)造函數(shù)可以接受數(shù)組或者類數(shù)組的成員

4.3 快速去除重復(fù)成員

```js

[...newSet(array)]

[...newSet('ababbc')].join('')

```

4.4 set內(nèi)部判斷兩個值是否相等的時候用的是 === 操作符, 但是對于NaN會全部視為一個相等的值,但是對于對象會總是認為是不相等的值

4.5 set實例的屬性:?

- size 返回set實例成員的總數(shù)

- constructor 構(gòu)造函數(shù),就是 set函數(shù)

4.5 set實例的操作方法

?- add(value) 添加某個值

- delete(value) 刪除一個值,返回一個布爾值,表示刪除是否成功

- has(value) 返回一個布爾值,判斷set中有沒有指定的值

- clear(value) 清楚所有成員

4.6 Array.from(set) 可以將一個set轉(zhuǎn)化成一個數(shù)組

4.7 set實例的遍歷屬性

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

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

- entries() 返回鍵值對的遍歷器

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

4.8? set的鍵名和鍵值是相等的, 默認遍歷器是他的values方法

4.9 數(shù)組的map, fliter方法可以間接用于set? ? ? ? ? ? ??newSet([...a].filter(x=>!b.has(x)))

4.10?想在遍歷操作中,同步改變原來的 Set 結(jié)構(gòu),目前沒有直接的方法,但有兩種變通方法。一種是利用原 Set 結(jié)構(gòu)映射出一個新的結(jié)構(gòu),然后賦值給原來的 Set 結(jié)構(gòu);另一種是利用Array.from方法。set=newSet([...set].map(val=>val*2))? ??set=newSet(Array.from(set,val=>val*2))

4.11 可以通過調(diào)用fliter方法來實現(xiàn)集合的交并補

4.12?WeakSet 結(jié)構(gòu)與 Set 類似,也是不重復(fù)的值的集合,成員只能是對象,而不能是其他類型的值

4.13?WeakSet 中的對象都是弱引用,即垃圾回收機制不考慮 WeakSet 對該對象的引用,也就是說,如果其他對象都不再引用該對象,那么垃圾回收機制會自動回收該對象所占用的內(nèi)存,不考慮該對象還存在于 WeakSet 之中

4.14?WeakSet 內(nèi)部有多少個成員,取決于垃圾回收機制有沒有運行,運行前后很可能成員個數(shù)是不一樣的,而垃圾回收機制何時運行是不可預(yù)測的,因此 ES6 規(guī)定 WeakSet 不可遍歷

4.15?WeakSet 可以接受一個數(shù)組或類似數(shù)組的對象作為參數(shù)。(實際上,任何具有 Iterable 接口的對象,都可以作為 WeakSet 的參數(shù))

```js

const a=[[1,2],[3,4]];

const ws=newWeakSet(a);

// WeakSet {[1, 2], [3, 4]}

//a數(shù)組的成員成為 WeakSet 的成員,而不是a數(shù)組本身。這意味著,數(shù)組的成員只能是對象

```


4.16 weakset沒有size和foreach屬性, 但是有 add has delete方法

4.17 map結(jié)構(gòu)是一個鍵值對, 不同以往的object對象的 "字符串->值" 而是采用的 "值->值"

4.18 使用 set() 方法可以向map結(jié)構(gòu)中添加一對數(shù)據(jù), 使用get()方法可以通過鍵名得到一個數(shù)據(jù),使用size方法可以返回map中數(shù)據(jù)對的數(shù)量

4.19?任何具有 Iterator 接口、且每個成員都是一個雙元素的數(shù)組的數(shù)據(jù)結(jié)構(gòu)都可以當作Map構(gòu)造函數(shù)的參數(shù)

4.20?如果對同一個鍵多次賦值,后面的值將覆蓋前面的值

4.21?只有對同一個對象的引用,Map 結(jié)構(gòu)才將其視為同一個鍵, 也就是說對于數(shù)組對象等復(fù)雜結(jié)構(gòu)作為鍵名時,需要特別小心

4.22?Map 的鍵實際上是跟內(nèi)存地址綁定的,只要內(nèi)存地址不一樣,就視為兩個鍵。這就解決了同名屬性碰撞(clash)的問題

4.23?Map 的鍵是一個簡單類型的值(數(shù)字、字符串、布爾值),則只要兩個值嚴格相等,Map 將其視為一個鍵,比如0和-0就是一個鍵,布爾值true和字符串true則是兩個不同的鍵。另外,undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等于自身,但 Map 將其視為同一個鍵

4.24 map的操作屬性和遍歷屬性和set相同, forEach方法還可以接受第二個參數(shù),用來綁定this?

```js

const reporter={report:function(key,value){console.log("Key: %s, Value: %s",key,value);}};

map.forEach(function(value,key,map){this.report(key,value);},reporter);

```

4.25?WeakMap只接受對象作為鍵名(null除外),不接受其他類型的值作為鍵名,?WeakMap的鍵名所指向的對象,不計入垃圾回收機制

4.26?WeakMap的設(shè)計目的在于避免產(chǎn)生不必要的引用

4.27?沒有遍歷操作(即沒有keys()、values()和entries()方法),也沒有size屬性WeakMap只有四個方法可用:get()、set()、has()、delete()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容