? ? ? ?今天接著學(xué)習(xí)ES6?。?！接著上次來學(xué)習(xí)
第五個知識點：(...)拓展運算符
? ? ? ? ?es5中賦值數(shù)組的方法：
? ? ? ? ? ? ? ?a)通過for循環(huán)
? ? ? ?
? ? ? ? ? ? ? b)數(shù)組中的方法：Array.from();
? ? ? ? ? ? ? ? ? ? ? ? ??
? ? c) es6中拓展運輸符復(fù)制數(shù)組的方法
拓展運輸符還可以配合數(shù)組使用：如下：
第六個知識點：es6中的for of循環(huán)
? ? for of循環(huán)： 可以循環(huán)數(shù)組，不能循環(huán)json
? ? ? ? ? ? ? ? ? ? ? ? ? ? 真正的目的為了循環(huán)map對象
? ? ? ? ? ? ? ? ? ? ? ?遍歷（迭代，循環(huán)）整個對象，表現(xiàn)類似for in
第七個知識點：Map對象
? ? ? ? 和json相似，也是一種key-value形式
? ? ? ? ?Map對象為了和for of循環(huán)配合而生的
var map = new Map();
設(shè)置：
map.set(name,value);
獲?。?/p>
map.get(name);
刪除：
map.delete(name);
遍歷map：
不能使用for in，沒有效果
for(var name of map){
console.log(name); ?// a,apple ?b,banana
}
for(var [key,value] of map){
? ? console.log(key,value); // key value
}
原來就是：
for(var name of map.entries()){ ????????//entries()就是map的整體
console.log(name); ?// a,apple ?b,banana
}
只是循環(huán)key
for(var key of map.keys()){ ???//只是循環(huán)key
console.log(key);
}
for(var value of map.values()){? ? //只是循環(huán)value
console.log(value);
}
for....of也可以循環(huán)數(shù)組：
只循環(huán)值：
for(var value of arr){}
只循環(huán)索引：
for(var key of arr.keys()){}
索引和值都循環(huán)：
for(var some of arr.entries()){}
第八個知識點：箭頭函數(shù)
之前：
function show(){
Alert(1);
}
show();
function show(a){
return a;
}
show(12)
function show(a,b){
return a+b;
}
show(12,5);
現(xiàn)在：箭頭函數(shù)：
=>
var show=a=>a; ????????????????function show(a){return a};
var show=(a,b) =>a +b; ??????????function show(a,b){return a+b};
var show=()=>’welcome’; ????????function show(){return‘welcome’}
var show=()=>{ ????????????????function show(){ alert(1); ??}
Alert(1);
}
注意：
This問題，this指向window
Arguments，不能使用了；
第九個知識點：面向?qū)ο?/b>
對象語法簡潔化
? ? ? ? ? ? ? ? ? 單體模式：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Json
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var name=‘a(chǎn)bb’;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var age = 101;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var person={
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?age,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? showName(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showAge(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return this.age;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Alert(person.showName());
es5中的面向?qū)ο?/p>
function Person(name,age){? ? //類，構(gòu)造函數(shù)
this.name = name;
this.age = age;
}
Person.prototype.showName=function(){
return this.name;
};
Person.prototype.showAge=function(){
Return this.age;
}
var p1 = new Person(‘a(chǎn)bc’,10);
Alert(p1.showName());
ES6類class
構(gòu)造函數(shù)constructor生成完實例以后，自己就執(zhí)行的
class Person{ ???//類
? ? ? ? ? ? ? ? ? ? constructor(name,age){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.name=name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.age ?=age;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? showName(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showAge(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return this.age;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?var p1 = new Person(‘a(chǎn)aa’,10);
? ? ? ? ? ? ? ? ? ? ?var p2 = new Person(‘bbb’,20)
? ? ? ? ? ? ? ? ? ? ? ? ?Alert(p2.showName==p1.showName); //true
? ? ? ? ? ? ? ? ? ? ? ?Alert(p1.name); ?//aaa
? ? ? ? ? ? ? ? ? ? Alert(p1.showName()); //aaa
第十個知識點：繼承
之前：子類.prototype = new父類（）;
ES6 :
class Worker extends Person{
? ? ? ? ? ? ? ? ? ? ? ? constructor(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? super() ?//調(diào)用父級構(gòu)造
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? showJob(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return‘你的工作是暫無的’;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? var w1 = new Worker(‘mmm’,56)
? ? ? ? ? ? ? ? ? ? ? ? ? ? Alert(w1.showJob());
? es6之二，到這里就結(jié)束了，還有最有一期的敘述，喜歡的朋友可以繼續(xù)關(guān)注！??！
