前兩個月看了一套es6的教程，現在將當時我做的筆記分享出來，與大家一起分享，我的不足之初也希望大家可以指出來。雖然簡單學過一遍，但是我項目中用到的也就const，let，解構賦值，默認參數，箭頭函數，promiss，模板字符串差不多這幾個吧，其他的還不是很了解。現在再拿出來結合阮一峰老師的書再重新的學習一遍。

ES6

• npm install babel-cli -g

• npm install babel-cli babel-preset-es2015 --save-dev

• babel es6.js -w -o es5.js

es6項目構建

• 基礎架構

• 任務自動化(gulp，減少人工操作，提高效率)

  • 文件合並，項目依賴

• 編譯工具(babel（es6->es5),webpack(模塊化，項目依賴))

• 代碼實現

基礎架構

• 業務邏輯：頁面交互

• 自動構建

  • 編譯 1.編譯到es5/3，為了IE8要到es3

  • 輔助

    1. 自動刷新：js修改->自動編譯->刷新瀏覽器

    2. 文件合並

    3. 資源壓縮: js ,css,圖片轉base64編碼

• 服務接口

  • 數據

  • 接口

任務自動化gulp

• 什麽是任務自動化

• 什麽是gulp：通過流方式操作文件，快，用來解決自動化構建工具，增強構建流程，背後是nodejs，提供多種插件，通過不同task組合去完成更加復雜的東西。

• glup作用

• 了解如何使用gulp完成任務自動化：看文檔，API，插件

編譯工具

• babel（JavaScript編譯器），webpack解決模塊化

• babel核心用法

• 了解webpack及webpack-stream作用，後者是webpack對於gulp的支持

代碼實現

• 創建es6前端工程

• 完成目錄結構，自動構建。服務器搭建

實踐

• 三個板塊，前端代碼，css，js模板，服務器，前端編譯，服務器定時刷新

1. npm install express -g //安裝最新版

2. npm install -g express-generator

• npm package.json

• .babelrc babel

es6語法

let:

• 塊兒級作用域

• 嚴格模式

• es6強制嚴格模式

• 變量未聲明不能引用,變量不可以重復聲明

const

• 聲明必須賦值，不可以更改

• 對象存儲的是指針，值可以變

解構賦值

1. 解構賦值

2. 解構賦值分類

   • 數組解構賦值（重點)

     • [a,b]=[1,2],兩邊都是數組

     • [a,b,c=3]=[1,2] 解構沒有成功配對為undfine默認值

     • [a,b,...rest]=[1,2,3,4,5,6] reset為數組

     • （{a,b}={a:1,b:2})

   • 對象解構賦值（重點)

         {
         let o={p:43,q:true}
         let {p,q}=0 //p=43 ,q=true
         }
     

     • 默認值

   • 字符串解構賦值

   • 布爾值解構賦值

   • 函數參數解構賦值

   • 數值解構賦值

3. 應用場景

• 變量的交換

  {
      let a=1;
      let b=2;
      [a,b]=[b,a];
  }
  

  {
      function f(){
          return [1,2]
      }
      let a,b
      [a,b]=f();
  }
  

  {
      function f(){
          return [1,2,3]
      }
      let a,b
      [a,,b]=f(); //a=1,b=4
  }
  

  {
      function f(){
          return [1,2,3]
      }
      let a,b
      [a,...b]=f(); //a=1,b=4
  }
  

塊兒作用域隔離變量

• 對象解構賦值

  {
      let metaData={
      title:‘abc‘,
      test:[{
          title:‘test‘,
          desc:‘description‘
          }]
      }
      let {title:esTitle,test:[{title:cnTitle}]}=metaData //abc test
  
      }
  

正則

1. 構造函數的變化

   {
       //es5寫法
       let regex=new RegExp(‘xyz‘,‘i‘);
       let regex2=new RegExp(/xyz/i);
       console.log(regex.test(‘xyz123‘),regex2.test(‘xyz123‘))
   
       //es6
       let regex3=new RegExp(/xyz/ig,‘i‘); //第二個修飾符會覆蓋前面正則的修飾符
       console.log(regex3.flags); //flags新增屬性，用於獲取修飾符
   }
   

2. 正則的方法擴展

3. u修飾符(Unicode),正則在處理Unicode的特征值

   {
       
       console.log(‘u-1‘,/^\uD83D/.test(‘\uD83D\uDC2A‘));  //把四個字節當成兩個字符字母
       console.log(‘u-2‘,/^\uD83D/u.test(‘\uD83D\uDC2A‘));  //把四個自己當成一個字符
       console.log(/\u{61}/.test(‘a‘));   //false
       console.log(/\u{61}/u.test(‘a‘));   //true 加u才可以使{}內編碼被識別
       //.只是可以識別小於0xffff的unicle字符，如果編碼超過兩個字節無法識別
       console.log(‘\u{20BB7}’); 
       let s=‘‘;
       console.log(‘u‘,/^.$/.test(s))  //false.沒有直接匹配
       console.log(‘u-2‘,/^.$/u.test(s))  //true
   }
   
   

   • 字符串中有大於兩個字節的，一定要加上u修飾符，才可以正確識別，否則無法處理

   • 換行符，回車符，行分隔符，段分隔符，.也不可以識別

4. y修飾符

   {
       let s=‘bbb_bb_b‘;
       let a1=/b+/g;
       let a2=/b+/y;
       console.log(‘one‘,a1.exec(s),a2.exec(s));
       console.log(‘two‘,a1.exec(s),a2.exec(s));
       //g,y都是全局匹配，g是從上一次匹配的位置繼續尋找，不強調必須在匹配的下一個，中間任何位置都可以，y必須是緊跟著的才算。
       console.log(a1.sticky,a2.sticky);//判斷是否開啟了y修飾符的模式
   }
   

5. s修飾符（只是題提案，沒有真正實現)

   • . z在s修飾符下可以識別 換行符，回車符，行分隔符，段分隔符。 6.總結

• 構造函數

• 字符串原來使用的跟正則相關的方法，現在都是隱形調用的正則對象的方法

• y和g的區別，以及y的點是下一個開始

• u修飾符的使用情況

• s修飾符作用

字符串擴展

1. Unicode表示法

   {
       console.log(‘a‘,`\u0061`);
       console.log(‘s‘,`\u20BB7`); //會當成兩個字符前四個和7，用大括號抱起來解決
       console.log(‘s‘,`\u{20BB7}`);
   } 
   {
       let s=
       s.codePointAt(0)  //取碼值
       Srtring.fromCharCode("0x20bb7");  //es5不能處理unicode亂碼
       String.fromCodePoint("0x20bb7")     //es6 可以
   }
   

2. 遍歷接口

   {
       let s=
       for 循環
       //es6
       for(let code of str){
           console.log(code)
       }
   }
   

3. 模板字符串

• 數據和模板拼成帶結果的字符串

{
    let name="list";
    let info="hellow word";
    let m=`i am $(name),$(info)`;
}

4. 新增方法（10種)

   • str.includes("c");

   • str.startsWith("");

   • str.endsWith("");

   • str.repeat(2)

   • ‘1‘.padStart(2,‘0‘) es7:要滿足兩個長度，不夠用零部

   • ‘1‘.padEnd(a,‘0‘)

   //標簽模板，過濾字符串，處理多語言轉換
   {
       let user={
           name:‘list‘,
           info:‘hello word‘
       };
       console.log(abc`i am $(user.name),$(user.info)`);
       function adb(s,v1,v2){
           console.log(s,v1,v2)
           return s+v1+v2;
       }
   }
   

   • String.rawHi\n$(1+2)) //raw: 對所有//進行轉意，使用頻率不高

• 註意：有幾個方法是es7提案，需要安裝補丁庫，npm install babel-polyfill --save-dev

數值擴展

1. 新增方法

   • 二進制以0b開頭，b小寫大寫均可

   • 八進制用0o開頭；

   • Number.isFinite(15) //判斷數是否有盡

   • Number.isNaN:判斷是不是數

   • Number.isInteger(25) //25.0是整數，不是數返回false

   • Number.MAX_SAFE_INTEGER

   • Number.MIN_SAFE_INTEGER

   • Number.isSafeInteger(10)

   • Math.trunc(4.1) //取整數，知取整數部分

   • Math.sign(5) //返回+-1/0 判斷是不是正數，嘗試轉換，NaN

   • Math.cbrt(-1) //返回立方根

   • 三角函數，對數

2. 方法調整

數組擴展

• Array.from：把偽數組，集合轉換為數組

• Array.of(3,4,7,9,11):一組數據變量轉換為數組類型

  //1.
  let p=document.querySelectorAll(‘p‘);
  let pArr=Array.from(p);
  pArr.forEach(function(item){
      console.log(item.textContent)
  })
  //2.轉換同時進行了白遍歷
  Array.from([1,3,5],function(item){return item*2})
  

• copyWithin:頻率不高

  [1,2,3,4,5].copyWithin(0,3,4) //替換位置從零開始，讀取數據從三開始，
  

• find\findIndex

  [1,2,3,4].find(function(item){
      return item>3; //找到第一個就停止，返回的是value
  })
  [1,2,3,4].findIndex(function(item){
      return item>3; //找到第一個就停止，返回的是下標
  })
  

• fill

  [1,‘a‘,undefined,fill(7)]:數組內被替換成7
  [‘a‘,‘b‘,‘c‘].fill(7,1,3):數組，從第一個開始換到第三個
  
  

• entries\keys\values

  • values需要開啟兼容

  for(let index of [‘1‘,‘c‘,‘ks‘].keys()){
      console.log(index) //返回數組下標的集合，values是取值
  }
  for(let [index,value] of [‘1‘,‘c‘,‘ks‘].entries()){
      console.log(index,value) //返回數組下標的集合，values是取值
  }
  
  

• inludes

  [1,2,NaN].includes(1);
  [1,2,NaN].include(NaN):可以做到
  

函數擴展

1. 參數默認值

   {
       function test(x,y=‘world){
           console.log(‘默認值‘,x,y)
       }
       test(‘hello‘) //默認值helloworld
   }
   //註意有默認值的必須在後面
   

2. rest函數:不確定輸入參數時，將其轉化為數組

   {
       function test3(...arg){
           for(let v of arg){
               console.log(‘rest‘,v)
           }
       }
       test3(1,2,3,4,‘a‘);
   }
   

3. 擴展運算符:把數組轉換成離散值

   ...[1,2,4]
   

4. 箭頭函數：定義時，es5是調用時 函數名 參數(沒有的話用() 返回值 要註意this的綁定

   {
       let arrow = v => v*2;
       console.log(arrow(3))
   }
   

5. this綁定：重點補充箭頭函數this的指向

6. 尾調用，存在於函數式編程，一點，函數的最後一句是不是函數,提升性能，建議如果在性能優化過程中覺得某一過程是不斷嵌套別的函數，或者說依賴於另一個

   {
       function tail(x){
           console.log(‘tail‘,x);
       }
       function fx(x){
           return  tail(x);
       }
       fx(123);
   }
   

對象擴展（指Object)

1. 簡潔表示法

   {
           //簡潔表示法
           let o=1;
           let k=2;
           let es5={o:o,k:k}
           let es6={o,k}
           
           let es5_method={
               hello:function(){
           }
           }
           let es6_method={
               hello(){
               }
           }
   }
   

2. 屬性表達式

   let a=‘b‘;
   let es5_obj={
       a:‘c‘
   }
   //es6key可以用表達式,變量
   let es6_obj={
       [a]:‘c‘;
   }
   

3. 擴展運算符:es7提案支持不好 let {a,b,...c}={a:‘test‘.b:‘kill‘,c:‘add‘,d:‘ccc‘}

4. Object新增方法

   1. Object.is(‘abc‘,‘abc‘);功能上等同於===

   2. Object.assign({a:‘a‘},{b:‘b‘}) //返回生成的一個新的對象，是淺拷貝，只拷貝地址，只拷貝自身的，繼承的和不可枚舉的不考唄

      for(let [key,value] of Object.entries(test)){
          
      }
      

Symbol數據 類型

1. Symbol概念：提供獨一無二的值，聲明的值不重復，不相等

   let a1=Symbal();
   let a2=Symbol.for(‘a3‘);
   

2. Symbol作用 for in let of拿不到，要通過Object.getOwnPropertySymbols()返回數組，或Reflect。ownKeys

數據解構

1. Set：相對於數組，key不可以重復,主要方法add delete ,clear,has

   let list=new Set();
   list.add(5);
   list.size();
   let  arr=[1,2,3,4,5];
   let lisrt= new Set(arr);
   //添加重復的不會生效，可以用於數組的去重；
   let arr=[1,2,3,4,1,2];
   let new=new Set(arr);
   
   for (let key of list.keys()){
   
   }
   for (let value of list.values.value()){
   
   }
   for (let value of list.values()){
   
   }
   for (let value of list.entries()){
   
   }
   list.forEach(function(item){
   
   })
   

2. WeakSet:支持的數據類型不一樣只可以是對象，是弱引用，添加的對象只是地址引用，不會檢測地址是否被回收，沒有clear方法 size屬性，不可以遍歷

3. Map：相對於Object，key可以不是string

   let map=new Map();
   let arr=[‘123‘];
   map.set(arr,456);
   let map=new Map([[‘a‘,123],[‘b‘:456]]);
   

   size(),get(),delete(),clear()

4. WeakMap:接受的key必須是對象，沒有size，不能clear，不能遍歷

數據解構2

1. Map和Array對比

   • 增：push/unshift set

   • 查 find返回值 has()返回布爾值

   • 改 foreach判斷存在->修改 set

   • 刪 findindex->刪除 delete

2. Set與Array對比

   • 增 push/ add對象

   • 查 find has（) 對象要先保存

   • 改 forEach forEach

   • 刪 forEach forEach->delete item

3. Map,Set,Object 對比

   • 增 map.set(‘t‘,1) set.add({‘t‘:1}) obj[‘t‘]=1

   • 查 map.has(‘t‘) set.has(item) ‘t‘ in obj

   • 改 set(‘t‘,2) item.t=2 obj[‘t‘]=2;

   • 刪 map.delete(‘t‘)成本最低 set.delete(item) delete obj[‘t‘]

4. 總結：能用map不用數組，要求唯一性set ，放棄object和array

Proxy 和 Reflect

1. Proxy 和 Reflect的概念

2. Proxy 和 Reflect的適用場景

• 數據校驗

類

1. 基本語法

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
}
let v_parent=new Parent(‘v‘);

2. 類的繼承

class Child extends Parent{
    construct(name=‘child){
        super(name);  //為空使用父類默認值,必須第一行
        this.type=‘child‘;
    }

}

3. 靜態方法:通過類去調用，而不是類的實例

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    static tell(){

    }
}
Parent.tail();

4. 靜態屬性

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    
}
Parent.type="test";
console.log(Parent.type)

5. getter setter

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    get longName(){
        return this.name;
    }
    set longName(value){
        this.name=value;
    }
}

Promise

1. 什麽是異步（回調和事件，Promise)

2. Promise的作用

3. Promise的基本用法

{
    let ajax=function(){
        console.log(‘執行‘)；
        return new Primise(function(resolve,reject){
            setTimeout(function(){
                    resolve();
                },1000)
        })
    }
    ajax().then(function(){

    })
}

Iterator和for of

1. Iterator接口

{
    let arr=[‘hello‘,‘word‘]
    let map=arr[Symbol.iterator]();
    map.next();
    map.next();
}

2. Iterator基本用法

3. for of

Generaror

1. 基本概念：異步編程的一種解決方案,返回的是Iterator接口 調用next()依此執行yield

{
    let obj={};
    obj[Symbol.iterator]=function*(){
        yield 1;
        yield 2;
        yield 3;
    
    }
    for (let value of obj){
        console.log()
    }
}

2. next函數的用法

{
    let atate=function*(){
        while(1){
            yield ‘A‘;
            yield ‘B‘;
            yield ‘C‘;
        }
    }
    let status=state();
    console.log(status.next())
}

3. yield*的語法

Decorator(修飾器是一個函數，修改類的行為)

• 需要額外插件：npm install babel-plugin-transform-decorators-legacy --save-dev .babelrc加入插件

1. 基本概念

• 擴展類的功能

2. 基本用法

{
    let readonly=function(target,name,description){
        description.writable=false;
        return descriptor;
    }
    class Test{
        @readonly
        time(){
        return ‘2018-03-11‘
        }
    }
}

我的es6學習筆記