ES6學習小結

ES6（ES2015）--IE10+、Chrome、FireFox、移動端、NodeJS

 

編譯、轉換

1.在線轉換

2.提早編譯

 

babel = browser.js

 

ES6:

1.變量

 

var 重複聲明、函數級

let 不能重複聲明、塊級、變量

const 不能重複聲明、塊級、常量

 

 

var

1.能夠重複聲明 (C#,java裏不能夠)

2.沒法限制修改

PI=3.1415926

3.沒有塊級做用域

4.var的做用域是函數

{

var a= 1;

}

在外面能夠用a

 

let 不能重複聲明，變量-能夠修改,有塊級做用域

const 不能重複聲明，常量-能夠修改,有塊級做用域

 

 

2.函數

 

箭頭函數

 

a.方便

i.若是隻有一個參數，()能夠省

ii.若是隻有一個return，{}也能夠省

b.修正this

this相對正常點

 

 

function 名字(){

 

}

 

()=>{

 

}

1).若是隻有一個參數，()能夠省

2).若是隻有一個return,{}能夠省

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

()—只有一個參數（能夠省略）

{}—只有一個return（能夠省略）

 

let arr = new Array();

let arr = [];

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

函數的參數

1).參數擴展/數組展開

2).默認參數

 

參數擴展

收集

擴展

 

默認參數

function show(a, b=5){

 

}

 

1).收集參數

show(a,b,...args){} //args能夠任意命名

 

*Rest Parameter必須是最後一個（ Rest parameter must be last formal parameter）

2).展開數組

...arr => 1,2,3

*展開後的效果，跟直接把數組的內容寫在這兒同樣

 

let arr1 = [1,2,3];

let arr2 = [5,6,7];

 

let arr = [...arr1,...arr2] <=> let arr = [1,2,3,5,6,7]

 

 

function show(...args){ //...args爲數組

fn(...args); //<=> fn(12,5)

}

 

function fn(a,b){

alert(a+b);

}

 

show(12,5);//17

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

默認參數

$('#div1').animate({width:'200px'});//有默認的時間

$('#div1').animate({width:'200px'},1000);

 

function show(a,b=5,c=12){

console.log(a,b,c);

}

show(99);//a=99,b=5,c=12

show(99,19,88);//a=99,b=19,c=88

 

 

3.解構賦值：

1).左右兩邊結構必須同樣

 

let [a,b] = {a:12,b:5};

console.log(a,b);//報錯

2).右邊必須是個東西

 

let {a,b} = {12,5};//出不來，右邊不是一個東西，不是數組，也不是json

console.log(a,b);

3).聲明和賦值不能分開（必須在一句話裏完成）

let [a,b];

[a,b] = [12,5];

console.log(a,b);//出錯

 

 

let [a,b,c] = [1,2,3];

let {a,c,d} = {a:12,c:5,d:6};

 

let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(a,b,n1,n2,n3,num,str);

 

//粒度

let [json,arr,num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(json,arr,num,str);

 

4.數組

 

map 映射

reduce 彙總：一堆->一個

filter 過濾：一堆->剩下的

forEach 循環

 

 

map 映射 一個對一個

[12,58,99,86,45,91]

[不及格,不及格,及格,及格,不及格,及格]

 

[45,57,135,28]

[

{name:'blue',level:0,role:0},

{name:'zhangsan',level:99,role:3},

{name:'aaa',level:0,role:0},

{name:'blue',level:0,role:0}

]

 

let score = [19,85,99,25,90];

let result = score.map(item=> item >=60 ?'及格':'不及格');

alert(score);//19,85,99,25,90

alert(result);//不及格,及格,及格,不及格,及格

 

比方說：時間，不顯示今天顯示

 

reduce 彙總（本意是減小） 一堆出來一個

算個總數

[12,8000000,59999] => 8060011

 

let arr = [12,69,180,8763];

//tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

//alert(tmp+','+item+','+index); //12,69,1 undefined,180,2 undefined,8763,3

return tmp+item;

})

alert(result);//9024

 

算個平均數

[12,59,99] => 56.67

 

let arr = [12,69,180,8763];

 

/* //tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

return tmp+item;

})

//alert(result/arr.length);// */

//tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

if(index != arr.length-1){ //不是最後一次

return tmp+item;

}

else{ //最後一次

return (tmp+item)/arr.length;

}

})

alert(result);//2256 算平均值

 

filter 過濾器

 

let arr = [12,5,8,99,27,36,75,11];

let result = arr.filter(item=>item%3==0);

alert(result);//12,5,8,99,27,36,75

 

 

let arr = [

{title:'男士寸衫',price:75},

{title:'女士包',price:57842},

{title:'男士包',price:65},

{title:'女士鞋',price:27531},

];

let result = arr.filter(json=> json.price >=10000);

console.log(result);

 

forEach 循環（迭代）

 

let arr = [12,5,8,9];

 

/* arr.forEach(item=>{

alert(item);

}); */

arr.forEach((item,index)=>{

alert(index+':'+item);

});

 

5.字符串

 

startsWith/endsWith

字符串模板：`${a}xxx${b}`

 

1).多了兩個新方法

 

startsWith

 

endsWith

 

2).字符串模板

字符串鏈接

 

i.直接把東西塞到字符串裏面 ${東西}

ii.能夠折行

 

6.面向對象

 

ES6面向對象

1.class 關鍵字、構造器和類分開了

2.calss 裏面直接加方法

 

/* 老的寫法，類和構造函數都是User

function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass(); */

 

//新的寫法 構造器和類分開了

class User{

//構造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass();

 

繼承:

 

super--超類 = 父類

 

ES6（ES2015）--IE10+、Chrome、FireFox、移動端、NodeJS

 

編譯、轉換

1.在線轉換

2.提早編譯

 

babel = browser.js

 

ES6:

1.變量

var

1.能夠重複聲明 (C#,java裏不能夠)

2.沒法限制修改

PI=3.1415926

3.沒有塊級做用域

4.var的做用域是函數

{

var a= 1;

}

在外面能夠用a

 

let 不能重複聲明，變量-能夠修改,有塊級做用域

const 不能重複聲明，常量-能夠修改,有塊級做用域

 

 

2.函數

 

箭頭函數

function 名字(){

 

}

 

()=>{

 

}

1).若是隻有一個參數，()能夠省

2).若是隻有一個return,{}能夠省

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

()—只有一個參數（能夠省略）

{}—只有一個return（能夠省略）

 

let arr = new Array();

let arr = [];

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

函數的參數

1).參數擴展/數組展開

2).默認參數

 

參數擴展

1).收集參數

show(a,b,...args){} //args能夠任意命名

 

*Rest Parameter必須是最後一個（ Rest parameter must be last formal parameter）

2).展開數組

...arr => 1,2,3

*展開後的效果，跟直接把數組的內容寫在這兒同樣

 

let arr1 = [1,2,3];

let arr2 = [5,6,7];

 

let arr = [...arr1,...arr2] <=> let arr = [1,2,3,5,6,7]

 

 

function show(...args){ //...args爲數組

fn(...args); //<=> fn(12,5)

}

 

function fn(a,b){

alert(a+b);

}

 

show(12,5);//17

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

默認參數

$('#div1').animate({width:'200px'});//有默認的時間

$('#div1').animate({width:'200px'},1000);

 

function show(a,b=5,c=12){

console.log(a,b,c);

}

show(99);//a=99,b=5,c=12

show(99,19,88);//a=99,b=19,c=88

 

 

3.解構賦值：

 

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

 

左右結構同樣

右邊是個合法的東西

聲明、賦值一次完成

 

1).左右兩邊結構必須同樣

 

let [a,b] = {a:12,b:5};

console.log(a,b);//報錯

2).右邊必須是個東西

 

let {a,b} = {12,5};//出不來，右邊不是一個東西，不是數組，也不是json

console.log(a,b);

3).聲明和賦值不能分開（必須在一句話裏完成）

let [a,b];

[a,b] = [12,5];

console.log(a,b);//出錯

 

 

let [a,b,c] = [1,2,3];

let {a,c,d} = {a:12,c:5,d:6};

 

let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(a,b,n1,n2,n3,num,str);

 

//粒度

let [json,arr,num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(json,arr,num,str);

 

4.數組

 

map 映射 一個對一個

 

let aItems = [];

for (let i = 0; i < this.props.arr.length; i++) {

aItems.push(<Item str={this.props.arr[i]}></Item>);

 

}

<==>

let aItems = this.props.arr.map(a=><Item str={a}></Item>)

 

 

 

[12,58,99,86,45,91]

[不及格,不及格,及格,及格,不及格,及格]

 

[45,57,135,28]

[

{name:'blue',level:0,role:0},

{name:'zhangsan',level:99,role:3},

{name:'aaa',level:0,role:0},

{name:'blue',level:0,role:0}

]

 

let score = [19,85,99,25,90];

let result = score.map(item=> item >=60 ?'及格':'不及格');

alert(score);//19,85,99,25,90

alert(result);//不及格,及格,及格,不及格,及格

 

比方說：時間，不顯示今天顯示

 

reduce 彙總（本意是減小） 一堆出來一個

算個總數

[12,8000000,59999] => 8060011

 

let arr = [12,69,180,8763];

//tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

//alert(tmp+','+item+','+index); //12,69,1 undefined,180,2 undefined,8763,3

return tmp+item;

})

alert(result);//9024

 

算個平均數

[12,59,99] => 56.67

 

let arr = [12,69,180,8763];

 

/* //tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

return tmp+item;

})

//alert(result/arr.length);// */

//tmp是中間結果,item是項，index是下指標 1,2,3

let result = arr.reduce(function(tmp,item,index){

if(index != arr.length-1){ //不是最後一次

return tmp+item;

}

else{ //最後一次

return (tmp+item)/arr.length;

}

})

alert(result);//2256 算平均值

 

filter 過濾器

 

let arr = [12,5,8,99,27,36,75,11];

let result = arr.filter(item=>item%3==0);

alert(result);//12,5,8,99,27,36,75

 

 

let arr = [

{title:'男士寸衫',price:75},

{title:'女士包',price:57842},

{title:'男士包',price:65},

{title:'女士鞋',price:27531},

];

let result = arr.filter(json=> json.price >=10000);

console.log(result);

 

forEach 循環（迭代）

 

let arr = [12,5,8,9];

 

/* arr.forEach(item=>{

alert(item);

}); */

arr.forEach((item,index)=>{

alert(index+':'+item);

});

 

5.字符串

 

1).多了兩個新方法

 

startsWith

 

endsWith

 

2).字符串模板

字符串鏈接

 

i.直接把東西塞到字符串裏面 ${東西}

ii.能夠折行

 

6.面向對象

 

class Test{

constructor(){

this.xxx=

}

 

方法1(){

 

}

方法2(){

 

}

}

 

class Cls2 extends Cls1{

constructor(){

super();

}

}

 

 

 

 

ES6面向對象

1.class 關鍵字、構造器和類分開了

2.calss 裏面直接加方法

 

/* 老的寫法，類和構造函數都是User

function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass(); */

 

//新的寫法 構造器和類分開了

class User{

//構造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass();

 

繼承:

 

super--超類 = 父類

 

//老的寫法，繼承

/* function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

function VipUser(name,pass,level){

User.call(this,name,pass);

this.level = level;

}

 

VipUser.prototype = new User();

VipUser.prototype.constructor = VipUser;

 

VipUser.prototype.showLevel = function(){

alert(this.level);

}

 

var v1 = new VipUser('blue','123456',3);

v1.showName();

v1.showPass();

v1.showLevel(); */

 

//新的寫法 構造器和類分開了

class User{

//構造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

class VipUser extends User{

//構造器

constructor(name,pass,level){

super(name,pass);//執行父類的構造函數

this.level = level;

}

 

showLevel(){

alert(this.level);

}

}

 

var v1 = new VipUser('blue','123456',3);

v1.showName();

v1.showPass();

v1.showLevel();

 

面向對象的應用-React

 

React:

1.組件化-class

2.強依賴JSX(==babel==browser.js)

 

JSX -JS的擴展版

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

 

7.JSON

 

JSON.stringify({a:12,b:5}) => '{"a":12,"b":5}'

JSON.parse('{"a":12,"b":5}')=> {a:12,b:5}

 

1.JSON對象

JSON.stringify stringify:字符串化,變成字符串

JSON.parse;//解析

 

2.簡寫

名字和值(key和value)同樣，留一個就行

let a = 12;

let b = 5;

 

//let json = {a:a,b:b,c:55};//key和value同樣

let json = {a,b,c:55};//key和value同樣

 

console.log(json);

 

 

方法 :function 一塊刪除

let json = {

a:12,

/* show:function(){

alert(this.a);

} */

show(){ //去掉:function

alert(this.a);

}

};

json.show();

 

 

json的標準寫法：

1.只能用雙引號

2.全部的名字都必須用引號包起來

 

{a:12,b:5} 錯

{"a":12,"b":5} 對

 

{a:'abc',b:5} 錯

{"a":"abc","b":5} 對

 

8.Promise---------承諾

 

封裝異步操做

Promise.all([]);

 

 

異步:操做之間沒啥關係，同時進行多個操做。

同步:同時只能作一件事

 

異步:代碼更復雜

同步:代碼簡單

 

異步：

ajax('/banners',function(banner_data){

ajax('/hotItems',function(/hotitem_data){

},function(){

alert('讀取失敗');

});

 

},function(){

alert('讀取失敗');

});

 

同步：

let banner_data = ajax_async('/banners');

let hotitem_data = ajax_async('/hotItems');

 

Promise--------- 消除異步操做

* 用同步同樣的方式，來書寫異步代碼

 

Promise到底怎麼用

 

<script src="jquery.js"></script>

<script>

//reslolve:解決,reject：拒絕

let p = new Promise(function(reslolve,reject){

//異步代碼

//reslolve---成功了

//reject ----失敗了

 

alert(reslolve);

 

$.ajax({

url:'data/arr.txt',// [12,5,8,9,22,33,44]

dataType:'json',

success(arr){

reslolve(arr);

},

error(err){

//alert('錯了');

reject(err);

}

});

});

//then而後，p執行有結果，而後

p.then(function(arr){

alert('成功'+arr);

},

function(err){

console.log(err);

alert('失敗了'+err);

});

</script>

 

有了Promise以後的異步：

Promise.all([$.ajax(),$.ajax()]).then(results=> {

//對了

},error=>{

//錯了

});

race(競賽，賽車，)

Promise.all 都，一個都不能少，&的含義

Promise.race 競速 同時讀五個資源，誰先來就用誰的

 

 

9.generator --生成器

 

function *show(){

yield

}

 

 

generat --生成

 

普通函數 ---一路到底

generator函數 ---中間能停，踹一腳走一步

 

function *show(){

alert('a');

 

yield;//放棄，暫時放棄執行

 

alert('b');

}

let genObj = show();

 

//console.log(genObj);

genObj.next();

genObj.next();

 

yield傳參

 

yield返回

 

 

10.模塊化