es6之各種資料類型的擴充實例詳解

一. 字串的擴充

1. 為字串新增了Iterator，可以被for...of遍歷

2. includes、 startsWith、endsWith都會傳回布林值，並且支援第二個參數（開始搜尋的位置），endsWith針對前n個字符，其他兩個都是從第n個到結束

3. repeat回傳一個新字串，參數為重複的次數（小數會向下取整，負數或Infnity會報錯，0到-1等同於0，字串會轉為數字）

4. padStart、padEnd在頭部或尾部補全，第一個參數是字串最小長度，第二個參數是用來補齊的字串

5. 模板字串`${...}`

二. 數值的延伸

1. Number.isFinite檢查一個值是否是有限的，對非數值一律回傳false

2. Number.isNaN檢查一個值是否是NaN，只有NaN才會回傳true;
   傳統方法isFinite isNaN都會先呼叫Number()將非數值轉為數值

3. Number.parseInt()，Number.parseFloat()與傳統方法一樣，目的是減少全域方法是語言模組化

4. #Number.isInteger()判斷是否為整數

5. Number.EPSILON是一個極小的常數，浮點數計算的誤差小於這個值就ok

6. #JS的準確整數範圍：-2^53~2^53（不含兩端），
   Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
   Number.MIN_SAFE_INTEGER = -Number.MAX_SAFE_INTEGER;
   Number.isSafeInteger()是用來判斷一個整數是否落在這個範圍之內;

7. Math.trunc() 移除小數部分回傳整數部分；
   Math.sign() 判斷是整數負數還是0；
   Math.cbrt() 計算一個數的立方根；還有一些對數方法、三角函數方法；
   指數運算子2 * * 3 === 8，與Math.pow實作不同，對於特別大的運算，運算結果最後一位有不同；

三. 陣列的擴充

1. Array.from可以將類別數組物件和可遍歷的物件轉為數組，擴展運算子也可以將某些物件轉數組；
   可以接受第二個參數，類似於map方法，將處理的值傳回數組；

2. Array.of將一組值轉為數組；

3. copyWithin將指定位置的成員複製到其他位置；
   Array.prototype.copyWithin(target, start = 0, end = this.length)

4. find找到第一個符合條件的成員，參數是一個回呼函數；
   findIndex傳回第一個符合條件的陣列成員的位置

5. #fill使用給定值填入數組，二三參數可以指定開始結束位置；

6. keys、values、entries

7. includes，indexOf一是不夠語意化，二是內部使用＝＝＝判斷，
   [NaN] .indexOf(NaN) // -1  ,   [NaN].includes(NaN) // true 
   Map的has是用來找出鍵名的，Set的has是用來找出值的

8. #陣列的空位是沒有任何值，0 in [,,] // false，es6中會將空位轉為undefined，應當避免出現空位

四.函數的擴展

1. 允許為函數設定預設值，如果非尾部的參數設定預設值，實際上這個參數是沒法省略的；
   定了預設值以後，函數的length屬性，將傳回沒有指定預設值的參數個數；
   如果設定了預設值的參數不是尾參數，那麼length屬性也不再計入後面的參數了；

2. 一旦設定了參數的預設值，當函數進行宣告初始化時，參數就會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失。這種語法行為，在不設定參數預設值時，是不會出現的。

3. Rest參數（...變數名稱）

4. #擴充運算子（...），將一個陣列轉為用逗號分隔的參數序列。
   

   /* 替代数组的apply方法 */// ES5的写法function f(x, y, z) {  // ...}var args = [0, 1, 2];
   f.apply(null, args);// ES6的写法function f(x, y, z) {  // ...}var args = [0, 1, 2];
   f(...args);/* --------------------------------- */// ES5的写法Math.max.apply(null, [14, 3, 77])// ES6的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77);/* --------------------------------- */// ES5的写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];
   Array.prototype.push.apply(arr1, arr2);// ES6的写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];
   arr1.push(...arr2);

5. 箭頭函數使用注意：

   （1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

   （2）不可以當作建構函數，也就是說，不可以使用new指令，否則會拋出一個錯誤。

   （3）不可以使用arguments對象，該對像在函數體內不存在。如果要用，可以用 rest 參數代替。

   （4）不可以使用yield指令，因此箭頭函數不能用作 Generator 函數。

 

五.物件的擴充

1. #屬性簡寫表示法

4. #屬性名稱表達式，［變數名稱］方法的
   name

   屬性傳回函數名稱（即方法名稱）
   #### ##Object.is，與===基本上一致，不同在於一是###+0###不等於###-0###，二是###NaN###等於自身### ######

   // es5实现Object.isObject.defineProperty(Object, 'is', {
     value: function(x, y) {if (x === y) {      // 针对+0 不等于 -0的情况  return x !== 0 || 1 / x === 1 / y;
       }// 针对NaN的情况return x !== x && y !== y;
     },
     configurable: true,
     enumerable: false,
     writable: true});

   ###

5. Object.assign(target, o1, o2)用於物件的合併，若果有同名屬性，後面會覆蓋前面的；實行的淺拷貝
   由於undefined和null無法轉成對象，所以如果它們作為參數，就會報錯；

6. Object.getOwnPropertyDescriptor方法可以取得該屬性的描述對象。

7. 屬性的遍歷：
   for...in、Object.keys、Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbols(obj)、Reflect.ownKeys(obj)

8. __proto__與Object.setPrototypeOf()作用相同，用來設定一個物件的prototype對象，Object.getPrototypeOf() 

9. #Object. keys()，Object.values()，Object.entries() 

10. #Object.getOwnPropertyDescriptors傳回指定物件所有自身屬性（非繼承屬性）的描述物件；

以上是es6之各種資料類型的擴充實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！