ES6简介.

Presentation on theme: "ES6简介."— Presentation transcript:

1 ES6简介

2 主要内容 Javascript、ES5、ES6的关系 let和const关键字 解构赋值 模板字符串 函数的扩展 对象和类的扩展
新增数据结构Set,Map,WeakMap 遍历器Iterator和for…of循环 Generator函数 Promise对象和async函数 模块化Module ES6的部署和转换实现

3 Javascript、ES5、ES6的关系

4 let和const关键字

5 let和const关键字——let *let跟var类似，但let关键字使变量只在块级作用域内有。
*函数本身的作用域在其所在的块级作用域内。

6 let和const关键字——const 定义常量 重新赋值不会报错，只会默默失败。 作用域跟let相同。

7 解构赋值 数组的解构赋值 对象的解构赋值 解构赋值的用途

8 解构赋值——数组的解构赋值 *定义变量形式的改变。 解构赋值就是模式匹配。 *一些嵌套数组的例子。 *解构不成功时，值为undefinded
对undefined、null解构会报错，因为undefined和null不能转换成对象。 *解构允许指定默认值。

9 解构赋值——对象的解构赋值 *定义变量形式的改变。 也能嵌套。 *也能默认。 *对声明的变量赋值要非常小心。

10 解构赋值——实际应用 *函数可返回多个值。 *函数参数定义及默认参数。

11 模板字符串 使用`（左撇号）声明。 可当做普通字符串使用。 也可来定义多长字符串。 在字符串中可嵌入变量。

12 函数的扩展 函数参数的默认值 rest参数 扩展运算符 箭头函数

13 函数的扩展——函数参数的默认值

14 函数的扩展——rest参数 rest参数用于数组的解构赋值和函数的参数中，指代一个数组，多余的值都将存放于这个数组中。 注意点：
*在解构赋值中的应用 *在函数参数中的应用 注意点： 它是一个数组 rest参数之后不能再有其他参数，否则会报错。

15 函数的扩展——扩展操作符 rest操作符的反运算符，将一个数组转换为用逗号分隔的参数序列。

16 函数的扩展——箭头函数 *使用箭头（=>）来定义函数。 如果不需要参数或多个参数，使用圆括号（）代表参数部分。
如果代码部分多余一条，使用大括号括起来，并用return语句返回。 *若返回的值为一个对象该怎么办？ 注意点： 函数体内的this对象，绑定的是定义时所在的对象，而非运行时所在的对象。 因为this被强制绑定为定义时所在的对象，因此无法使用call(), apply(), bind()来改变this的指向。 不可作为构造函数，跟new一起会报错。 函数体内没有arguments对象。

17 对象的扩展 增强对象的写法。 Symbol数据类型。 Proxy方法。 新增class关键字。

18 对象的扩展——增强对象的写法 *允许直接写入变量和方法，作为对象的属性和方法。 *常用于函数的返回值，非常方便。 *属性名表达式写法。

19 对象的扩展——Symbol *新的原始数据类型。 *最大的特点，每个Symbol都不相等。
*适用于作为标识符，用于对象属性，保证属性名之间不会发生冲突。 通过symbol函数生成，结构一个字符串作为指定生成symbol的名称，该名称可通过name属性获取。 Typeof的结果表明，symbol是一种新的原始类型。 Symbol初始化不使用new命令。 防止属性被覆写。

20 对象的扩展——Proxy 对象的属性代理 使用proxy作为构造函数，接受两参数，一为目标对象，二为代理的属性get/set方法。

21 对象的扩展——class关键字 *传统使用构造函数来定义生成新的对象。 *ES6引入class关键字，可定义类。
*类的继承——extends关键字。 跟传统的面向对象语言差异很大，不容易理解，容易对新学习这门语言的程序造成困惑。 并无新的功能，只不过语法更清晰，它是一个语法糖。 Constructor即为构造方法，类在实例化的时候会自动调用此方法。 this代表实例化的对象。 属性、方法的声明不需要使用逗号分隔。 Class之间通过extends关键字实现继承。 super指向父类。 必须在constructor方法中调用一次super()方法，否则会报错。

22 新增数据结构 Set Map WeakMap

23 新增数据结构——Set *新增数组结构Set，它类似于数组，但成员都是唯一的，不重复的。 *Set的属性和方法。
Set.prototype.constructor Set.prototype.size add() delete() has() clear()

24 新增数据结构——Map *新增数组结构Map Map的属性和方法。 Map.prototype.constructor
Map.prototype.size add() delete() has() clear() 对象本身是键值对集合的，但只能用字符串作为键名。 Map结构允许非字符串也能作为键值。

25 新增数据结构——WeakMap 与Map类似，但只接受对象作为键名。（null除外）

26 遍历器和for…of循环

27 遍历器和for…of循环——Iterator
Iterator(遍历器)是一种协议，对象只要部署了这个协议，就可以完成遍历操作，es6中，遍历操作特指for…of循环。 协议规定，部署了next方法的对象，就具备了遍历器的功能。 next方法须返回一个包含value和done两个属性的对象。value是当前遍历位置的值，done属性表示遍历是否结束，是一个布尔值。

28 遍历器和for…of循环——for…of循环
一个对象部署了next方法，就被视为具备了Iterator接口，就可用for…of循环遍历其值。 在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。

29 ES6中很多数据结构都支持遍历：数组、set、map、对象，那么函数呢？

30 Generator函数 Generator函数具有遍历器的特征，即具有next()方法，返回具有value和done属性的对象。
*next方法参数：yield语句本身返回undefined，next方法可带一个参数，作为上一条yeild语句返回的值。 如果yield语句返回的是一个遍历器，则yeild关键字后面要加一个星号（*）。 *在for…of中的应用。 具有两个特点： function关键字后跟一个星号（*） 函数体内通过yeild关键字定义遍历的值。 每次调用比那里器next()方法时，就从函数头部或上一次停下来的地方开始执行，直到下一条yeild语句位置。 当遍历结束时返回undefined yeild语句跟return有点像，都是返回紧跟后面表达式的值。区别在于，yield使函数暂停执行，下次再从改位置继续执行，而return不具备这些能力。

31 js中要如何才能使异步操作变成同步操作？

32 Promise对象和async函数

33 Promise对象和async函数——Promise
Promise是一个构造函数，生成promise实例，该实例具备上述规范。 Promise构造函数接受一个函数作为参数，该函数有resolve方法和reject方法两个参数，这两个方法都是js内核生成的。 如果异步操作成功，则运行resolve函数，promise对象状态由pending变为resolved。 如果异步操作失败，则运行reject函数，promise对象由pending变为rejected。 Promise对象生成后，可以使用then方法分别指定resolve方法和reject回调。 Promise规范了异步操作的状态和方法。 状态：pending（进行中），resolved（已完成），rejected（已失败）。 方法：resolve（成功），reject（失败） *如何实现这个接口。 *链式操作。如果then返回的是一个新的promise对象，可采用链式写法。 *cathch方法捕获错误。 promise的错误具有“冒泡”性质，错误会一致传下去，知道捕获为止。 若最终都没有捕获错误，则在实例结束抛出错误。实例化过程中遇到的错误则不进行抛出。

34 Promise对象和async函数——Promise
*Promise.all()方法 将多个异步包装成一个新的Promise对象 当这些对象都操作成功后，状态才变成resolved，只要其中一个失败，状态就变成rejected。 Promise.race()方法 只要其中一个完成就完成。 *Promise.resolve() 将对象转换成Promise对象。 如果对象不具备then方法，则返回一个新的Promise对象，其状态为resolved。 Promise.reject() 返回一个新的promise对象，该实例状态为rejected。

35 Promise对象和async函数——async函数
有了统一的接口，那么就能使原本异步的操作变成同步操作。 async关键字表明函数内部有异步操作。 该异步操作应为promise对象，并用await关键字注明。

36 模块化Module

37 模块化Module 用户在import模块的时候，必须精确的知道模块中属性和方法的名称，使用default关键字，用户无需查询手册，可给属性、方法任意指定名称。 类的解构赋值。 如果想为输入的属性方法更改一个名字，可使用as关键字。 ES6实现了模块功能，试图解决js在代码依赖和部署上的问题，取代现有的AMD和CommonJs规范，成为浏览器和服务器端通过的模块化解决方案。 模块功能有两个关键词：export和import。 export用于定义模块的对外接口。 Import用于引入其他模块的功能。 ES6规定一个独立的js文件即为一个模块。 各个模块间作用域屏蔽。 允许一个文件调用另一个文件。 *一个简单的模块就是一个js文件，里面用export输出接口。 *使用export定义模块后，其他js文件可使用import关键字加载文件。 *通过export default指定默认方法。 *模块的继承。 另一种写法：

38 ES6的部署和转换实现

39