ECMAScript 6 入门

試著忘記壹切 提交于 2020-04-06 08:26:13

简单记录 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 编码。
/^\uD83D/u.test('\uD83D\uDC2A')
// false
/^\uD83D/.test('\uD83D\uDC2A')
// 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^532^53之间(不含两个端点),超过这个范围,无法精确表示这个值。

 

ES6 引入了Number.MAX_SAFE_INTEGERNumber.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#使用注意点

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!