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