PPT：静态方法，ECMAScript6，Promise，Babel转码器，翻牌游戏，语法糖【诗书画唱】
总目录：
ECMAScript6-1搭建ES6运行环境.ppt
子目录：
在HBUILDER中配置Babel转码器
在页面中引入browser.js的作用
ECMAScript6-2常用语法.ppt
子目录：
let命令
const命令
箭头函数
函数的参数默认值
操作符...的使用
对象的解构
数组的解构
对象字面量简写
for...of循环
类
类的getter和setter方法
类的静态方法
类的继承
模板字符串
翻牌游戏
...就是Spread / Rest 操作符
Spread （展开）还是 Rest（可变数量参数）
默认情况下，对象不可迭代。
语法糖
对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
ECMAScript6-3Promise对象.ppt
Promise介绍
创建Promise对象
执行定时函数
then方法
传递数据
链式操作
一个例子
reject的用法
catch的用法
all的用法
race的用法
ECMAScript6-1搭建ES6运行环境.ppt
子目录：
在HBUILDER中配置Babel转码器
在页面中引入browser.js的作用
引入browser.js文件也可以使浏览器支持babel转码，也是为了以防万一，
当然其实不引入，也有时可以直接用ES6的语法。
ECMAScript6
搭建ES6运行环境
本章目标
了解ECMAScript6
ECMAScript6和JAVASCRIP的关系
什么是ECMAScript6
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript6和JAVASCRIP的关系
ES6是JS的规格，JS是ES6的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。
ECMAScript的历史
2011 年 6 月，ECMAscript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。
2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。
Babel转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
下面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
在HBUILDER中配置Babel转码器（一）
运行cmd命令。下载babel-cli和babel preset。
npm install --global babel-cli
npm install --global babel-preset-env
注意：安装时间可能比较久。
使用这种方式可以使我们看到ES6语法以及通过Babel转换过来的ES5代码。
在HBUILDER中配置Babel转码器（二）
在HBUILDER中，工具-预编译器设置，打开如下配置界面。选择.js，点击编辑。
在HBUILDER中配置Babel转码器（三）
在编辑界面中，填入触发命令地址和命令参数。
触发命令地址：<你的nodejs安装目录>\node_global\babel.cmd
命令参数：%FileName% --out-dir dist/%FileDirName%/%FileName% --source-maps --presets "<你的nodejs安装目录>\node_global\node_modules\babel-preset-env"
在HBUILDER中配置Babel转码器（四）
在HBUILDER中新建一个项目，Javascript版本选择ECMAScript6。这样，每次项目中的JS文件保存后，都会将编译后的代码文件放在项目中dist/下。
在页面中引入browser.js的作用
在页面中引入browser.js文件也可以使浏览器支持babel转码，这样你就可以直接使用ES6语法写js代码了。
ECMAScript6-2常用语法.ppt
子目录：
let命令
const命令
箭头函数
函数的参数默认值
操作符...的使用
对象的解构
数组的解构
对象字面量简写
for...of循环
类
类的getter和setter方法
类的静态方法
类的继承
模板字符串
翻牌游戏
...就是Spread / Rest 操作符
Spread （展开）还是 Rest（可变数量参数）
默认情况下，对象不可迭代。
语法糖
对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
ECMAScript6
常用语法
本章目标
let和const命令
箭头函数
类
模板字符串
let命令（一）
ES6中新增了let命令，用来声明变量。用法与var类似，但是用let声明的变量，只在let所声明的代码块内有效。let命令可以使js的语法规则更加严格。
let命令（二）
let命令（三）
const命令
const命令用来声明一个只读的常量。一旦声明，常量的值就不能够改变。
const命令的作用域和let命令一样，只在所声明的块级作用域内有效。
箭头函数（一）
ES6允许使用箭头=>定义函数
当函数参数只有一个时，括号可以省略；但是没有参数时，括号不可以省略。
函数体（花括号）中有且只有一行return语句时，中括号及return 关键字可以省略。
注意：箭头函数是一种简写方式。
箭头函数（二）
箭头函数（三）
箭头函数（四）
函数的参数默认值（一）
在ES6之前，我们往往这样定义参数的默认值：
函数的参数默认值（二）
在ES6中，我们可以这样写：
操作符...的使用（一）
...就是Spread / Rest 操作符，具体是 Spread （展开）还是 Rest（可变数量参数） 需要看上下文语境。
操作符...的使用（二）
当被用于函数传参时，是一个 Rest 操作符
对象的解构（一）
解构表示从数组和对象提取值并赋值给独特的变量。解构对象即获取对象中的属性值
数组的解构（二）
解构数组即获取数组中的元素。
对象字面量简写
for...of循环（一）
for...of循环是最新添加到 JavaScript 循环系列中的循环。它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代。
for...of循环（二）
for 循环的最大缺点是需要跟踪计数器和退出条件。
当你需要向数组中添加额外的方法（或另一个对象）时，for...in 循环会带来很大的麻烦。因为 for...in 循环循环访问所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。
for...of循环（三）
for...of 循环将只循环访问对象中的值
类（一）
js语言中，生成实例对象的传统方法就是通过构造函数。
类（二）
ES6的class可以大致看做只是一种语法糖，它的绝大部分功能，ES5都可以看到，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程语法而已。
类的getter和setter方法（三）
在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
类的静态方法（四）
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
类的继承（四）
ES6中的类也可以继承。
模板字符串（一）
在使用JS代码输出HTML代码时，往往需要拼接一个HTML字符串。这种做法需要使用大量的引号和+进行拼接才能得到我们需要的模版，显然是十分不方便的。
模板字符串（二）
ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来。
模板字符串（三）
不运行下面的代码，说出下面两行代码的运行结果。
翻牌游戏
读懂翻牌游戏的源码，并运行它
ECMAScript6-3Promise对象.ppt
Promise介绍
创建Promise对象
执行定时函数
then方法
传递数据
链式操作
一个例子
reject的用法
catch的用法
all的用法
race的用法
ECMAScript6
Promise内置对象
本章目标
Promise内置对象用法
Promise介绍
Promise是JS中的一个构造函数，自己身上有all、reject、resolve三个方法，原型属性上有then、catch等方法。
创建方式如下：
创建Promise对象
为了在需要的时候才去创建Promise对象，我们一般将创建Promise对象的代码封装在一个函数中。
执行定时函数
在Promise的内部匿名函数中，我们可以执行一段异步代码。此时，内部匿名函数中的代码会与后面的代码同时运行。
then方法
如何保证匿名内部函数的代码运行完后再执行后面的代码，这个时候，就需要调用Promise的then方法，then就是然后的意思。
传递数据
链式操作（一）
我们在购物时，会经历选择商品，下单，收快递三个过程，他们是有先后顺序的。
链式操作（二）
链式操作（三）
我们可以通过then方法的链式操作，使这三个任务依次执行。
一个例子
Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。
reject的用法（一）
事实上，我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
reject的用法（二）
catch的用法
catch的作用是：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。类似于java中的try-catch语句
all的用法（一）
all的用法（二）
race的用法（一）
race的用法（二）
运行效果：
