ECMAScript 6 入門

簡單記錄 ECMAScript 6 的幾種新特性

 

ES6 一共有 5 種方法能夠遍歷對象的屬性。

（1）for...in

for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

（2）Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）全部可枚舉屬性（不含 Symbol 屬性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的全部屬性（不含 Symbol 屬性，可是包括不可枚舉屬性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數組，包含對象自身的全部 Symbol 屬性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組，包含對象自身的全部屬性，無論是屬性名是 Symbol 或字符串，也無論是否可枚舉。

以上的 5 種方法遍歷對象的屬性，都遵照一樣的屬性遍歷的次序規則。

• 首先遍歷全部屬性名爲數值的屬性，按照數字排序。
• 其次遍歷全部屬性名爲字符串的屬性，按照生成時間排序。
• 最後遍歷全部屬性名爲 Symbol 值的屬性，按照生成時間排序。

 

參考：http://es6.ruanyifeng.com/#docs/object#屬性的遍歷

 

ES6 共有 6 種方法能夠表示一個字符。

 

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

參考：http://es6.ruanyifeng.com/#docs/string

 

ES6 引入了模板字符串

• 模板字符串（template string）是加強版的字符串，用反引號（`）標識。
• 若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。
• {} 內能夠放入任意的 JavaScript 表達式，能夠進行運算。
• {} 還能夠調用函數。

// 普通字符串 `In JavaScript '\n' is a line-feed.`  // 多行字符串。換行保留，若是不想換行，使用 trim 消除 `In JavaScript this is not legal.`

`this is no \n`.trim()

 console.log(`string text line 1 string text line 2`);  // 字符串中嵌入變量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`

參考：http://es6.ruanyifeng.com/#docs/string#模板字符串


ES 6 正則表達式

ES6 對正則表達式添加了u修飾符，含義爲 「Unicode 模式」，用來正確處理大於\uFFFF的 Unicode 字符。也就是說，會正確處理四個字節的 UTF-16 編碼。
u\uFFFF

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

參考：http://es6.ruanyifeng.com/#docs/regex#u修飾符

ES6 還爲正則表達式添加了y修飾符，叫作 「粘連」（sticky）修飾符。
y

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

參考：http://es6.ruanyifeng.com/#docs/regex#y修飾符

 

 ES 6 數值的擴展

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

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

Number.isFinite(15); // true Number.isFinite(0.8); // true Number.isFinite(NaN); // false Number.isFinite(Infinity); // false Number.isFinite(-Infinity); // false Number.isFinite('foo'); // false Number.isFinite('15'); // false Number.isFinite(true); // false

Number.isNaN(NaN) // true Number.isNaN(15) // false Number.isNaN('15') // false Number.isNaN(true) // false Number.isNaN(9/NaN) // true Number.isNaN('true'/0) // true Number.isNaN('true'/'true') // true

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

• ES6 在 Number 對象上面，新增一個極小的常量Number.EPSILON。檢查浮點數的偏差範圍。

Number.EPSILON // 2.220446049250313e-16 Number.EPSILON.toFixed(20) // '0.00000000000000022204'

0.1 + 0.2 // 0.30000000000000004 0.1 + 0.2 - 0.3 // 5.551115123125783e-17 5.551115123125783e-17.toFixed(20) // '0.00000000000000005551'

5.551115123125783e-17 < Number.EPSILON // true

• 9007199254740993 === 9007199254740992

JavaScript 可以準確表示的整數範圍在-2^53到2^53之間（不含兩個端點），超過這個範圍，沒法精確表示這個值。

 

ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER這兩個常量，用來表示這個範圍的上下限。

 

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1 // true Number.MAX_SAFE_INTEGER === 9007199254740991 // true Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER // true Number.MIN_SAFE_INTEGER === -9007199254740991 // true

 

• Math 對象的擴展

1. Math.trunc() 方法用於去除一個數的小數部分，返回整數部分。
2. Math.sign() 方法用來判斷一個數究竟是正數、負數、仍是零。
3. Math.cbrt() 方法用於計算一個數的立方根。
4. Math.clz32() 方法返回一個數的 32 位無符號整數形式有多少個前導 0。對於小數，Math.clz32() 方法只考慮整數部分。
5. Math.imul() 方法返回兩個數以 32 位帶符號整數形式相乘的結果，返回的也是一個 32 位的帶符號整數。參考：http://es6.ruanyifeng.com/#docs/number#Math-imul
6. Math.fround() 方法返回一個數的單精度浮點數形式。
7. Math.hypot() 方法返回全部參數的平方和的平方根。
8. Math.expm1(x) 返回 ex - 1，即Math.exp(x) - 1。
9. Math.log1p(x)方法返回1 + x的天然對數，即Math.log(1 + x)。若是x小於 - 1，返回NaN。
10. Math.log10(x)返回以 10 爲底的x的對數。若是x小於 0，則返回 NaN。
11. Math.log2(x)返回以 2 爲底的x的對數。若是x小於 0，則返回 NaN。
12. Math.sinh(x) 返回x的雙曲正弦（hyperbolic sine）
13. Math.cosh(x) 返回x的雙曲餘弦（hyperbolic cosine）
14. Math.tanh(x) 返回x的雙曲正切（hyperbolic tangent）
15. Math.asinh(x) 返回x的反雙曲正弦（inverse hyperbolic sine）
16. Math.acosh(x) 返回x的反雙曲餘弦（inverse hyperbolic cosine）
17. Math.atanh(x) 返回x的反雙曲正切（inverse hyperbolic tangent）

• ES7 新增了一個指數運算符（**）

2 ** 2 // 4 2 ** 3 // 8

 

參考：http://es6.ruanyifeng.com/#docs/number

 

數組實例的entries()，keys()和values()

 

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

 

for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1

for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b'

for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"

 

 

參考：http://es6.ruanyifeng.com/#docs/array#數組實例的entries，keys和values

 

箭頭函數有幾個使用注意點。

 

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

（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。

（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 Rest 參數代替。

（4）不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

 

參考：http://es6.ruanyifeng.com/#docs/function#使用注意點