1、ECMAScript概要
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）经过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用普遍，它每每被称为JavaScript或JScript，但实际上后二者是ECMA-262标准的实现和扩展。javascript
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。html
ES6是继ES5以后的一次重大改进，语言规范由ES5.1时代的245页扩充至600页。ES6增添了许多必要的特性，例如：模块和类，以及一些实用特性，例如Maps、Sets、Promises、生成器（Generators）等。尽管ES6作了大量的更新，可是它依旧彻底向后兼容之前的版本，标准化委员会决定避免由不兼容版本语言致使的“web体验破碎”。结果是，全部老代码均可以正常运行，整个过渡也显得更为平滑，但随之而来的问题是，开发者们抱怨了多年的老问题依然存在。vue
简单说ES就是JavaScript语言的实现标准，ES6是一较新的版本，使JavaScript更加规范与强大。java
2、学习资源
我推荐的ES6学习资料是开源书籍《ECMAScript 6 入门》，全面介绍 ECMAScript 6 新引入的语法特性。node
URL：http://es6.ruanyifeng.com/git
源码：https://github.com/ruanyf/es6tutorial/es6
3、ECMAScript 6的变化
若是你们有ES5的基础，只须要关注ES6的主要变化则能够相对快的掌握新的特性，英文源文点击能够查看。github
ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快不少，主要缘由是现代浏览器对 ES6 的支持至关迅速，尤为是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。web
3.1. let、const 和块级做用域
let 容许建立块级做用域，ES6 推荐在函数中使用 let 定义变量，而非 var：数组
var a = 2;
{
let a = 3;
console.log(a);
}
console.log(a);
一样在块级做用域有效的另外一个变量声明方式是 const，它能够声明一个常量。ES6 中，const 声明的常量相似于指针，它指向某个引用，也就是说这个「常量」并不是一成不变的，如：
{
const ARR = [5,6];
ARR.push(7);
console.log(ARR); // [5,6,7]
ARR = 10; // TypeError
}
有几个点须要注意：
- let 关键词声明的变量不具有变量提高（hoisting）特性
- let 和 const 声明只在最靠近的一个块中（花括号内）有效
- 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
- const 在声明时必须被赋值
默认状况下javascript中并无块级(block)做用域：
var i = 100;
if(true) {
var i=200;
console.log(i);
}
console.log(i);
结果：
使用let定义：
let i = 100;
if(true) {
//var i=200; //Identifier 'i' has already been declared 变量定义
let i=200;
console.log(i);
}
console.log(i);
结果：
默认状况javascript中定义的变量都是弱类型的，能够动态变化：
let i = 100;
if(true) {
i=true;
console.log(i);
}
console.log(i);
结果：
若是使用const定义，则必须赋值且不容许修改。
3.2. 箭头函数（Arrow Functions）
ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：
var getPrice = function() {
return 4.55;
};
// Implementation with Arrow Function
var getPrice = () => 4.55;
须要注意的是，上面例子中的 getPrice 箭头函数采用了简洁函数体，它不须要 reture 语句，下面这个例子使用的是正常函数体：
let arr = ['apple', 'banana', 'orange'];
let breakfast = arr.map(fruit => {
return fruit + 's';
});
console.log(breakfast);
固然，箭头函数不只仅是让代码变得简洁，函数中 this 老是绑定老是指向对象自身。具体能够看看下面几个例子：
function Person() {
this.age = 0;
setInterval(function growUp() {
this.age++;
}, 1000);
}
var person = new Person();
咱们常常须要使用一个变量来保存 this，而后在 growUp 函数中引用：
function Person() {
var self = this;
self.age = 0;
setInterval(function growUp() {
self.age++;
}, 1000);
}
而使用箭头函数能够省却这个麻烦：
function Person(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
var person = new Person();
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES6</title>
</head>
<body>
<script type="text/javascript">
var add1 = function(a, b) {
return a + b;
}
var add2 = (a, b) => a + b;
var f1 = function(n) {
return n + 1;
}
var f2 = n => n + 1;
function counter1() { //普通状况
this.n = 100;
var self = this;
(function(i) {
self.n += i;
console.log(self.n);
})(50);
}
var c1 = new counter1();
function counter2() {
this.n = 100;
setTimeout(function() { //错误，this指向window
console.log(this);
this.n += 50;
console.log(this.n);
}, 1000);
}
var c2 = new counter2();
function counter3() {
this.n = 100;
setTimeout(() => { //箭头函数，this指向当前对象
console.log(this);
this.n += 50;
console.log(this.n);
}, 1000);
}
var c3 = new counter3();
</script>
</body>
</html>
结果：
3.3. 函数参数默认值
ES6 中容许你对函数参数设置默认值：
let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850
示例：
function add(n1=100,n2=200){
return n1+n2;
}
console.log(add());
console.log(add(1));
console.log(add(1,1));
结果：
3.4. Spread / Rest（扩展与剩余）操做符
扩展语法（Spread）容许在须要多个参数（用于函数调用）或多个元素（用于数组文本）或多个变量（用于解构分配）的位置扩展表达式.
console.log(...[1,2,3]); // 1 2 3
console.log(1, ...[2,3,4], 5); // 1 2 3 4 5
console.log([1, ...[2,3,4], 5]); // [1, 2, 3, 4, 5]
剩余参数（rest parameter）容许长度不肯定的实参表示为一个数组。
扩展 - spread 运算符是三个点… 。它比如 剩余 - rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
Spread / Rest 操做符指的是 ...，具体是 Spread 仍是 Rest 须要看上下文语境。
当被用于迭代器中时，它是一个 Spread 操做符：
function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(...arr);
示例：
<script type="text/javascript">
function show(n1,n2,n3){
console.log(n1,n2,n3);
}
var arr=[5,7,9,1,6,7];
show(1,2,3);
show(arr);
show(...arr); //将数组中的前3位取出做为3个参数的值
</script>
结果：
因此这里能够用来替换数组的 concat 函数，以往咱们合并数组，须要 var arr3 = arr1.concat(arr2), 若是使用扩展运算符，代码以下：
var arr3 = [...arr1, ...arr2];
对数组的扩展运算，目前已是 ES6 标准中，可是还有在 ES6 - stage3 中，对对象也作了相应的扩展, 方法跟数组相似
let obj1 = {a:1, b:2};
let obj2 = {c:3,b:{e:4,f:5}};
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // // {a:1, b:{e:4,f:5}, c: 3}
obj3.b.e = 100;
console.log(obj3); // {a:1, b:{ e:100, f:5 }, c:3}
console.log(obj2); // {c:3, b:{e:100, f:5}}
目前浏览器的支持度不够，可使用node测试：
能够发现对对象进行 扩展 - spread 运算，实现的是对象的浅拷贝, 而且是复制的对象的可枚举的属性。
当被用于函数传参时，是一个 Rest 操做符：
function foo(...args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
示例：
<script type="text/javascript">
function show(...args){ //可变参数，args是一个数组
console.log(args);
}
show(1,2,3,true,false,'Hello');
</script>
结果：
3.5. 对象词法扩展
ES6 容许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，而且容许在对象属性中进行计算操做：
function getCar(make, model, value) {
return {
// 简写变量
make, // 等同于 make: make
model, // 等同于 model: model
value, // 等同于 value: value
// 属性可使用表达式计算值
['make' + make]: true,
// 忽略 `function` 关键词简写对象函数
depreciate() {
this.value -= 2500;
}
};
}
let car = getCar('Barret', 'Lee', 40000);
// output: {
// make: 'Barret',
// model:'Lee',
// value: 40000,
// makeBarret: true,
// depreciate: function()
// }
示例：
<script type="text/javascript">
function createProduct(name,price){
return {
"name":name,
"price":price,
"iphone8Desc":name+"_"+price,
"show":function(){
console.log("名称："+this.name+" 价格："+this.price);
}
}
}
var phone1=createProduct("iphone8",5898.5);
phone1.show();
console.log(JSON.stringify(phone1));
console.log(phone1);
//ES6中定义对象的语法糖
function createPdt(name,price){
return {
name,
price,
[name+"Desc"]:name+"_"+price,
show(){
console.log("名称："+this.name+" 价格："+this.price);
}
}
}
var phone2=createPdt("iphone8",5898.5);
phone2.show();
console.log(JSON.stringify(phone2));
console.log(phone2);
</script>
结果：
3.6. 二进制和八进制字面量
ES6 支持二进制和八进制的字面量，经过在数字前面添加 0o 或者 0O 便可将其转换为二进制值：
let oValue = 0o10;
console.log(oValue);
let bValue = 0b10;
console.log(bValue);
3.7. 对象和数组解构
解构能够避免在对象赋值时产生中间变量：
function foo() {
return [1,2,3];
}
let arr = foo();
let [a, b, c] = foo();
console.log(a, b, c);
function bar() {
return {
x: 4,
y: 5,
z: 6
};
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z);
示例：
function getArray(){
return [1,3,5];
}
let [n1,n2,n3,n4]=getArray(); //调用函数，将数组值分别给n1,n2,n3
console.log(n1,n2,n3,n4);
function getObj(){
return {name:"tom",age:18};
}
let {name:nickname,age:myage}=getObj(); //将对象的name与age给定义的变量赋值
console.log(nickname,myage);
结果：
3.8. 对象超类
ES6 容许在对象中使用 super 方法：
var parent = {
foo() {
console.log("Hello from the Parent");
}
}
var child = {
foo() {
super.foo();
console.log("Hello from the Child");
}
}
Object.setPrototypeOf(child, parent);
child.foo();
示例：
var car={
voice(){
console.log("车在叫...");
}
};
var bus={
voice(){
super.voice();
console.log("大巴车在叫...");
}
}
Object.setPrototypeOf(bus,car); //将bus的原型指向car
bus.voice();
结果：
3.8.一、Object.setPrototypeOf 方法的使用
将一个指定的对象的原型设置为另外一个对象或者null(既对象的[[Prototype]]内部属性).
示例：
<script type="text/javascript">
var Car=function(){
this.name="车";
}
var benz=new Car();
console.log(benz.name);
Object.setPrototypeOf(benz,{name:"小轿车",price:"23456"});
console.log(benz.name); //未重写
console.log(benz.price);
</script>
结果：
语法
Object.setPrototypeOf(obj, prototype)
参数
-
obj
-
将被设置原型的对象.
-
prototype
-
该对象新的原型(能够是一个对象或者
null).
3.8.二、Object.defineProperty
Object.defineProperty(被扩展的对象名，属性名，{属性的值}) 能够用于扩展对象的属性
不过能够指定只读属性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.defineProperty()</title>
</head>
<body>
<script>
var tom = {
name: "tom"
};
tom.age = 90;
tom["age"] = 88;
console.log("tom.age=" + tom.age);
var rose = {
name: "rose"
};
Object.defineProperty(rose, "age", {
value: 98,
writable:false //只读
});
rose.age=18; //修改无效
console.log("rose.age=" + rose.age);
</script>
</body>
</html>
结果：
3.9. 模板语法和分隔符
ES6 中有一种十分简洁的方法组装一堆字符串和变量。
${ ... } 用来渲染一个变量
` 做为分隔符
let user = 'Barret';
console.log(`Hi ${user}!`);
3.10. for...of VS for...in
for...of 用于遍历一个迭代器，如数组：
let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
console.log(nickname);
}
Result: di, boo, punkeye
for...in 用来遍历对象中的属性：
let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
console.log(nickname);
}
Result: 0, 1, 2, size
3.11. Map 和 WeakMap
ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每一个对象均可以看做是一个 Map。
一个对象由多个 key-val 对构成，在 Map 中，任何类型均可以做为对象的 key，如：
var myMap = new Map();
var keyString = "a string",
keyObj = {},
keyFunc = function () {};
// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");
myMap.size; // 3
// 获取值
myMap.get(keyString); // "value 与 'a string' 关联"
myMap.get(keyObj); // "value 与 keyObj 关联"
myMap.get(keyFunc); // "value 与 keyFunc 关联"
WeakMap
WeakMap 就是一个 Map，只不过它的全部 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担忧内存泄漏问题。
另外一个须要注意的点是，WeakMap 的全部 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和 set(key, val)：
let w = new WeakMap();
w.set('a', 'b');
var o1 = {},
o2 = function(){},
o3 = window;
w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);
w.get(o3);
w.has(o1);
w.delete(o1);
w.has(o1);
3.12. Set 和 WeakSet
Set 对象是一组不重复的值，重复的值将被忽略，值类型能够是原始类型和引用类型：
let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size;
mySet.has(1);
mySet.add('strings');
mySet.add({ a: 1, b:2 });
能够经过 forEach 和 for...of 来遍历 Set 对象：
mySet.forEach((item) => {
console.log(item);
});
for (let value of mySet) {
console.log(value);
}
Set 一样有 delete() 和 clear() 方法。
WeakSet
相似于 WeakMap，WeakSet 对象可让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只容许出现一次：
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window);
ws.has(foo);
ws.delete(window);
ws.has(window);
3.13. 类
ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。
函数中使用 static 关键词定义构造函数的的方法和属性：
class Task {
constructor() {
console.log("task instantiated!");
}
showId() {
console.log(23);
}
static loadAll() {
console.log("Loading all tasks..");
}
}
console.log(typeof Task);
let task = new Task();
task.showId();
Task.loadAll();
示例：
class Animal{
constructor(){ //构造方法，可无
console.log("正在构造一只动物");
}
bark(){
console.log("动物在叫...");
}
static eat(){
console.log("动物在吃东西...");
}
}
var pig=new Animal();
pig.bark();
Animal.eat();
结果：
类中的继承和超集：
class Car {
constructor() {
console.log("Creating a new car");
}
}
class Porsche extends Car {
constructor() {
super();
console.log("Creating Porsche");
}
}
let c = new Porsche();
// Creating a new car
// Creating Porsche
extends 容许一个子类继承父类，须要注意的是，子类的 constructor 函数中须要执行 super() 函数。
固然，你也能够在子类方法中调用父类的方法，如 super.parentMethodName()。
在 这里 阅读更多关于类的介绍。
有几点值得注意的是：
类的声明不会提高（hoisting)，若是你要使用某个 Class，那你必须在使用以前定义它，不然会抛出一个 ReferenceError 的错误
在类中定义函数不须要使用 function 关键词
示例：
<script type="text/javascript">
class Animal{
constructor(){ //构造方法，可无
console.log("正在构造一只动物");
}
bark(){
console.log("动物在叫...");
}
static eat(){
console.log("动物在吃东西...");
}
}
class Dog extends Animal{
constructor(){
super(); //调用父类的构造方法
console.log("正在构造一只狗");
}
bark(){ //重写
console.log("汪汪汪...");
}
}
var dog=new Dog();
dog.bark();
Dog.eat();
结果：
3.14. Symbol
Symbol 是一种新的数据类型，它的值是惟一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个惟一的标识符，不过你访问不到这个标识符：
var sym = Symbol( "some optional description" );
console.log(typeof sym);
注意，这里 Symbol 前面不能使用 new 操做符。
若是它被用做一个对象的属性，那么这个属性会是不可枚举的：
var o = {
val: 10,
[ Symbol("random") ]: "I'm a symbol",
};
console.log(Object.getOwnPropertyNames(o));
若是要获取对象 symbol 属性，须要使用 Object.getOwnPropertySymbols(o)。
3.15. 迭代器（Iterators）
迭代器容许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素是，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。
ES6 中能够经过 Symbol.iterator 给对象设置默认的遍历器，不管何时对象须要被遍历，执行它的 @@iterator 方法即可以返回一个用于获取值的迭代器。
数组默认就是一个迭代器：
var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
itr.next(); // { value: undefined, done: true }
你能够经过 [Symbol.iterator]() 自定义一个对象的迭代器。
3.16. Generators
Generator 函数是 ES6 的新特性，它容许一个函数返回的可遍历对象生成多个值。
在使用中你会看到 * 语法和一个新的关键词 yield:
function *infiniteNumbers() {
var n = 1;
while (true){
yield n++;
}
}
var numbers = infiniteNumbers();
numbers.next();
numbers.next();
numbers.next();
每次执行 yield 时，返回的值变为迭代器的下一个值。
3.17. Promises
ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者 rejected。
var p = new Promise(function(resolve, reject) {
if () {
resolve();
} else {
reject();
}
});
每个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：
p.then((val) => console.log("Promise Resolved", val),
(err) => console.log("Promise Rejected", err));
4、做业
4.一、复现博客中全部ES6的示例。
4.二、完成任务指导手册中的理论题与实操题。
4.三、自学Bootstrap，要求以下：
a、完成任务指导手册中的理论题与实操题（二章）
b、翻转课堂将随机抽查学习状况（按钮、巨幕、字体图标、任务指定手册184登陆、185表格）
c、开发工具尽可能使用webstrom，请先准备好
5、视频
https://www.bilibili.com/video/av17503637/
6、示例
https://git.coding.net/zhangguo5/vue2.git