ES6

ES6

聲明方式

1.var（原始方式）
- 可以重複聲明
- 不能定義常量 var PI=3.14
- 不支持塊級作用域 if（true）{var a=10}

2.let
3.const

解構

let arr=[1,2,3]
let [a,b,c]=arr;
console.log(a,b,c)

• 解構的時候 ，等號兩邊的結構類似，右邊還必須是一個真實的值
• 默認解構：有值就用沒有就用默認值

模板字符串

1. 可以嵌套變量
2. 可以折行
3. 帶標籤的模板字符串類似於函數調用
   
   • 參數1：文本的數組
   -

let name='zf',age=8;
let desc=`${name}今年${age}`;
function replace(desc){
desc.replace(/\$\{([^>]+)\}/g,function(matched,key){
  return eval(desc)
})
}
console.log(desc)

• map：把老數組裏的每一個元素映射爲一個新數組的每一項
• repeat
• includes
• indexof

展開運算符

...
let arr1=[1,2]
let arr2=[3,4]
let arr3=[...arr1,...arr2]//[1,2,3,4]
//參數1：target  參數2+：數據源
Object.assign(obj3,obj1,obj2)
//解構拼接
obj3={...obj1,...obj2}

函數

1. 必填項不填報錯
2. 某些參數沒有給傳參可以有默認值

function ajax(url=new Error('url不能爲空'),method='GET',dataType='json'){

}

• foreach
• reduce:計算，彙總 把數組中的一堆值計算出來一個值 從左往右

//參數2是初始值
//上一次執行結果會成爲下一次的初始值
//沒有初始值，第一次執行函數 val=第一個元素  item=第二個元素
let arr=[1,2,3]
let result=arr.reduce(function(val,item,index,origin){
    let sum=val+item
    if(index==arr.length-1){
       return sum/arr.length
    }else{
        return sum
    }
},0)
//原理
Array.prototype.reduceRight=function(reducer,intialVal){
   for(let i=this.length-1;i>=0;i--){
     initialVal=reducer(initialVal,this[i],i,this)
   }
   return initialVal;
}

• filter:返回true，此元素保留在新數組，返回false刪除

   //原理
       Array.prototyep.filter=function(fn){
       let  newArr=[];
       for(let i=0;i<this.length;i++){
          let flag=fn(this[i]);
          flag&&newArr.push(this[i])
        }
      }
      //使用
      let arr=[24,56,88,90]
      let arr1=arr.filter(function(item){return item>=60})
      //類數組轉數組
      Array.from(arguments).forEach(function(item){})
      //super
  

箭頭函數

1. 更簡單的聲明函數的方法
2. 只有一個參數可以省略小括號 let double=a=>a*2
3. 只有返回值，沒有別的函數體代碼，可以省略花括號
4. 箭頭函數沒有自己的this會使用上層的this
5. this隨着調用者變化的時候儘量不要使用this

類

1. 以前js裏的類和構造函數是一體的
2. 類裏邊可以定義構造函數,創建一個類的實例的時候會調用構造函數
3. 靜態屬性屬於類，不需要new就可以直接調用

class Parent{
   constructor(name){
      this.name=name   //實例的私有屬性
    }
   getName(){  //實例的公有屬性-》原型上的屬性
    console.log(this.name)
   }
}
let p=new Parent('zf');
p.getName()

生成器（genertor）&&迭代器（Interator）

1. 定義
   
   • 生成器：用來生成迭代器
   • 迭代器：是個對象，可以通過不斷調用方法得到一個結果
2. koa的基礎，以及async await基礎
3. 生成器函數不同於普通函數
   
   • 會返回迭代器
   • 調用中途可以暫停 yield
   • generator+promise可以解決異步問題

function read(books){
    let index=0;
   return {
      next(){
        let done=index==books.length-1
        let value=books[index++]
        return {
            value,done
        }
      }
   }
}
//迭代器:可以不停的調用next方法得到一個結果{value,done}
let it =read('js','node')
//it有一個方法next，每次調用next都會返回一個結果{value,done}
let r1=ir.next
let result;
do{
  resulr=it.next();
  console.log(result)
}while(!result.done)

Promise

1. 是個類，可以創建實例
2. 一般是異步任務，需要很長時間執行
3. 解決回調地獄

4. 三種狀態

   • pending:初始態
   • fulfilled：成功態
   • rejected：失敗態

5. 優點

   • 對象的狀態不受外界影響
   • 一旦狀態改變就不會再變，任何時候都可以得到這個結果
6. 缺點
   
   • 無法取消Promise，一旦新建它就會立即執行，無法中途取消
   • 不設置回調函數會在內部拋出錯誤，不會反應到外部
   • 處於pending狀態無法得知目前進展到哪一個階段
   • 如果某些事件不斷的發生，一般來說，建議使用Stream模式
7. 關於執行順序

let promise =new Promise(function(resolve,reject){
   console.log('Promise')
})
Promise.then(function(){
console.log('resolved')
})
console.log('Hi')
//=>Promise Promise新建後立即執行，所以首先輸出
//=>  Hi  
//=> resolved  then方法指定的回調函數，將當前腳本所有同步任務執行完纔會執行，所以最後輸出

babel-prolyfill對es6的API的支持

其他

深拷貝

let obj=JSON.parse(JSON.stringify(obj1));

function clone(origin){
let newObj={}
    for(let key in origin){
      if(typeof origin[key]=='object'){
           newObj[key]=clone(origin[key])
        }else{
            newObj[key]=origin[key]
        }
    }
    return newObj;
}
let obj6=clone(obj5)

• 作用域
  
  • 全局作用域
  • 函數作用域