ES6全擴展 - 台部落

字符串的擴展

1⃣️、字符的unicode表示法

首先要先對字符的unicode表示法有一個整體認識。
其次，在ES6之前，unicode字符表示法只限於碼點在\u0000 ~\uFFFF之間的字符，超過此範圍的字符需用兩個雙字節表示，ES6對此做出的改進爲：
將碼點放入大括號中去，就能正確解讀該字符。

2⃣️、字符串的遍歷器接口

ES6 爲字符串添加了遍歷器接口，使得字符串可以被for...of循環遍歷。
除了遍歷字符串，這個遍歷器最大的優點是可以識別大於0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。

3⃣️、模板字符串

ES6 引入了模板字符串解決輸出模板比較繁瑣的問題。
模板字符串（template string）是增強版的字符串，用反引號（`）標識。

字符串的新增方法

1⃣️、String.fromCodePoint()

如果知道了一個碼點，想知道它表示的是什麼字符。ES6之前我們可以使用：
String.fromCharCode(0x0030)來轉化成爲字符。
上述的這個方法有個缺陷，就是它有限制，只能識別0x0000~0xFFFF 之間的碼點，超出後會溢出。
於是，我們這裏要學習的就是這個:String.fromCodePoint()

2⃣️、String.raw()

String.raw()本質上是一個正常的函數，只是專用於模板字符串的標籤函數。

3⃣️、實例方法：codePointAt()

不想看這裏。

4⃣️、實例方法：normalize()

ES6 提供字符串實例的normalize()方法，用來將字符的不同表示方法統一爲同樣的形式，這稱爲 Unicode 正規化.

5⃣️、實例方法：includes()、startWith()、endsWith()

這三個方法都支持第二個參數，表示開始搜索的位置。

6⃣️、實例方法：padStart()、padEnd()

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。
padStart()和padEnd()一共接受兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串。

7⃣️、實例方法：trimStart()、trimEnd()

ES2019 對字符串實例新增了trimStart()和trimEnd()這兩個方法。它們的行爲與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

數值的擴展

1⃣️、二進制、八進制表示法(分別用二、八進制表示10)

ES6規定：二進制與十進制分別以0b[B] 、0o[O].
因此用二進制表示數字10爲：0B1010,用八進制表示數字10爲0O12；

2⃣️、Number.isFinite()、Number.isNaN()

這個Number的這倆方法在日常開發中幾乎沒用到過。
判斷一個數是不是有效，判斷一個數是不是數值。這裏簡單做下記錄，明確知道有這倆新方法。

3⃣️、Number.parseInt()、Number.parseFloat()

這倆東西的出現頻率極高，ES6將這倆方法移植到了Number對象上，這麼做的目的是逐步減少全局性方法，使得語言逐步模塊化。
因此下次使用這倆方法的時候用上Number，那就說明對這個小知識點有了掌握。

4⃣️、Number.isInteger()

Number.isInteger()用來判斷一個數值是否爲整數。

5⃣️、Number.EPSILON

ES6 在Number對象上面，新增一個極小的常量Number.EPSILON。根據規格，它表示 1 與大於 1 的最小浮點數之間的差。
Number.EPSILON實際上是 JavaScript 能夠表示的最小精度。誤差如果小於這個值，就可以認爲已經沒有意義了，即不存在誤差了。

6⃣️、安全整數和Number.isSafeInterger()

JavaScript能夠準確表示的整數範圍是在-2^53到253之間(不含兩個端點)。超過這個範圍，無法精確表示這個值。
ES6引入兩個常量來表示這個範圍的上下限：Number.MAX_SAFE_INTERGER和Number.MIN_SAFE_INTERGER.
Number.isSafeInteger()則是用來判斷一個整數是否落在這個範圍之內。

7⃣️、Math.trunc()

Math.trunc()用於去除一個整數的小數部分，返回整數部分。

8⃣️、Math.sign()

Math.sign()用來判斷一個數是正數(+1)、負數(-1)、+0或-0.

函數的擴展

1⃣️、函數參數的默認值

我們在寫一個工具函數的時候，要積極使用這種函數默認值的寫法，不僅讓我們對此函數傳值有一個整體瞭解，還可以減少因爲參數傳遞錯誤出現的bug。

2⃣️、rest參數

ES6 引入 rest 參數（形式爲...變量名），用於獲取函數的多餘參數，這樣就不需要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。
注意，rest 參數之後不能再有其他參數（即只能是最後一個參數），否則會報錯。

數組的擴展

1⃣️、擴展運算符

對於一個數組來說，如果使用擴展運算符，相當於是rest參數的逆運算，將一個數組轉爲用逗號分割的參數序列。

2⃣️、Array.from()

Array.from方法用於將兩類對象轉爲真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

3⃣️、Array.of()

Array.of()用於將一組值轉化爲數組。

4⃣️、數組實例的find()和findIndex()

數組實例的find方法，用於找出第一個符合條件的數組成員。
數組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。

5⃣️、數組示例的fill()

fill方法使用給定值，填充一個數組。

  let arr = [1,3,3,4,5];
  arr.fill(2,1,2); //[1,2,3,4,5]

6⃣️、數組實例的entries()、keys()和values()

ES6 提供三個新的方法——entries()，keys()和values()——用於遍歷數組。它們都返回一個遍歷器對象（詳見《Iterator》一章），可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

7⃣️、數組實例的flat()、flatMap()

數組的成員有時還是數組，Array.prototype.flat()用於將嵌套的數組“拉平”，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。
如果不管有多少層嵌套，都要轉成一維數組，可以用Infinity關鍵字作爲參數。

8⃣️、數組的空位

注意，空位不是undefined，一個位置的值等於undefined，依然是有值的，空位是指沒有任何值。
ES6明確將空位轉爲undefined。
由於空位的處理規則非常不統一，所以建議避免出現空位。

對象的擴展

1⃣️、屬性的簡潔表示法

對於鍵值對來說：屬性名就是變量名, 屬性值就是變量值。let obj ={name,age}
對於對象中的方法來說，也可以直接簡寫 methods (){}

2⃣️、屬性的可枚舉性和遍歷

對象的每一個屬性都有一個描述對象(Descriptor)，用來控制該屬性的行爲。
Object.getOwnPropertyDescriptor(obj,key)方法可以獲取該屬性的描述對象。
他們分別是：

enumerable:可枚舉性，目前有四個操作會忽略enumerable爲false的屬性
for...in:只遍歷自身的和繼承的可枚舉的屬性。
Object.keys():返回對象自身所有可枚舉的屬性鍵名。
JSON.stringfy():只串行化對象自身的可枚舉屬性。
Object.assign():忽略enumerable爲false的屬性，只拷貝對象自身的可枚舉屬性。

3⃣️、super關鍵字

我們知道，this關鍵字總是指向當前函數所在的對象，ES6又新增了一個類似的關鍵字super，指向當前對象的原型對象。
注意，super指向原型對象時，只能用在對象的方法之中，用在其他地方都會報錯。(目前，只有對象方法的簡寫法可以讓 JavaScript 引擎確認，定義的是對象的方法。)

4⃣️、對象的擴展運算符

解構賦值：

解構賦值等號的右邊要求是一個對象。

解構賦值必須是最後一個參數，否則會報錯。

解構賦值的拷貝是淺拷貝。

擴展運算符的解構賦值，不能複製繼承自原型對象的屬性。

5⃣️、鏈判斷運算符

我們寫代碼時，會遇到判斷一個對象的某個屬性是否存在，比如我們需要判斷lmz的user信息的age屬性是否存在，我們安全的寫法是這樣的：
if(lmz && lmz.user && lmz.user.age){return "age屬性存在！ "}

ES2020引入了鏈判斷運算符，簡化上面寫法：
if(lmz ?. user ?.age){return "age屬性存在！"}

6⃣️、Null判斷運算符

當判斷某個屬性的值是undefined或者null的時候，我們一般使用||來給定默認值。但是這個符號有個缺陷，如果判斷的這個屬性是0或者false或者空字符串的時候，他同樣會返回||後面的值(默認值生效)。
這個時候我們使用||這個符號就不太妙來，ES2020引入了一個新的Null判斷運算符:??,它的行爲類似||，但是隻有運算符左側的值爲null或undefined時，纔會返回右側的值。
此運算符的一個目的就是與鏈式運算符一起使用，判斷一個屬性爲null或undefined時，給定默認值。