是該複習一下ES6了 -- 拓展用法篇

前言

以前對於ES6的相關聲明類關鍵字進行了必定的說明，本片咱們未來學習一下ES6爲JS新增的全局對象的方法內容，覈對原有數據類型的新增特性吧。

正文

1.String

字符串是咱們經常會使用的數據類型，做爲五大基礎數據類型之一，在ES5的時代，咱們並不能經過String很好的處理咱們的unicode字符編碼的問題，因此如今ES6增強了對unicode的支持，咱們來具體的看一下吧：

字符串對於unicode的支持：

• 如今咱們能夠直接在代碼之中經過 \u開頭的4位六進制數據來表示一個16位的unicode字符 內容。
• 咱們知道unicode就算用16位表示一個字符可是仍是有的時候表示不徹底，中文經常一個16進制數徹底不夠用啊，全部超出最高上限\uFFFF是常有的事情，這是後咱們要怎麼辦呢，首先咱們能夠經過使用大括號將數據內容部分括起來，在最前方添加\u來表示當前位unicode碼。例如 \u20BB7。
• 或者，咱們使用兩個unicode字符進行表示，例如 \uD842\uDFB7。上面兩個例子表示的都是同一個中文字。‘
• 這裏我不得不提一下RegExp對象了，由於支持了String之中的unicode碼的編寫，因此正則之中也提供了相關的匹配修飾符，以防當前正則表達式匹配unicode出錯，這個修飾符就是u，寫在正則的最末端。添加以後相關的比對方法也將會有修改。具體的咱們將會後面進行介紹。
• 由於須要支持unicode因此當咱們將字符與unicode碼比對的時候的狀況須要考慮進來，字符與對應的unicode碼作比較的話，會獲得正確的結果，哪怕使用全等符號比較。例如：'中' === '\u4e2d' // true
• JSON.stringify也對與字符串的操做有必定的適配，UTF-8的標準0xD800到0xDFFF之間的碼點是不能夠單獨使用的，ES2019之中將JSON.Stringify()進行了修改，會將這一段的unicode碼自動的轉義，交由應用本身處理。

字符串模板:

• ES6爲咱們新增字符串模板的概念，咱們經過 ` ... ` 的形式來進行編寫的，其中能夠經過${}來添加相關的表達式和變量內容。方便了咱們的程序之中的字符串拼接工做。
• 標籤模板，模板字符串能夠直接寫在一個函數名稱以後，不須要加下括號，這樣就至關於模板字符串作拆分而後將參數依次序的填裝入函數內容。田莊參數的形式是，字符串未被表達式打斷的部分，做爲字符串數組，傳遞給第一個參數，以後的每個表達式計算的值，依次單獨傳遞給後面的參數內容。
• 最後咱們說一下模板字符串的限制，再字符串模板之中咱們是能夠包含其餘語言的相關邏輯的，可是有些狀況下會將相關字符轉義，致使相關的邏輯失效的狀況，因此咱們再編寫邏輯代碼的時候須要注意一下，轉義字符的使用。

字符串的新增方法：

• String.fromCodePoint(Number-16) 傳遞unicode編碼，識別相關的字符內容。其有點相似於fromCharCode這一個方法的做用，可是相對的其能夠識別超出了0xFFFF的編碼內容。忘記說了，傳遞的值是16位進制數。並且新方法能夠傳遞多個數值，最後獲取的數值是，多個數值之和所對應的值。
• String.raw(String) 這一方法能夠用於標籤模板的使用，傳遞模板字符串，返回一個將斜槓所有轉義的字符串內容，或者用於普通方法，傳遞一個含有raw屬性的對象做爲第一個參數，其餘任意的單個數據內容做爲以後的參數。其將會自動的將第二個參數開始的數據轉化爲字符串，按照間隔一個字符穿插一個參數的方式，將後面傳遞的參數插入到第一個參數對象的raw屬性的字符串之中。
• 實例方法：codePointAt(Number-16)對於老版本charCodeAt方法的衍生，能夠處理大於0xFFFF的unicode編碼的字符。
• 實例方法：normalize(type)在許多歐洲語言之中，咱們能夠看到音調的存在，這些字符能夠經過一個字符直接表示，也能夠經過兩個字符相結合的表示方式，可是雖然表示的內容是相同的，可是字符串展現的內容是不相同的，而且判斷時將會不成功。這個時候咱們能夠經過這一方法來轉義當前字符串進行判斷。這就是這個方法的意義。固然這一方法也能夠設置相關的類型內容，詳細的能夠參考官方文檔。
• 實例方法：repeat(Number) 將字符串重複傳入整型數據大小遍，生成新的字符，傳入的數據若是時浮點型，也只會取整數部分，傳遞複數，返回空字符串。傳遞非數據類型參數，返回空字符串。
• 實例方法：padStart(Number, String) 傳遞字符串長度和用於補全的字符串，直接上代碼：

'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax' 
複製代碼

• 實例方法：padEnd(Number, String)和上面的方法相似，只是補全的位置再原有字符串的後面：

'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'
複製代碼

---

2. RegExp 正則表達式

正則表達式的擴展主要是正對unicode的支持和一點點修飾符還有方法的擴展。上面字符串內容咱們已經有提到過的u修飾符內容就是了，我麼來具體的看一下吧。

正則對於unicode的支持：

• u修飾符：主要用來處理大於0xFFFF的unicode字符的內容。當加了這一修飾符以後，全部的大於0xFFFF編碼的字符都將會再正則以內視做一個字符來進行匹配（本來時一個16位字節碼錶示一個字符的）。點字符的任意字符匹配再雙字節編碼的單個字符匹配時也能夠做用了。再者正則之中的帶大括號的字符寫法也將能夠作匹配了。預約義符號對於雙字節字符也將會長生匹配效果。
• RegExp.prototype.unicode：這一新增的屬性，能夠幫助咱們肯定當前的正則表達式是否添加了u修飾符。

正則表達式其餘修飾符的擴展：

• y修飾符：粘連修飾符，匹配的時候，當匹配到第一個子字符串的以後，若是還須要匹配成功，須要下一個字符開始就能匹配成功，不然失敗。固然咱們也有RegExp.prototype.sticky 屬性幫咱們判別當前的額修飾符內容，上例子：

var s = 'aaa_aa_a';
    var r1 = /a+/g;
    var r2 = /a+/y;
    
    r1.exec(s) // ["aaa"]
    r2.exec(s) // ["aaa"]
    
    r1.exec(s) // ["aa"]
    r2.exec(s) // null
複製代碼

• s修飾符：添加了這一修飾符以後，點匹配符能夠匹配任意的字符了，因此咱們又稱S修飾符時正則表達式的dotAll模式。

正則表達式的其餘部份內容：

• 後行斷言：新增後行匹配的功能，以前只能先行斷言纔會有效果。
• ES2018之中引入了/p{}和/P{}的匹配字符，容許正則表達式匹配符合unicode某種行爲的字符。
• 具名組匹配：咱們以前經過小括號來將結果提取出來，可是咱們每每只能再exec方法以後經過結果數組來進行內容的獲取，並且數據沒有相關的名稱，獲取的時候還須要取比對相關的位置信息因此十分的麻煩，可是如今咱們能夠再小括號之中添加?的形式爲當前小括號之中的數據取一個名稱，而後咱們能夠經過結果對象.group.name的形式來獲取相關的比對數據內容了。
• 正則表達式內部須要引用某一個具名組匹配的話，咱們能夠經過\k方式來進行引用。
• 咱們如今想要獲取字符串之中全部的匹配值，能夠直接經過String.prototype.matchAll方法來獲取。可是它返回的時一個遍歷器，全部須要咱們本身遍歷一遍。

---

3.Number

數值作的擴展主要時再一些認證 的方法之上還有數據表示上面的支持。其餘的部分變化不大。

進制數據表示：

• 八進制數據能夠經過前面加上0o或者0O來進行表示，且判斷能夠成功。
• 二進制數據能夠經過數據前面加上0b或者0B來進行轉換。

數據類型的拓展方法和屬性：

• Number.isFinite():判斷當前數據是否有窮。非數據類型一概返回false
• Number.isNaN():判斷餐是是不是NaN。
• Number.parseInt() | Number.parseFloat():相關方法從全局改變到了Number對象上面。其餘部分和原有方法相同。
• Number.isInteger(): 判斷數值是否爲整形。
• Number.EPSILON：新增一個極小數，了用於比較數據的時候來規避偏差。
• Number.isSafeInteger()：表示的是JS能表示的精確整數的範圍。2的53次方到-2的53次方。不包含兩個端點。
• Number.MAX_SAFE_INTEGER：表示可計算最大的整形數據
• Number.MIN_SAFE_INTEGER：表示可計算最小的整形數據

---

4.Function

正對與Function的擴展內容，主要是有許多的語法糖能夠幫助咱們更爲語義化的，便捷的編寫當前的內容。

參數可寫的優化：

• 添加了默認值的設置，能夠在函數的參數以後添加賦值號，而且將值賦值給參數，這樣這個值將會是默認值，當沒有傳遞參數的狀況下，默認值將會做爲函數參數的值。代碼:

function(a = 5, b){...}
複製代碼

• 結構賦值能夠用在函數的參數聲明之中，這樣咱們能夠更爲方便的 傳遞數據內容。例如

function(x, {y = 0}){...}
複製代碼

• function的length屬性會在參數有默認值的時候失真，有默認值的參數將會不算在length屬性之中。
• 使用默認值得時候須要注意的是，在函數初始化的時候，有默認值的話，函數的參數會有一個單獨的做用於內容，外部的參數將不會影響相關的數據內容。
• rest參數形式是函數的參數的另一種語法糖形式。經過...value來將傳遞的參數經過數組的方式防止在value之中。這樣咱們就能夠不限定當前的函數的形參數量，同時也方便咱們的獲取。固然這樣的寫法只能放置在參數的最後，不然將會報錯。例如：

function(x, y, ...rest){...}
複製代碼

函數的其餘拓展：

• 嚴格模式：ES6之中嚴格模式能夠編寫在函數之中，嚴格模式下，函數的參數是不能夠設置默認值的，同時不能使用解構賦值，或者任何擴展運算符了，不然會報錯。這樣規定是有緣由的，由於JS是順序執行解析，咱們發如今函數體之中寫'use strict'字符串將會和參數以及函數體都要嚴格模式的形式相沖突。由於只有在確認參數了以後才能在函數體之中發現使用嚴格模式。爲了防止前述三種語法糖致使嚴格模式下規定不能被遵照，因此直接不予使用。
• name屬性：函數擁有name屬性，返回該函數的函數名稱。若是將匿名函數賦值給一個變量，那麼在ES6之中函數名稱將會是變量名。若是是Function構造出來的函數對象的話name屬性將會是anonymous。
• 箭頭函數：相信含多人已經用過了，只須要注意: 其中的this指針的指向就行了,它是定義時所在的對象，而不是使用時所在的對象。它不能做爲構造函數，沒有arguments屬性，不可使用yield指令（這個將會在以後進行講解）。
• 尾部調用優化：意思是若是在函數的尾部調用了函數，那麼嚴格模式下，js自動轉化當前函數調用棧，將要調用函數的調用幀直接替換當前調用函數的調用幀，而不是在當前函數以後再次啓用一個新的調用幀，壓入到調用棧。好處就在於節省內存空間。只有嚴格模式之下才能調用是由於，由於嚴格模式下arguments和caller兩個變量的禁用，這兩個變量會追蹤函數的調用棧，若是這兩個變量可使用的話，將會和調用幀替換有衝突。

---

4.數組的擴展

數組主要是對於方法的擴展和一個擴展運算符（...）的語法糖新增。讓咱們來看看到底有什麼：

• 擴展運算符( ... )：其實就是三個點，咱們在function的rest參數之中有看到過它，那個時候表示參數省略，而在其以後加數組變量的話，實際上就等因而將當前的數組進行了一個拆分操做。將數組元素打散。固然其本質是調用了Iterator來進行內容的遍歷，並返回了數據
• Array.from():傳遞對象內容，把類數組對象和可遍歷對象轉化成爲真正的數組內容。
• Array.of():將傳遞的參數組成一個數組。主要是彌補Array構造函數的缺陷。
• 實例方法：entries(), key(), values()這三個方法主要是用來數組的便利，key獲取的是下標內容，values主要獲取的是數值內容，entries返回的是由下標和數值組成的數組做爲項的數組。
• 咱們這裏主要講一下主要的幾個方法，還有部分方法想要了解的夥伴能夠取官網看一看。

---

6.Object

對象的擴展直接影響着咱們程序編寫時候的便捷和語義表達。ES6之中爲咱們簡化了許多對象的編寫的方式。

• 咱們在聲明關鍵字篇之中有提到了，ES6之中對象的變量能夠經過[表達式]的形式來展現，變量名就是表達式的結果。
• 對象的每一個屬性都有一個描述對象（descriptor）用來控制屬性的行爲，Object.getOwnPropertyDescriptor能夠獲取屬性的描述符，屬性表述符，通常對象屬性有四個特性，值（value）,writable(是否可寫)，enumerable(可枚舉)，configurable（屬性是否可配置）。若是是getter/setter方法的屬性則有get，set和enumerable，configurable這四個屬性。具體的操做和內容請見MDN，很詳細咯。
• 擴展運算符：對象也是可使用三點運算符，能夠獲取全部的可遍歷屬性。

下面來看一些Object的拓展方法把：

• Object.is() 用於判斷兩個值是否徹底相等和 === 的行爲基本一致，不一樣的在於+0於-0的不相等，還有NaN和自己相等，這兩點和全等不同。
• Object.assign() 合併對象，將原對象全部可枚舉屬性開被盜目標對象之中。若是目標對象參數傳遞的不是對象，將會先轉化城對象而後再合併。若是首位參數傳遞了undefined和null將會出錯，若是傳遞不在首位參數就不會報錯。
• Object.getPrototypeOf() | Object.setPrototypeOf() 這兩個方法主要是用於設置和獲取對象的原型的對象的。
• Object.keys() | Object.values() | Object.entries() 這三個方法返回的是數組，分別返回對象的 可枚舉屬性的名稱，可枚舉屬性的值，或者可枚舉屬性名稱和值組成的數組做爲項的數組。

結束

ES6中主要添加的相關的擴展，語法糖，以及部分新的操做符號，咱們就講到這裏了。部分概念只是說起，沒有徹底講明白，能夠看一看官網文檔，一首說明莫過於此。若是有錯誤的地方請幫忙指出，但願共同成長，共同進步。拜拜。