ES6新特徵總結與介紹——內置對象

1、新增

（一）Symbol

ES6 引入了一種新的原始數據類型 Symbol ，表示獨一無二的值，最大的用法是用來定義對象的惟一屬性名。

a = Symbol('sss')
b = Symbol('sss')
a === b     //false
複製代碼

1. 做爲屬性名

• 因爲每個 Symbol 的值都是不相等的，因此 Symbol 做爲對象的屬性名，能夠保證屬性不重名。
• Symbol 做爲對象屬性名時不能用.運算符，要用[]。由於.運算符後面是字符串。
• Symbol 值做爲屬性名時，該屬性是公有屬性不是私有屬性，能夠在類的外部訪問。可是不會出如今 for...in 、 for...of 的循環中，也不會被 Object.keys() 、 Object.getOwnPropertyNames() 返回。若是要讀取到一個對象的 Symbol 屬性，能夠經過 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

2. 定義常量

3. Symbol.for()

返回由給定的 key 找到的 symbol，不然就是返回新建立的 symbol。

4. Symbol.keyFor()

Symbol.keyFor() 返回一個已登記的 Symbol 類型值的 key。

let sym = Symbol.for("foo")
Symbol.keyFor(sym)  // "foo"
複製代碼

（二）Map 與 Set

ES6 引入了四種新的原始數據結構。

1. Set

ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

1. Set 結構的實例有如下屬性:

• Set.prototype.size：返回Set實例的成員總數。

2. 四個操做方法:

• add(value)：添加某個值，返回 Set 結構自己。
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• has(value)：返回一個布爾值，表示該值是否爲Set的成員。
• clear()：清除全部成員，沒有返回值。

3. 遍歷操做:

• keys()：返回鍵名的遍歷器
• values()：返回鍵值的遍歷器
• entries()：返回鍵值對的遍歷器
• forEach()：使用回調函數遍歷每一個成員

2. WeakSet

首先，WeakSet 的成員只能是對象，而不能是其餘類型的值。

其次，WeakSet 中的對象都是弱引用，即垃圾回收機制不考慮WeakSet對該對象的引用，也就是說，若是其餘對象都再也不引用該對象，那麼垃圾回收機制會自動回收該對象所佔用的內存。(WeakMap同)

1. 沒有Size屬性
2. 操做方法：

• WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
• WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
• WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在。

3. 不可遍歷

3. Map

它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。

1. Map 結構的實例有如下屬性:

• size 屬性：返回 Map 結構的成員總數。

2. Map 結構的實例有如下操做方法：

• set(key, value)：set方法設置鍵名key對應的鍵值爲value，而後返回整個 Map 結構。
• get(key)：get方法讀取key對應的鍵值，若是找不到key，返回undefined。
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• has(value)：has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。
• clear()：清除全部成員，沒有返回值。

3. 遍歷操做：

• keys()：返回鍵名的遍歷器。
• values()：返回鍵值的遍歷器。
• entries()：返回全部成員的遍歷器。
• forEach()：遍歷 Map 的全部成員。

4. WeakMap

首先，WeakMap只接受對象做爲鍵名（null除外），不接受其餘類型的值做爲鍵名。

其次，WeakMap的鍵名所指向的對象，不計入垃圾回收機制。

1. 沒有Size屬性
2. WeakMap 結構的實例有如下操做方法：

• get(key)
• set(key, value)
• has(value)
• delete(value)

3. 不可遍歷

5. 應用

Map和Set中對象的引用都是強類型化的，並不會容許垃圾回收。這樣一來，若是Map和Set中引用了再也不須要的大型對象，如已經從DOM樹中刪除的DOM元素，那麼其回收代價是昂貴的。WeakMap和WeakSet儲存 DOM節點，而不用擔憂這些節點從文檔移除時，會引起內存泄漏。

（三）Proxy 與 Reflect

Proxy 與 Reflect 是 ES6 爲了操做對象引入的 API 。

1. Proxy

Proxy 能夠對目標對象的讀取、函數調用等操做進行攔截，而後進行操做處理。它不直接操做對象，而是像代理模式，經過對象的代理對象進行操做，在進行這些操做時，能夠添加一些須要的額外操做。

1. 一個 Proxy 對象由兩個部分組成：target 、 handler 。在經過 Proxy 構造函數生成實例對象時，須要提供這兩個參數。 target 即目標對象， handler 是一個對象，聲明瞭代理 target 的指定行爲。

let handle = {
    get: function(target,key){
        console.log('setting' + key)
        return target[key]  // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting ' + key)
        target[key] = value
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 實際執行 handler.get
proxy.age = 25 // 實際執行 handler.set
// getting name
// setting age
// 25
複製代碼

2. Proxy 支持的攔截操做一覽

• get(target, propKey, receiver)：get方法用於攔截某個屬性的讀取操做，能夠接受三個參數，依次爲目標對象、屬性名和 proxy 實例自己
• set(target, propKey, value, receiver)：set方法用來攔截某個屬性的賦值操做，返回一個布爾值。能夠接受四個參數，依次爲目標對象、屬性名、屬性值和 Proxy 實例自己。
• apply方法攔截函數的調用、call和apply操做。apply方法能夠接受三個參數，分別是目標對象、目標對象的上下文對象（this）和目標對象的參數數組。
• has(target, propKey)：has方法用來攔截HasProperty操做，即判斷對象是否具備某個屬性時，這個方法會生效，返回一個布爾值。典型的操做就是in運算符。has方法能夠接受兩個參數，分別是目標對象、需查詢的屬性名。
• construct(target, args)：construct方法用於攔截new命令。construct方法能夠接受兩個參數，分別是目標對象、構造函數的參數對象。
• deleteProperty(target, propKey)：deleteProperty方法用於攔截delete操做，若是這個方法拋出錯誤或者返回false，當前屬性就沒法被delete命令刪除，返回一個布爾值。
• defineProperty(target, propKey, propDesc)：defineProperty方法攔截了Object.defineProperty操做，返回一個布爾值。
• getOwnPropertyDescriptor(target, propKey)：getOwnPropertyDescriptor方法攔截Object.getOwnPropertyDescriptor()，返回一個屬性描述對象或者undefined。
• getPrototypeOf(target)：getPrototypeOf方法主要用來攔截獲取對象原型，返回一個對象。
• isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。
• ownKeys(target)：ownKeys方法用來攔截對象自身屬性的讀取操做，返回一個數組。
• preventExtensions(target)：preventExtensions方法攔截Object.preventExtensions()。該方法必須返回一個布爾值，不然會被自動轉爲布爾值。
• setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。

3. 目標對象內部的this關鍵字會指向 Proxy 代理。

2. Reflect

1. Reflect對象的設計目的有這樣幾個。

• 將Object對象的一些明顯屬於語言內部的方法（好比Object.defineProperty），放到Reflect對象上。
• 修改某些Object方法的返回結果，讓其變得更合理。好比，Object.defineProperty(obj, name, desc)在沒法定義屬性時，會拋出一個錯誤，而Reflect.defineProperty(obj, name, desc)則會返回false。

try {
  Object.defineProperty(target, property, attributes)
  // success
} catch (e) {
  // failure
}

if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
複製代碼

• 讓Object操做都變成函數行爲。某些Object操做是命令式，好比name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數行爲。

// 老寫法
'assign' in Object // true

// 新寫法
Reflect.has(Object, 'assign') // true
複製代碼

• Reflect對象的方法與Proxy對象的方法一一對應，只要是Proxy對象的方法，就能在Reflect對象上找到對應的方法。這就讓Proxy對象能夠方便地調用對應的Reflect方法，完成默認行爲，做爲修改行爲的基礎。也就是說，無論Proxy怎麼修改默認行爲，你總能夠在Reflect上獲取默認行爲。

Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver)
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value)
    }
    return success
  }
})
複製代碼

2. Reflect 支持的攔截操做一覽

• Reflect.get(target, name, receiver)
• Reflect.set(target, name, value, receiver)
• Reflect.apply(target, thisArg, args)
• Reflect.has(target, name)
• Reflect.construct(target, args)
• Reflect.deleteProperty(target, name)
• Reflect.defineProperty(target, name, desc)
• Reflect.getOwnPropertyDescriptor(target, name)
• Reflect.getPrototypeOf(target)
• Reflect.isExtensible(target)
• Reflect.ownKeys(target)
• Reflect.preventExtensions(target)
• Reflect.setPrototypeOf(target, prototype)

2、擴展

（一）ES6 字符串

1. 子串的識別

三個方法均可以接受兩個參數，須要搜索的字符串，和可選的搜索起始位置索引。

這三個方法只返回布爾值，若是須要知道子串的位置，仍是得用 indexOf 和 lastIndexOf 。

1. includes()：返回布爾值，判斷是否找到參數字符串。
2. startsWith()：返回布爾值，判斷參數字符串是否在原字符串的頭部。
3. endsWith()：返回布爾值，判斷參數字符串是否在原字符串的尾部。

2. 字符串重複

repeat()：返回新的字符串，表示將字符串重複指定次數返回。

'x'.repeat(3) // "xxx"
複製代碼

3. 字符串補全

接受兩個參數，第一個參數是指定生成的字符串的最小長度，第二個參數是用來補全的字符串。若是沒有指定第二個參數，默認用空格填充。

1. padStart：返回新的字符串，表示用參數字符串從頭部補全原字符串。
2. padEnd：返回新的字符串，表示用參數字符串從頭部補全原字符串。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

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

4. 字符串消除

它們的行爲與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

1. trimStart()
2. trimEnd()

5. 模板字符串

1. 可插入變量和表達式。
2. 換行和空格都是會被保留

6. 標籤模板

標籤模板是一個函數的調用，其中調用的參數是模板字符串。

alert`Hello world!`
// alert('Hello world!')
複製代碼

（二）ES6 數值

1. 二進制和八進制表示法

ES6 提供了二進制和八進制數值的新的寫法，分別用前綴0b（或0B）和0o（或0O）表示。

2. Number.isFinite(), Number.isNaN()

它們與傳統的全局方法isFinite()和isNaN()的區別在於，傳統方法先調用Number()將非數值的值轉爲數值，再進行判斷，而這兩個新方法只對數值有效，對於非數值一概返回false。

3. Number.parseInt(), Number.parseFloat()

ES6 將全局方法parseInt()和parseFloat()，移植到Number對象上面，行爲徹底保持不變。

4. Number.isInteger()

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

5. Number.EPSILON

ES6 在Number對象上面，新增一個極小的常量Number.EPSILON。根據規格，它表示 1 與大於 1 的最小浮點數之間的差。

6. 安全整數和 Number.isSafeInteger()

JavaScript 可以準確表示的整數範圍在-2^53到2^53之間（不含兩個端點），超過這個範圍，沒法精確表示這個值。 Number.isSafeInteger()則是用來判斷一個整數是否落在這個範圍以內。

7. Math 對象的擴展

ES6 在 Math 對象上新增了 17 個數學相關的靜態方法，這些方法只能在 Math 中調用。

1. 普通計算

• Math.cbrt：用於計算一個數的立方根。
• Math.imul：兩個數以 32 位帶符號整數形式相乘的結果，返回的也是一個 32 位的帶符號整數。
• Math.hypot：用於計算全部參數的平方和的平方根。
• Math.clz32：用於返回數字的32 位無符號整數形式的前導0的個數。

2. 數字處理

• Math.trunc：用於返回數字的整數部分。
• Math.fround：用於獲取數字的32位單精度浮點數形式。

3. 判斷

• Math.sign：判斷數字的符號（正、負、0）。
• Math.expm1()：用於計算 e 的 x 次方減 1 的結果，即 Math.exp(x) - 1 。
• Math.log1p(x)：用於計算1 + x 的天然對數，即 Math.log(1 + x) 。

4. 雙曲函數方法

• Math.sinh(x): 用於計算雙曲正弦。
• Math.cosh(x): 用於計算雙曲餘弦。
• Math.tanh(x): 用於計算雙曲正切。
• Math.asinh(x): 用於計算反雙曲正弦。
• Math.acosh(x): 用於計算反雙曲餘弦。
• Math.atanh(x): 用於計算反雙曲正切。

5. 指數運算符

1 ** 2      // 1
2 ** 2 ** 3     // 256
複製代碼

（三）ES6 數組

1.數組建立

1. Array.from()

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

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike) // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike) // ['a', 'b', 'c']
複製代碼

2. Array.of()

   Array.of方法用於將一組值，轉換爲數組。

Array.of(3, 11, 8) // [3,11,8]
複製代碼

2.數組查找

find：用於找出第一個符合條件的數組成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

findIndex：返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

[1, 4, -5, 10].find((n) => n < 0)   // -5
[1, 4, -5, 10].findIndex((n) => n < 0)  //2
複製代碼

3.數組填充

1. copyWithin(target, start, end)

   數組實例的copyWithin方法，在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。參數1：被修改的起始索引，參數2：被用來覆蓋的數據的起始索引，參數3(可選)：被用來覆蓋的數據的結束索引，默認爲數組末尾。

[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]

複製代碼

2. fill(value, start, end)

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

['a', 'b', 'c'].fill(7, 1, 2)   // ['a', 7, 'c']
複製代碼

4.數組遍歷

keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

5.數組包含

Array.prototype.includes方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。

[1, 2, 3].includes(2)     // true
複製代碼

6.嵌套數組轉一維數組

1. flat()用於將嵌套的數組「拉平」，變成一維的數組。flat()方法的參數是一個整數，表示想要拉平的層數，默認爲1。

2. flatMap()方法對原數組的每一個成員執行一個函數，而後對返回值組成的數組執行flat()方法。

[1, 2, [3, [4, 5]]].flat(2)     // [1, 2, 3, 4, 5]
[2, 3, 4].flatMap((x) => [x, x * 2])    // [2, 4, 3, 6, 4, 8]
複製代碼

7. ArrayBuffer

（四）ES6 對象

1. 對象字面量

1. 屬性的簡潔表示法

const foo = 'bar'
const baz = {foo}
baz // {foo: "bar"}

// 等同於
const baz = {foo: foo}
複製代碼

2. 屬性名錶達式
3. 方法的 name 屬性

2. 對象的新方法

1. super 關鍵字

   關鍵字super，指向當前對象的原型對象。

2. Object.is(value1, value2)

   用來比較兩個值是否嚴格相等，與（===）基本相似。

3. Object.assign()

   用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。

const target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }

Object.assign(target, source1, source2)
target      // {a:1, b:2, c:3}
複製代碼

4. Object.getOwnPropertyDescriptors()

   返回指定對象全部自身屬性（非繼承屬性）的描述對象。

5. Object.setPrototypeOf()，Object.getPrototypeOf()

   設置或讀取一個對象的原型對象。

6. Object.keys()，Object.values()，Object.entries()

   返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵名/鍵值/鍵值對數組

7. Object.fromEntries()

   Object.fromEntries()方法是Object.entries()的逆操做，用於將一個鍵值對數組轉爲對象。

（五）ES6 正則表達式