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 '
' is a line-feed.`

// 多行字符串。换行保留，如果不想换行，使用 trim 消除
`In JavaScript this is
 not legal.`

`this is no 
`.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 编码。

/^uD83D/u.test('uD83DuDC2A')
// false
/^uD83D/.test('uD83DuDC2A')
// true

参考：http://es6.ruanyifeng.com/#docs/regex#u修饰符

ES6 还为正则表达式添加了y修饰符，叫做 “粘连”（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

参考：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#使用注意点