a simple introduction for es2015. :)

1. ECMAScript 2015: 101

2. Why we need
ES2015?

3. The future
IE 6 时代
Chrome 时代
Vue / Angular / React
Node

4. The degree of ES2015
implementation

5. ES2015 在现代浏览器的支持程度

7. • Chrome 54 + 实现了 ES2015 标准的 97%
• Firefox 49 + 实现了 ES2015 标准的 92%
• IE 11 实现了 ES2015 标准的 11%
• Edge 13 + 实现了 ES2015 标准的 83%

8. ES2015 在 Node 的 V8 引擎支持程度

10. • v0.10.48 实现了 ES2015 标准的 11%
• v4.3.2 实现了 ES2015 标准的 57%
• v6.8.1 实现了 ES2015 标准的 99%

11. iOS 10 实现了 100%
！

12. ES2015 Complier
Babel / Traceur

13. Babel
• 诞生于 2014/09/28
• 官网：https://babeljs.io
• 最新版本： v6.16.0
• 最多开发者使用的 ES2015 Compiler

14. Babel Plugins
• arrow-function - es2015-arrow-functions
• es2015 - babel-preset-es2015
• esNext - babel-preset-latest
• react - babel-preset-react

15. Traceur
• Google 出品的 JavaScript.next Compiler
• 易用：加载几行代码即可

17. Babel VS Traceur

18. Babel
• 优点： 支持多种构建环境和开发工具
• 优点：开源社区力量大，有问题很容易解决
• 缺点：只支持预编译

19. Traceur
• 优点：易用
• 缺点：只有 4% 的开发者使用
• 缺点：只有 Google 一家维护
• 缺点：啥事都没做就要引用 500K+ 的文件

20. The new feature in
ES2015

21. • Block Bindings
• Arrow Function
• Generator
• Promise
• Destructuring

22. Block Bindings

23. Var Declarations

26. Let Declarations

28. 真正的块级作用域

29. The temporal Dead
Zone

30. if (condition) {
console.log(typeof value); // ReferenceError!
let value = "blue";
}

31. 使用 let/const 代替 var

32. Arrow Function

34. JavaScript 的 this

36. JavaScript 设计缺陷

37. Fix with bind

39. Fix with Arrow
Function

41. 本质上是语法糖

42. Destructuring

47. Destructuring in Array

49. 使用场景

50. 中间值交换

52. 方法返回多个值

54. 提取JSON数据

56. 导入模块的指定方法

57. const { SourceMapConsumer, SourceNode }
= require("source-map");

58. Generator

59. Iterator

61. A generator is a function
that returns an iterator.

63. Promise

66. 实战例子

69. Chain Promise

71. Set && Map

72. 新增的两种数据结构

74. • Set.prototype.size：返回Set实例的成员总数。
• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。
• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

76. • Map.prototype.size：返回Map实例的成员总数。
• set(key, value): 设置key所对应的键值，然后返回整个Map结构
• get(key)：读取key对应的键值，如果找不到key，返回undefined
• has(key)：返回一个布尔值，表示该值是否为Map的成员。
• delete(key)：删除某个值，返回一个布尔值，表示删除是否成功。
• clear()：清除所有成员，没有返回值。
• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

77. Proxy

78. Proxy可以理解成，在目标对象之前架设
一层“拦截”，外界对该对象的访问，都必
须先通过这层拦截，因此提供了一种机制
，可以对外界的访问进行过滤和改写。

81. Proxy - JavaScript 的『元编程
』

82. Class / Module / Symbol
and more …

83. Learn now

84. Module