ES6——擴展

　　ES6做爲新一代的JS語言規範，其中也給每種數據類型添加了一些新的使用方法，列舉以下

 　　內容較多，須要好好去練習並鞏固

 

字符串

模板字符串

　　用``（ESC鍵下的鍵）括起來的字符串，在輸出方面，和以前用單引號/雙引號的沒區別

　　區別在於拼接字符串時，若是使用了對象的屬性值，之前須要用加號拼接

　　而模板字符串能夠在字符串用${}的方式調用對象中的屬性，不使用加號拼接

　　下面的示例中，兩種字符串拼接的效果是一致的

　　

　　在${}中，能夠用模板字符串的方法，繼續添加字符串以及某個對象的屬性值到最終的字符串中，造成一個嵌套

　　此外，還能夠對調用的某個對象屬性值用toUpperCase/toLowerCase等方法，變動爲大寫/小寫（適用於屬性值爲英文時）

　　

擴充方法（增長字符串內容）

padStart/padEnd

　　用來擴展字符串的長度，傳入兩個參數，第一個是補充後的字符串總長度，第二個是補充的字符串

　　padStart把字符串添加在原來的之前，padEnd添加在原有的之後

　　

repeat

　　用來產生一個重複某個字符串的字符串，傳入重複遍數

　　其中重複的遍數能夠爲小數，不可爲負數，最後會對小數向下取整（實際上能夠取大於-1的負數）

　　

　　能夠用ES5的join這個字符串方法封裝一個repeat方法

　　（這裏的例子用了一個空數組，比實際要的元素多一個，而後鏈接數組變成字符串時，因爲空隙和實際元素數量同樣，利用空隙仿repeat效果）

　　（不過徹底能夠用ES6數組新增的fill方法，直接給指定長度的數組填充內容來實現repeat）

　　

判斷方法（判斷字符串內容）

starswith/endswith

　　用來判斷字符串是否以傳入的字符串開頭/結尾，返回布爾值

　　

includes

　　用來判斷字符串中是否有指定的字符串，返回布爾值

　　ES6以前通常用indexOf來判斷的，若是不爲-1即存在

　　這裏用了一個取反的運算符，能夠簡單理解成~x=-(x+1)，也就是說x取-1時值爲0，其他時候都爲負數，而負數作隱式轉換爲true，所以在index取-1時返回false

　　

遍歷

for-of

　　在ES6以前，遍歷字符串要用for-in方法，或者把字符串變成數組再遍歷（能夠用字符串的split方法或數組的原型對象方法來轉成數組）

　　不過須要注意，for-in和for-of仍是有區別的，詳情請點擊此處瞭解

　　ES6中能夠用解構賦值，把字符串拆成單獨的字符並變成數組，也能夠用這裏提到的for-of語句

　　

　　能夠用for-of實現把大寫字母加密成數字（案例的代碼見9.3_02.html，還沒有完成，待補充）

 

Unicode表示法

　　在ES6以前，unicode識別時，只可識別到\u0000-\uffff範圍內的字符（即unicode編碼爲4位的字符）

　　若是超出了這個範圍，系統會把其拆分紅兩個單獨的字符而不是一整個

　　例如\u1f436，系統會認爲是\u1f43和\u0006組合成的兩個字符，出現識別錯誤（其實是一個狗的emoji表情）

　　爲了解決這個問題，ES6中能夠把兩個字節編碼的unicode符號用{}括起來，系統識別的時候就會認爲是一個字符（\u{1f436}）

codePointAt

　　該方法用來獲取unicode字符的碼點，能夠理解成\u後面的數值，不過返回的是十進制數值

at

　　能夠從字符串中取出指定位置的字符，獲取其碼點

　　但該方法Chrome不支持，在瀏覽器中的支持效果很差

 

正則表達式

　　ES6中，對正則表達式有了一些新的功能添加

　　例如，在用構造函數方法來建立正則表達式時，ES5是不容許在第二個參數傳入修飾符的（報錯）

　　而ES6能夠傳入，且第二個參數傳入的修飾符會把第一個參數中傳入的修飾符給覆蓋掉

　　（這裏用正則對象的flags方法，返回其修飾符）

　　

修飾符

unicode的修飾符u

　　前面在unicode的擴展裏提到了識別unicode編碼的問題，在ES5中也有正則匹配unicode編碼的問題

　　例如多個相鄰的unicode編碼，其實是兩個字符，ES5裏只要匹配上其中一個就返回true

　　而在ES6中，添加修飾符u以後，必須匹配上相鄰的全部unicode碼纔算匹配成功

　　

粘連修飾符y

　　粘連，理解爲匹配完上一個以後匹配緊連在後面的剩餘字符串，若是此時匹配上了則匹配成功

　　此處的案例中，r2第三次剩餘字符串是-imooc，不是以imooc開頭，因此返回null

　　

 

數值擴展

　　ES6中，八進制數據用0o開頭，二進制用0b開頭

　　此外，有些新增的數值的方法

新增數值方法

isFinite

　　判斷一個數是否爲Infinite，返回布爾值

　　有點相似於isNaN的判斷，其中在-Infinite和+Infinite之間的數才返回true

　　

isSafeInteger

　　判斷一個數是否在安全數範圍內，返回布爾值

　　其中安全數範圍爲2的正負53次方-1，最大和最小的安全數能夠經過MAX(MIN)_SAFE_INTEGER獲取

　　

冪運算

　　ES6新增了冪運算符（**），該計算是右結合的（即多個冪運算連在一塊兒，從最右側開始計算）

　　

 

函數擴展

　　ES6在函數方面跟解構賦值相似，主要針對參數有較大的擴展，固然在函數的構造上也有新的方法

參數相關

參數默認值

　　相似於形參的解構賦值，在形參書寫時給其一個默認值，不給這個形參傳入實參時，則賦其默認值

　　傳默認值時，不能夠把形參和默認值關聯，不然報錯

　　例以下圖中，不能夠書寫函數時用a=a這樣賦予默認值

　　

　　也能夠結合解構賦值和默認值的設置

　　下圖中，name的1來自於解構賦值，而age的38來自默認值

　　

剩餘參數

　　有點像擴展運算符，不過剩餘參數是用來獲取全部沒有被形參捕獲的參數，並返回一個參數爲項的數組

　　

　　注意剩餘參數必須放在最後，不然報錯（由於系統沒法知曉哪個參數是要收集的）

reduce方法

　　reduce方法其實是數組的，放這裏主要是爲了說明其和剩餘參數結合的使用

　　該方法能夠接收兩個參數，第一個爲對參數的操做（例如圖中每次接收一個參數賦值給b），第二個爲a的默認值（下圖中a第一次取0）

　　

箭頭函數

基本使用方法

　　箭頭函數是ES6的一大特點，書寫時，先寫函數名，再寫函數的形參，後面用=>跟上函數的執行返回值

　　下面示例中的兩個函數的功能是同樣的

　　

　　固然，函數也能夠沒有參數，此時參數的位置須要用()空開

　　

　　若是執行代碼有多句，須要用{}把函數體包裹起來

　　

返回值問題

　　函數體內部有返回值時，須要用{}把函數體包裹起來以防止返回

　　例以下方pop方法會返回彈出的那個數據，可是在外部包裹{}後則不會返回

　　

　　若是要在一行內寫完箭頭函數，同時不返回函數體默認的返回值，則在函數體前加void，這樣函數執行完成後就沒有返回值/返回undefined

　　

和普通函數的區別

　　箭頭函數和普通函數除了形態上的區別，最顯著的兩個區別以下

沒有arguments對象

　　箭頭函數沒有arguments對象，不可用arguments來回收傳入其中的參數，可是能夠用擴展運算符來收集參數

　　

沒有this

　　箭頭函數是沒有this的，也就是不能在箭頭函數內部用this指向自身，箭頭函數的this最終指向其所在的環境

　　下方例子中，say1函數的this指向其對象xm，而say2函數爲箭頭函數，指向其所在的對象xm所處的環境的this，也就是全局的window

　　

　　this指向這個問題上，任何對象內部調用this，都是指向其所在的對象，若是是對象內部屬性的屬性/方法，則指向其綁定的對象

　　也能夠利用該特性，建立一個變量賦值this，在子級方法/對象中調用上一級對象，從而修改上一級對象的屬性（具體關於this指向的問題見JS——this指向一文（待寫））

　　

　　可是這個方法也有些繁瑣，能夠考慮用箭頭函數沒有this的特性，讓其指向所在環境的this

　　

 

對象擴展

　　ES6中，對對象也新增了一些方法，同時也容許一些新的表示方法，讓代碼更爲簡潔易讀

簡潔表示法

　　聲明函數返回一個對象時，能夠用簡潔表示法

　　其中不須要設置匹配的屬性值（會自動匹配函數中的同名變量的值，相似於解構賦值），同時函數聲明也能夠去掉function

　　

屬性名錶達式

　　屬性名通常是在對象聲明時再建立的，但其實也能夠在對象外聲明好，在對象中直接調用

　　ES6容許在對象中用[]包裹一個變量充當屬性名

　　屬性名錶達式也能夠用字符串拼接、模板字符串等形式傳入一個字符串

　　

Object對象的新的方法

 Object.is

　　能夠傳入兩個參數，用來判斷兩個參數是否相等，實際上跟===基本一致，惟一的區別在於對+0、-0以及NaN的判斷上

　　is方法認爲+0和-0是兩個不一樣的東西，而NaN和NaN是同樣的（可是NaN有着和包括本身的任何數都不相等的特性）

　　

Object.assign

　　用來把多個對象解構合併到一個新對象中，其中傳入的參數爲須要合併的對象，而返回值爲合併成的對象

　　這裏合併時，也用的是淺拷貝，並且若是有多個同名的屬性名，取最後一個同名屬性名的屬性值（實際上相似於擴展運算符的功能）

　　

Object.keys&Object.values&Object.entries

　　三個方法都是傳入一個對象，對對象的鍵值來進行操做

　　keys方法返回對象的鍵組成的一個數組

　　values方法返回對象的值組成的一個數組

　　entries方法返回對象的鍵值對爲項的一個個小數組組成的一個數組

　　

原型相關

__proto__

　　用來返回當前對象的原型

setPrototypeOf&getPrototypeOf

　　Object對象的方法，用來設置/獲取對象的原型，傳入的第一個參數爲待修改原型的對象，第二個參數爲該對象的新的原型

　　相比於__proto__方法，推薦使用getPropertyOf

　　

super

　　super其實是一個關鍵字，能夠訪問到對象的原型，能夠用來結合模板字符串來使用

　　但注意只有在簡潔表示法時纔可以使用，箭頭函數中也不可以使用

　　

生成器函數

　　（有點複雜，待了解後添加）

 

數組擴展

　　ES6裏數組的擴展主要在解構賦值裏的擴展運算符，固然此外還有一些新增的方法

擴展運算符的應用

　　這裏主要針對擴展運算符的應用來做說明，具體擴展運算符的語法等基礎看法構賦值一文

給函數傳遞參數

　　結合模板字符串和擴展運算符，讓傳遞參數的代碼更爲簡潔

　　

　　相比之下，ES6以前用的是apply方法給函數傳遞一個數組做爲參數，可是比起擴展運算符則不夠簡潔

　　apply方法第一個參數爲修改傳遞對象的this指向，爲undefined或null時不改變

　　

數據結構——集合set

　　ES6中新添加了一種數據結構——集合set（一種對象）

　　集合最大的特性在於其中的元素不可重複，所以能夠用來去重，去重結束後返回數組

　　

新增方法

Array.from

　　用來把一個類數組對象轉換成一個數組，但該類數組對象屬性名必須是數值型/字符串型的數字

　　注意該類數組對象中添加的length屬性會限制轉換後的數組長度，並且注意必須要添加length屬性

　　

　　from方法也能夠傳入第二個參數，能夠操做返回的屬性值

　　

　　ES6以前，也有一些方法能夠把類數組對象轉換成數組，例如數組原型對象的slice方法

Array.of

　　用來把傳入的參數合併轉換成數組並返回

　　

Array.fill

　　用來填充數組，能夠指定填充的內容以及填充的範圍（左閉右開）

　　若是填充的數組是一個已經有元素的，則填充後會把以前的內容覆蓋掉

　　

Array.includes

　　用來判斷一個數組中是否有某一項，返回布爾值

　　

Array.keys&Array.values&Array.entries

　　相似於對象中的同名方法，只不過返回值不一樣，並且數組返回的內容通常是用來遍歷的

　　keys返回數組的下標

　　values返回數組每一項的值

　　entries返回數組的下標以及每一項的值

　　

Array.find&Array.findIndex

　　二者都是用來遍歷數組執行一個回調函數的，並在符合回調函數的要求時返回（即回調執行結果爲true時返回），但find返回值，而findIndex返回值所在項的下標

　　findIndex和ES5裏的indexOf很像，不過區別在於indexOf是沒法找出數組中是否有NaN的（由於find用的是回調函數，而indexOf用的是字符串來判斷）

　　

 

forEach方法

　　forEach方法至關於一個增強版的for循環，可用來遍歷數組中的每一項，並實現某種操做

　　第一個參數爲一個函數，其中可填三個參數（數組的元素、元素下標、self（指向被forEach的那個數組））

　　第二個參數爲第一個參數函數的this，若是缺失，默認爲window