此文系學習ES6後的自我總結，若有錯誤或者建議可留言告之，不勝感激

更多標準請參考阮一峰大神寫的es6入門 => http://es6.ruanyifeng.com/

let&const

console.log(a); //error
let a=‘xx‘;

• 變量不會提升
• a具有塊級作用域
• 不能通過window.a變量進行訪問
• 使用let的循環中每次的變量都是新生成的 如：for(let a=0;a<len;a++)
• 不管是引用類型還是數值類型都可以改變

const a=‘xx‘,b={name:‘xx‘};

• 變量不會提升
• a為數值類型，不能夠重新賦值
• b為引用類型，可以改變對象裏邊的屬性值 如b.name=‘xxx‘ 但無法重寫 如b={age:18}會引起error

Map&Set

let s=new Set([2,1,3,5,4]);

　s.size // 5

　s.has(1) // true

　s.delete(2); //{1,3,5,4}

　s.has(2) // false

s.add(2).add(1) //{1,3,5,4,2}

• set類似於集合 元素有序(按添加的順序)且唯一 key與value相同 由此可以引出兩種數組去重方法 ps:兩種方式都會改變s

  var s=new Set([2,1,3,3,1,2,4]);
  [...s] //[2,1,3,4]
  Array.from(s) //[2,1,3,4]

  　　

• 可以鏈式調用 如上方代碼所示s.add(2).add(1)
• 使用for...of & for...in的遍歷結果是相同的 不過最好還是使用forEach遍歷
• 可以使用filter和map方法

  let set = new Set([1, 2, 3, 4, 5]);  
  set = new Set([...set].map(x => x * 2));  //{2,4,6,8,10}
  set = new Set([...set].filter(x => (x % 2) == 0)); //{2,4}

• 可以實現集合的操作 如並集、交集

  let a = new Set([1, 2, 3]);  
  let b = new Set([4, 3, 2]);  
    
   
  // 並集  
  let union = new Set([...a, ...b]);  
  // Set {1, 2, 3, 4}  
    
  // 交集  
  let intersect = new Set([...a].filter(x => b.has(x)));  
  // set {2, 3}  
    
  // 差集  
  let difference = new Set([...a].filter(x => !b.has(x)));  
  // Set {1}  

let m=new Map([[‘age‘,18],[‘sex‘,‘male‘]]);

m.size // 2

m.has(‘sex‘) // true

m.get(‘sex‘) // "male"

• map類似於哈斯表 是鍵值對的集合 遍歷順序即為插入的順序
• map內部原理

  let map = new Map();   
  array.forEach(([key, value]) => map.set(key, value)); 

• map的key是嚴格匹配的 除NaN外所有 如false、‘false‘ 視為不同鍵值

  let map = new Map();  
    
  map.set(-0, 1);  
  map.get(+0) // 1 
    
  map.set(true, 1);  
  map.set(‘true‘, 2);  
  map.get(true) // 1  
    
  map.set(NaN, 1);  
  map.get(NaN) // 1 

Map&Set都有四個遍歷屬性：

1. keys()：返回key的遍歷器

2. values()：返value的遍歷器

3. entries()：返回所有元素的遍歷器

4. forEach()：遍歷所有元素

let map=new Map([[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]])
[...map.keys()]  // [‘name‘, ‘age‘, ‘sex‘]    
[...map.values()]  // [‘xx‘, 18, ‘male‘]  
[...map.entries()]  // [[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]]   
[...map]  // [[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]]

set同上

箭頭函數

• this的指向是定義時所在的對象 而不是使用時所在的對象
• 不能用作構造函數 即不能使用new 否則error
• 不能使用arguments

rest參數&擴展運算符&解構賦值

1. rest參數 用擴展運算符接收函數的多余參數，組成一個數組，放在形參的最後，形式如下：

   function foo(a, b, ...args) {
       // TODO
   }

   • rest參數只包括那些沒有給出名稱的參數，arguments包含所有參數；
   • arguments對象不是真正的array，而rest參數是Array的實例，可以直接應用sort, map, forEach, pop等方法；
   • arguments對象擁有一些自己額外的功能。

2. 擴展運算符 將可遍歷對象的每一項都展開表示

   console.log(...[1, 2, 3])  
   // 1 2 3  
   console.log(1, ...[2, 3, 4], 5)  
   // 1 2 3 4 5  

3. 解構賦值 更加方便的聲明變量

   let node = {
       type: "Identifier",
       name: "foo"
   };
   let { type, name } = node;
   
   cosnt[a, b, c, d, e] = ‘hello‘;
   a // h
   b // e
   c // l
   d // l
   e // o
   
   console.log(type); // "Identifier"
   console.log(name); // "foo"
   

模板

1. 模板字符串 使用${變量名} 來拼接字符串 功能上類似於vue的{{}}

   const word = ‘world‘;
   console.log(`hello ${word}`); //hello word

2. 模板語法 使用反引號 即鍵盤上的波浪號

   document.body.innerHTML=`
   <select>
       <option>語文</option>
       <option>數學</option>
       <option>英語</option>
   </select>`

ES6特性·總