ES6學習系列重點針對ES6中新增特性進行學習，分為兩個章節：

• 30分鐘學會ES6 (一)
  本章節主要學習 let，const，template string，變數解構賦值，函式，Set，Map
• 30分鐘學會ES6 (二)
  本章節主要學習 類 和 模組化 。

30分鐘學會ES6 (一)

文章目錄

• 30分鐘學會ES6 (一)
• let，const
• let
• const
• 變數解構賦值
• template string
• 函式相關
• 箭頭函式
• 預設引數
• rest引數
• Set,Map
• Set
• Map

let，const

let和const都是用於定義變數/常量，與以前的var類似，但是在特性上有區別，解決了var之前的一些問題。

let

• 通過let修飾的變數只能在所在塊區域中生效，而var在塊外也可生效。

  • var關鍵字定義的變數

  {
    	var a = 10;
  }
  console.log(a); //10
  

  • let關鍵字定義的變數，只在對應塊內生效，不會到塊外面，也不會影響子塊。

  {
      let b = "hello";
      console.log(b);//hello
  }
  console.log(b);//undefined
  

• 通過let定義的變數可以防止迴圈變數延申到外部。

  • var關鍵詞定義的迴圈變數

  for(var i = 0;i<2;i++){
  console.log(i);
  };
  console.log(“i=”+i); //i=2

  
  - `let`關鍵詞定義的迴圈變數
  
  從下面也可以看出，**通過`let`修飾的迴圈變數與塊結構內的let定義的變數作用域不同** 。
  
  ```javascript
  for(let i = 0;i<2;i++){
    let i = "hello";
    console.log(i); //abc
  }
  console.log(i);//Uncaught ReferenceError: i is not defined
   
  

• 同一個塊結構中不能出現兩次同名的let定義的變數

  • var關鍵詞定義的同名變數

  {
      var i = 10;
      var i = 11;
      console.log("i="+i); //i=11
  }
  

  • let關鍵詞定義的同名變數

  {
      let i = 10;
      let i = 11;
      console.log("i="+i); //Identifier 'i' has already been declared
  }
  

const

const用於定義常量，作用域和let相同，也只會在所在塊結構內部生效。

const定義的變數是指向記憶體地址，所以不可變的是記憶體地址，而不是值。也就是說變數不能重新定義新的物件，但是可以修改對應的值。

• const常量作用域在塊內。

{
    const a = 10;
    console.log(a); //10
}
console.log(a); //a is not defined

• const常量不可新建物件，但是可以修改值。

const a = [];
a = [10];//Assignment to constant variable.
a.push(10);
console.log(a);//[10]

變數解構賦值

可以同時定義多個變數，例如函式同時返回多個值（類似於java的tuple）。這種情況下只要左右引數和值對應即可，通過陣列方式定義。

• 解構陣列

• 設定預設值

let [a,b=10]=[20];
console.log("a="+a); //20
console.log("b="+b); //10

• 解構物件

  解構陣列是通過[]存放對應的變數和值，解構物件則是通過{}存放對應的變數和JSON格式變數。

  let {a,b} = {a:"hello",b:"world"};
  console.log(a+" "+b); //hello world
  
  let {first:f,last:l} = {first:"hello",last:"world"};
  console.log(f+" "+l); // hello world
  
  function a(x,y){
      return {x,y}; //這裡內部是將x,y通過{}包裹轉換成物件{x:x,y:y}
  }
  let {x,y} = a(1,2); //let {x,y}={x:1,y:2}
  console.log("x="+x+",y="+y); //x=1,y=2
  

• 解析json

  let user={name:"zhangsan",age:20};
  let {name,age} = user;
  console.log("name="+name+",age="+age);
  

• 遍歷map

  let map = new Map();
  map.set("name","zhangsan");
  map.set("age",20);
  for(let[key,value] of map){
  	console.log(key+"="+value);
  }
  

template string

基於模板方式輸出字串，類似於artTemplate模板引擎。使用${}引入變數，使用``包裹內容部分。

let user = {name:"zhangsan",age:18};
const html = `
    <label>姓名</label>:${user.name}
    <p></p>
    <label>年齡</label>:${user.age}
`
console.log(html);

函式相關

箭頭函式

類似於java的lambda表示式，只是箭頭是==>，而Java是->。

function handle(func,a,b){
    if(typeof func == "function"){
    	func.call(this,a,b);
    }
}
//原來的
handle(function(a,b){
	console.log(a+b);
},10,20);

//箭頭函式
handle((a,b)=>(console.log(a+b)),10,20);

預設引數

支援在定義函式時，設定引數的預設值，這樣就不用在函式體內判斷a=a||''了。

function test(a=10){
	console.log(a);
}
test(); //10

function fetch(url,option={method:"GET"}){
	console.log(option.method);
}
fetch("http://www.baidu.com"); //GET
fetch("http://www.baidu.com",{method:"POST"}); //POST

rest引數

類似於java的不定長陣列型別String... params，在js中也可以這麼表示...params。

rest引數不能使用預設值

//錯誤!!!
function test(...a=10){ //Rest parameter may not have a default initializer
	console.log(a);
}

//正確
function test(...a){
    console.log(a); //[10, 20, 30]
}
test(10,20,30);

Set,Map

Set

類似於java的set，裡面的值保證唯一。

可以通過for...of...進行遍歷。

//通過新增的方式加入元素
let set = new Set();
[1,2,3,2,3,1].forEach((value,index)=>(set.add(value)));
for(let i of set){
    console.log(i);
}
//通過建構函式加入元素，接受陣列的引數
let set1 = new Set([1,2,3,3,2,1]);
console.log(set1);//1,2,3
//獲取長度
console.log(set1.size);//3
//刪除元素
set1.delete(2);
console.log(set1);//1,3
//判斷元素是否存在
let exist = set1.has(1);
console.log(exist);//true
//清空元素
set1.clear();
console.log(set1);//{}

Map

//新建空物件
let map1 = new Map();
map1.set("name","hello");
map1.set("age",20).set("sex","boy");
console.log(map1);

//通過建構函式入參
let map2 = new Map([["name","hello"],["age",20]]);
console.log(map2);

//判斷是否存在key
console.log("exist key:"+map2.has("name"));

//獲取值
console.log("get value:"+map2.get("name"));

//遍歷
map2.forEach((value,key)=>(console.log(`${key}=${value}`)));

//遍歷key
for(let k of map2.keys()){
    console.log("遍歷key:"+k);
}

//遍歷value
for(let v of map2.values()){
    console.log("遍歷value:"+v);