ES6入門到「放棄

1.ES6是什麼，黑歷史，不講，自己百度去。

2.在瀏覽器中如何使用？

1.babel babeljs.io在線編譯

2.traceur-----Google出的編譯器，把ES6編譯成ES5

traceur 編譯

bootsrap 引導程序，和我們理解的bootstrap css那個框架沒有半毛錢關係。

3.es6新功能

3.1.定義變數

let 替代var 擁有塊級作用域。

3.2const

定義常量 常量不可以修改，如果修改會報錯

3.3字元串連接

ES6管它叫模板引擎，其實就是字元串連接這個破玩意。

用鍵盤1左邊那個鍵,反引號。

varstr="帥";//注意這裡是正常雙引號

varstr2=`你們從我臉上看到了什麼${str},難道不是么？`;

4.解構賦值

var [a,b,c] = [12,5,8];

console.log(a,b,c);//12,5,8 是不是很簡潔？

5.ES6新技巧

a)複製數組

arr2.from(arr)//再也不用用循環了，吼吼，還可不可以更性感一點

arr2 = [...arr]//簡直是bug級別的用法，不過真心簡單

b)for of循環

c)map 、delete

6.箭頭函數 重點，angular 2.x用的不少。

/*function show(a){

return a;

}

var s=show(12);

alert(s);*/

var show=(a,b)=>a+b;

var s=show(12,5);

相當簡單。

([param] [, param]) => {

statements

}

param => expression

解釋：

param 是參數，根據參數個數不同，分這幾種情況： () => { … } // 零個參數用 () 表示 x => { … } // 一個參數可以省略 () (x, y) => { … } // 多參數不能省略 ()

7.更簡潔的對象語法

var name="abb";

var age=101;

var preson={

name,

age,

showName(){

return this.name;

},

showAge(){

return this.age;

}

};

alert(preson.showName());

你沒有看錯，bug一樣的語法。

8.重中之重，不懂這個你徹底懵逼，完全看不懂angular2.x在幹啥。類。

類，真特么累，一個語法糖，廢柴，然而你還得懂。

class Person{ //類

constructor(name,age){

this.name=name;

this.age=age;

}

showName(){

return this.name;

}

showAge(){

return this.age;

}

}

var p1=new Person("aaa",10);

alert(p1.showName());

你沒有看錯，這裡面的this就沒有問題的。玩類，不得不說的一個東西就是繼承，這裡得感謝ES6，我們再也不用

apply 和 constructor 混合的方式繼承了，太特么噁心了，直接用extend,鼓掌，送火箭。

class Person{ //類

constructor(name="default",age=0){

this.name=name;

this.age=age;

}

showName(){

return this.name;

}

showAge(){

return this.age;

}

}

//繼承

class Worker extends Person{

constructor(name,age,job="掃地的"){

super(name,age);

this.job=job;

}

showJob(){

return this.job;

}

}

早特么應該這麼玩，話說吐槽一下，敢不敢把construtor這麼丑逼的東西給我換成真正的構造函數？

再說一個模塊化，前方高能，必須必須必須會！！否則你載angular2.x中連代碼你都組織不起來，不知道你往哪裡寫。

之前我們用過seajs，和require,有了ES6，再也不用這兩個貨了。

定義模塊

const a = 12;

export a;

再來一個angular2.x中的例子

class hero{

//屬性

xxxx

//方法

}

exports hero;

怎麼使用？

import modA from "./a.js";

import modB from "./b.js";

console.log(modA+modB);

9.promise

如果你想玩一些新的庫，肯定離不開數據交互，外面炒的很火。

就是一個對象，用來傳遞非同步操作的數據(消息)

pending（等待、處理中）—> Resolve(完成、fullFilled)

—> Rejected(拒絕、失敗)

使用：

var p1=new Promise(function(resolve,reject){

//resolve成功了

//reject失敗了

});

var p1=new Promise(function(resolve,reject){

if(非同步處理成功了){

resolve(成功數據)

}else{

reject(失敗原因)

}

});

p1.then(成功(resolve),失敗(reject))√

------------------------------------------------

p1.catch——用來捕獲錯誤

10.生成器Gennerator.

看起來挺懸，其實就是那麼回事兒，我們看看是什麼鬼。

一個函數，可以遍歷狀態,感覺就是狀態機，好吧不說了再說就懵逼了。

語法：

function *show(){

}

注意：

a)函數名字前有星號

b)內部用yield

c）next執行下一個狀態

function* show(){

yield "Hello";

yield "World";

yield "Es6";

return "well";

}

var res=show();

console.log(res.next()); //

console.log(res.next()); //

console.log(res.next()); //

console.log(res.next()); //

ES6基本上會這麼多就可以了,完美ending。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！