es6學習筆記

夜雨隨風es6學習筆記

變量聲明

• let 聲明塊級做用域 聲明的變量不會被預解析（變量提高）。
• const 聲明常量，聲明後不可修改值，可是能夠修改其屬性和方法。

在全局聲明let、const不會被添加到window，所以運行速度會比var快65%。

字符串模板

• 模板字符串：用於字符串內容和變量的混合鏈接。能保持原有字符格式，保證代碼整潔性。

  let name='yeson';
      let age=22;`
      console.log(`${name}年齡是${age}歲`);
  複製代碼

• 模板字符串不會壓縮內部的換行和空格，只是把變量內容替換掉，保持原有格式輸出。

結構賦值

es結構賦值包括數組結構賦值和對象結構賦值，

• 數組解構賦值是嚴格按照下標一一對應的，若是賦值常量個數不夠，則對應下標變量爲undfined，若是常量個數超出，則會被遺棄。

• 對象結構賦值是根據對象引用的鍵名來實現對應的，能夠無視順序。若是某個變量已經聲明，則不能重複參與結構，解釋引擎會按照重複聲明處理。es6中，禁止任何變量重複聲明。

  let [a,b,c]=[1,2,3,4]
      let {a,b,c}={a:10,b:20,c:30}
      [b,c]=[c,b]//變量值交換
  複製代碼

數組新特性

• 複製數組

  //展開運算符
  let arr=[92,'hello',{key:false}];
  let arr2=[...arr];//淺拷貝
  //arr.from() 將類數組轉化爲數組
  (a,b,c)=>{
      let arr=Array.from(arguments);//[a,b,c]
  }
  複製代碼

• 默認參數

  function fn1(a='默認參數'){
          console.log(a);
  }
  fn1();//'默認參數'
  fn1('傳入參數');//'傳入參數'
  複製代碼

• 不定參

  function fn2(...a){
     console.log(a); 
  }
  fn2(1,2,3);//[1,2,3]
  fn2('hi','yes','pen','apple','orange');//['hi','yes','pen','apple','orange']
  複製代碼

• 擴展參

  let namelist=['李磊','韓梅'];
  function fn3(name1 ,name2){
      console.log(`${name1}和${name2}是很好的朋友！`)
  }
  fn3(namelist);//'李磊和韓梅是很好的朋友！'
  複製代碼

箭頭函數

箭頭函數的設計來自於CoffeeScript，es6添加這一特性的目的是爲了讓函數的聲明更加簡便。

[1,2,3].forEach((x)=>x*x)
複製代碼

類

在es6之前javascript沒有類的概念，實現面向對象繼承的思路是：原型鏈繼承、構造函數繼承、拷貝繼承等幾種方式。它們都不是真正的繼承，會出現子類不必定是父類的實例、子類和父類共享一個實例等奇葩問題。es6所以添加了關鍵字class。

class admin{
    constructor(){
        //
    }
}
class pople extends admin{
    constructor(contents={}){
        super();
        this.name=contents.name;
        this.age=contents.age;
        this.address=contents.address;
    }
    sayhi(){
        console.log(`hi,我是${this.name}，今年${this.age}歲,如今在${this.address}，很高興見到你！`)
    }
}
let body =new pople({
    name:'黃佳'，
    age：'18'
    address：'武漢'
})
body.sayhi();//'hi，我是黃佳，今年18歲，如今在武漢，很高興見到你！'
複製代碼

模塊

es6引入了模塊引用規範

import{sayhi} from './pople.js';
export default sayhi;
複製代碼

使用default導出模塊時，儘可能導出有用模塊，儘量不導出整個對象。若是使用打包工具時，若導出整個對象，將會打包進大量未使用代碼，不利於代碼執行效率和後期代碼優化。

循環和迭代器

• 遍歷數組

//for ..of..遍歷
const arr=[1,2,3,4,5];
for(let iteam in arr ){
    console.log(iteam);
}
//迭代器遍歷
const arr2=[1,2,3,4,5];
let num=0;//計數器
let iteam=arr2[Symbol.iterator]();
num++;
let result =iteam.next();
console.log(result.value,num);//1,2
num=num+15;
result =iteam.next();
console.log(result.value,num);//2,16
num-=16;
result =iteam.next();
console.log(result.value,num);//3,0
num=num+'123';
result =iteam.next();
console.log(result.value,num);//4,'0123'
num=Number(num);
result =iteam.next();
console.log(result.value,num);//5,123
複製代碼

iterator能夠在循環開始後任意位置進行數組的單步循環，中間能夠作其餘操做。能夠理解爲iterator是數組或對象上的一個遊標，每次調用next(),遊標就會向下移動一個單位。Symbol.iterator是object原型上的方法，可用來遍歷一切可遍歷對象。

（未完待續。。。）