ES6語法 Promise Iterator

類和對象

基本定義：

class Parent{
  constructor(name='lmx'){  //name= 默認值
    this.name=name
  }
}
let v_parent = new Parent('v');
console.log(v_parent); 
//輸出Parent {name: "v"}

繼承

class Parent{
  constructor(name='lmx'){
    this.name=name
  }
}
class Child extends Parent{
  constructor(name=’child’){
    super(name);  //若是super中沒有參數則都按照父類的默認值
  }
}
console.log(new Child())

getter和setter

class Parent{
  constructor(name='lmx'){
    this.name=name
  }
}
get longName(){
  return ‘mk’+this.name;
}
set longName( val){
  this.name = val
}
let v = new Parent();
console.log(v.longName())  //調用get方法
v.longName = ‘hello’   //調用set方法
console.log(v.longName())  

靜態方法：static定義的是類的方法只有類能調用

class Parent{
constructor(name='lmx'){
this.name=name
}
static tell(){
  console.log(‘tell’)
}
Parent.tell()
}

靜態屬性：

ES6明確規定，Class內部只有靜態方法，沒有靜態屬性，可是能夠經過  類名.變量  來定義

class Parent{
  constructor(name='lmx'){
    this.name=name
  }
}
Parent.abc=’123’ 

 

Promise

Promise.all([ ]).then() 表示把多個Promise實例當作一個Promise實例，當全部Promise實例狀態發生改變以後，新的Promise才能發生改變，即當三個loadImg實例都加載完以後纔會觸發Promise.all方法，纔會then，才執行showImg

//全部圖片加載完了以後才一塊兒顯示
function loadImg(src){ 
　　return new Promise((resolve,reject)=>{ 
　　　　let img = document.createElement('img');
　　　　img.src= src; 
　　　　img.onload = function(){ resolve(img) };
　　　　img.onerror = function(){ reject(err)} 
　　})
}
function showImg(imgs){
　　imgs.forEach(item=>{
　　　　document.body.appendChild(item)
})
};
Promise.all([
　　loadImg('http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'),
　　loadImg('http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'),
　　loadImg('http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg')
]).then(showImg)

Promise.race ([ ]).then()  多個實例中有一個狀態率先改變以後，race實例會改變，其餘的便忽略無論了

//只要有圖片加載出來了就顯示
function loadImg(src){ 
　　return new Promise((resolve,reject)=>{ 
　　　　let img = document.createElement('img');
　　　　img.src= src; 
　　　　img.onload = function(){ resolve(img) };
　　　　img.onerror = function(){ reject(err)} 
　　})
}
function showImg(imgs){
　　imgs.forEach(item=>{
　　　　document.body.appendChild(item)
　　})
};
Promise.race([
　　loadImg('http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'),
　　loadImg('http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'),
　　loadImg('http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg')
]).then(showImg)

 

Iterator接口

在數組中的應用

let arr = ['hello','world']; 
let map = arr[Symbol.iterator]();
console.log(map.next());
console.log(map.next());
console.log(map.next());
//輸出，done變爲true以後循環截止

 

自定義iterator接口

for...of循環

let obj = {
　　start:[3,5,6],
　　end:[4,8,9], 
　　[Symbol.iterator](){   //iterator小寫
　　　　let self= this; 
　　　　let index = 0; 
　　　　let arr = self.start.concat(self.end);
　　　　let len = arr.length; 
　　　　return{ 
　　　　　　next(){ 
　　　　　　　　if(index<len){ 
　　　　　　　　　　return {
　　　　　　　　　　　　value:arr[index++], 
　　　　　　　　　　　　done:false} 
　　　　　　　　}else{ 
　　　　　　　　　　return {
　　　　　　　　　　　　value:arr[index++],
　　　　　　　　　　　　done:true
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　}  
　　} 
} ; 
for(let key of obj){
　　console.log(key)
}