javascript-ES6一

let、var、const的區別

let const沒有變量提升
有着嚴格的作用域
同一個作用域下不能重複定義同一個名稱

ES6中的類,其實是函數的一種。class Person{…}做了什麼呢?

  1. 創建一個名爲Person的函數,該函數將成爲類聲明的結果。
  2. 在Person.prototype中存儲了所有方法,例如changeName,同時,constructor屬性也指向Person。
    如果沒有new,無法調用類構造函數。
    類中的方法是不可枚舉的,對於原型中的所有方法,類定義將enumberable枚舉設爲false。
    類總是使用嚴格模式。

之前的的語法類

function Person(name){
this.name=name;
}
//靜態方法
Person.getClassName=function(){
return 'Person';
}
Person.prototype.changeName=function(name){
this.name=name;
}
//var p=new Person('leo');
//console.log(p)
//定義一個新的屬性
Object.defineproperty('Person.prototype','info',{
  get(){
   return 'name'+this.name;
  }
});
//子類
function Son(name,age){
Person.call(this,name);
this.age=age;
}
//繼承原型上的方法
Son.prototype=Person.prototype;
//添加新方法
Son.prototype.changeage=function(){
  this.age=age;
}
var son=new Son('leo',22);
son.changeName('wangsan');
console.log(son.name)//wangsan

es6的定義類

知識點:super的用處:

  • super指的是父類的構造函數,用來改變this指向的,相當於call、apply方法。
  • 爲什麼要調用?如果沒有調用super,直接去獲取this.name是沒有定義的,javascript不會讓你再沒有執行父構造函數就去使用this。
'use strict'
//function Person(name){
//this.name=name;
}
class Person{
  constructor(name){//默認自定加入constructor
  this.name=name;
  }

//靜態方法
//Person.getClassName=function(){
//return 'Person';
//}
static getClassName(){
   return 'Person'
}
//原型上加方法
//Person.prototype.changeName=function(name){
//this.name=name;
//}
changeName(name){
 this.name=name;
}
//定義一個新的屬性
//Object.defineproperty('Person.prototype','info',{
//  get(){
  // return 'name'+this.name;
 // }
//});
get info(){
return 'name'+this.name
}
}
//子類
//function Son(name,age){
//Person.call(this,name);
//this.age=age;
//}
class Son extends Person{
  constructor(name,age){
    super(name);//有extends就固定加上super,super()負責初始化this,相當於call apply  添加都父對象中
    this.age=age;
}
//添加新方法
//Son.prototype.changeage=function(age){
 // this.age=age;
//}
changeage(age){
this.age=age;
}
get info(){
  var info=super.info;
  console.log(info);//父類的
}
}
//var son=new Son('leo',22);
//son.changeName('wangsan');
//console.log(son.name)//wangsan

promise的認識

  • promise.all():將多個promise實例包裝成一個新的promise實例。成功時返回一個數組,失敗時只返回reject的值。輸出結果的順序按照all的順序輸出。適合發送多個請求,並根據請求的順序獲取和使用數據。
  • promise.race():哪個快,就返回哪個。無論失敗還是成功。適合測試接口的反應速度。
function asyncFun(a,b, time){
return new Promise(function(resolve,reject){
if(typeof a !==' Number'||typeof b!=='Number'){
   reject(new Error('no number'));//異常捕獲 通過.catch或者resolve的第二參數捕獲到,兩者區別是:如果在resolve發生錯誤,那麼catch才能捕獲到,then的第二個參數捕獲不到。
   
}
  setTimeout(function(){
   return a+b;
},time);
});

};
//.then無論返回任何都會成爲promise繼續往後走
 asyncFun(1,2).then(function(result){//f返回的是promise對象
   if(result>2){
   return asyncFun(result,2);
},function(err){
  console.log('first:',err);//1.如果捕獲到後面的就不運行了
}

}).then(function(result){
   if(result>4){
   console.log('ok')
   }
}).catch(function(error){
console.log('second:',error); //2.asyncFun(1,'a') no number
});

//promise的all方法 成的話返回的是一個數組。如果有錯也會在catch中捕獲
var promise=Promise.all(asyncFun(1,2),asyncFun(2,3),asyncFun(1,22));
promise.then(function(result){
  console.log(result);//和all中的順序一致 不管時間[3,5,23]
});
//promise的race方法會排序 哪個先得到 就先打印哪個 返回是單一的,如果有錯也會在catch中捕獲
var promise=Promise.race(asyncFun(1,2,50),asyncFun(2,3,20),asyncFun(1,22,22));
promise.then(function(result){
  console.log(result);//5
});
//promise的靜態方法resolve
var promise=Promise.resolve('hello');
//var promise=new Promise(resolve,reject){
// resolve('hello')
//}
promise.then(
function(result){
console.log(result);
});
//promise的reject
var promise2=Promise.reject('error');
promise2.then(null,function(err){
  console.log(err);
})

symbol的認識

*一旦定義常量就不會改變,可以用來做私有變量。
*遍歷需要用Object.getOwnPropertySymbols()
*set 、map 都具有symbol.iterator接口,一個數據結構只要具有symbol.iterator屬性,那麼它就是可遍歷的。iterator(遍歷器)是一種接口,任何數據結構只要部署iterator接口,就可以完成遍歷。可以爲各種數據結構提供統一的遍歷接口。使數據結構中的成員能夠按照某種順序排列。
詳情

/*sybmol的遍歷*/
'use strict';
let name=Symbol('name');
let obj={
age:22,
[name]:'leo'
};
//for(let k in obj){
//console.log(k)
//;}得不到
//console.log(Object.key(obj));false
//console.log(Object.getOwnPropertyNames(obj));false
var key=Object.getOwnPropertySymbols(obj)[0];
console.log(key);//leo
/**symbol.for he syymbol.keyFor*/
'use strict';
let name=Symbol.for('name');
let name2=Symbol.for('name');
console.log(name===name2);//true
console.log(Symbol.keyFor(name));//name 

/*Symbol.iteractor 方法 可以用來遍歷對象中的值   for of 循環可以中途跳出*/
'use srict';
class Users{
constructor(user){//user對象 裏面有name 那怎麼獲取name的值呢
/*user:{
'leo':'14141441','wangsan':'22222'
}*/
  this.user=user;
}
 [Symbol.iterator](){
//返回一個iterator
//獲取user中的值
let self=this;
const names=Object.key(this.user);//遍歷
const length=names.length;//usesr的長度
return {
   next:function(){
   let name=name[i];
   let qq=self.user[name];
   return {value:{name,qq} ,done:i>=length};//value是遍歷的值沒有就是undifined 如果都遍歷完成done爲true
}
}
}
let uu=new Users({'leo':'122222','wangsan':'2333444'});
let iterator=uu[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
}

Generactor函數的認識

generator是生成器
generator函數默認不會執行方法體內代碼,會返回一個指針(指向return/yield),這個指針實現generactor,通過.next可以執行方法體。可以向同步寫法一樣實現異步,但是需要自己寫執行器。可以通過co來簡化執行器。

function * fn(){
  console.log('hello');
  yield1;//result的value爲1,可以是多個值。可以沒有return,如果是return 只能是一個值
}
let it=fn();
let result=it.next();//hello
//console.log(it.next());value:1,done:true
console.log(result);//value:return 回來的值。 done:函數是否執行完畢
/*yield 值默認返回undefined和賦值 只能通過next賦值訪問*/
'use strict';
function * fn(name){
let name= yield _name;//yield 默認始終返回undefined 也就是name是undefined,可以通過next運行時賦值給它使其有返回值
return name;
}
let it= fn('leo');
console.log(it.next());//value:leo,done:true
console.log(it.next['wangsan']);//value:wangsan,done:true


'use strict';
/*yield 語句只能在generator中 即fn 前面必須有*  */
/*yield在什麼位置*/
function * fn(){
  console.log('qq:'+(yield qq));//表達式使用需要使用(),其他時不用
}

/*yield默認情況下返回undefined值,不會拋出異常*/
function * fn(){
let qq=yield;
console.log(qq);
}
let g=fn();
g.next();
try{
g.throw('error');//捕獲到異常 如果內部沒有對異常try catch 會到外面進行處理
}catch(e){
 console.log('error2')}

set認識

通過new set()來創建set對象(類數組),自動去重。

/*set中的方法*/
let st=new Set();
let user={name:'leo',qq:'1222'};
st.add(user).add(user);//可以連續使用add 但是隻保存一個 那NaN時,也是隻能加一個
console.log(st.size);//1
let bool=st.delete(user);
console.log(bool);//true 刪除了
st.add(22);
console.log(st.has(22));//tru判斷有沒有
st.clear();//清空

/*數組去重*/
let arr=[1,2,2,3,4];
Array.from(new Set(arr));//[1,2,3,4] 

/*set對象的遍歷 數組的key==value*/
let st=new Set([1,2,3]);
let keys=st.keys();
for(let k of keys){
console.log(k)
};
/*遍歷2 常用*/
let values=st.values();
for(let v in values){
console.log(v);
}
/* 可以直接遍歷*/
for(let v of st){
  console.log(v);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章