es6常用語法和特性

簡介

　　首先，在學習之前推薦使用在線轉碼器 Traceur 來測試 Demo，避免 babel 下的繁瑣配置，從而產生畏難情緒。

 

let 命令

　　在 ES6 之前，JS 只能使用 var 聲明變量，或者省略 var，將變量作為全局變量，ES6 新增的 let 命令用法類似於 var，也是用於聲明變量，不過它們具有以下區別：

1、let 命令聲明的變量的作用域是塊級作用域；var 命令聲明的變量的作用域是函數級作用域，例如：

//ES6

{
  var a = 10;
  let b = 12;
}
console.log(a);  //輸出10
console.log(b);  //輸出undefined

//轉碼后的 ES5

{
  var a = 10;
  var b$__0 = 12;
}
console.log(a);
console.log(b);

可以看到，在塊級作用域中用 let 聲明的變量在編譯后相當於被改成了其他變量，所以在外部是訪問不到的。

2、let 命令不允許有重復聲明的變量，並且變量只能在聲明后使用，否則會報錯，在塊級作用域中，如果使用了 let 命令聲明變量，那在聲明之前稱為這個變量的暫時性死區(temporal dead zone，簡稱 TDZ)，不受外部影響，不能被訪問，例如：

//ES6

var a = 10;
{
  //TDZ 開始
  console.log(a);  //報錯

  let a;  //TDZ結束
  console.log(a);  //輸出undefined

  a = 123;
  console.log(a);  //輸出123
}

在 ES6 標准中對 TDZ 有如下文字說明：

The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.

意思是說由 let 聲明的變量，當它們包含的詞法環境 (Lexical Environment) 被實例化時會被創建，但只有在變量的詞法綁定 (LexicalBinding) 已經被計算后，才能夠被訪問。

//轉碼后的 ES5

目前的編譯器對 TDZ 並不會直接編譯，因為 ES5 標准中原本就沒有這種設計，所以看不到報錯。

 

const 命令

　　const 命令用於聲明一個只讀的變量，必須在聲明的時候初始化，初始化之后不得更改，除此之外，其他與 let 命令基本相同

 

解構賦值

1、數組的解構賦值：

//示例1

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

//示例2，缺省的情況，如果右邊缺省，那么左邊對應缺省的變量值為 undefind；如果左邊缺省，那么右邊對應的值將被忽略

let [a,b,c,d] = [1,2,3];
console.log(a);  //輸出1
console.log(b);  //輸出2
console.log(c);  //輸出3
console.log(d);  //輸出undefined

let [e,,g] = [4,5,6];
console.log(e);  //輸出4
console.log(g);  //輸出6

//示例3，設置默認值，只有在右邊對應的值嚴格為 undefined 時默認值才生效

let [a,b,c=4] = [1,2];
console.log(a);  //輸出1
console.log(b);  //輸出2
console.log(c);  //輸出4

 

2、對象的解構賦值

示例1

let {a,b} = {a:'aaa',b:'bbb'};
console.log(a);  //輸出aaa
console.log(b);  //輸出bbb

示例2，變量名與屬性名不同

let {a:n1,b:n2} = {a:'aaa',b:'bbb'};
console.log(n1);  //輸出aaa
console.log(n2);  //輸出bbb

示例3，設置默認值，只有在右邊對應的屬性嚴格為 undefined 時才生效

let {a:n1,b:n2='ccc'} = {a:'aaa',b:undefined};
console.log(n1);  //輸出aaa
console.log(n2);  //輸出ccc

示例4，因為數組也是一個對象，所以也可以使用對象的方式解構賦值

let {0:first,1:second,2:third,length} = ['a','b','c'];
console.log(first);  //輸出a
console.log(second);  //輸出b
console.log(third);  //輸出c
console.log(length);  //輸出3

示例5，字符串在解構賦值時作為一個類數組的對象，每一個字符對應數組中的每個元素

let [a,b,c] = 'arg';
console.log(a);  //輸出a
console.log(b);  //輸出r
console.log(c);  //輸出g

 

rest 參數和擴展運算符

　　ES6 引入了 rest 參數，形式為 (...變量名)，其中 rest參數搭配的變量是一個數組，可以使用數組的一切操作，主要用於獲取函數多余參數，例如：

function test(a,...b) {
  console.log(b);  //輸出[2,3]
}
test(1,2,3);

值得注意的是 rest 參數之后不能再有其他參數，否則會報錯。

　　擴展運算符，形式為(...)，可以理解為 rest 參數的逆運算，用於將一個數組展開成用空格分隔的參數序列，例如：

let arr = [1,2,3];
console.log(arr);  //輸出[1,2,3]
console.log(...arr);  //輸出1 2 3

擴展運算符並不能用於展開對象中的屬性，這是 ES7 提案，目前並不支持。

 

新的遍歷方法 for...of

　　ES6 中新增了三個方法：entries()、keys() 和 values()，它們都返回一個遍歷器對象，可以用 for...of 進行遍歷，例如：

//數組的遍歷

var arr = ['a','b','c'];
//entries() 用於對鍵值對進行遍歷
for(let [i,e] of arr.entries()) {
  console.log(i + ',' + e);
}
//0,a
//1,b
//2,c

//keys() 用於對鍵名進行遍歷
for(let i of arr.keys()) {
  console.log(i);
}
//0
//1
//2

//values() 用於對鍵值進行遍歷
for(let e of arr.values()) {
  console.log(e);
}
//a
//b
//c

如果不使用 for...of 進行遍歷，也可以手動調用 next() 方法進行遍歷，例如：

var arr = ['a','b','c'];
var keyObj = arr.keys();
console.log(keyObj.next());  //輸出0
console.log(keyObj.next());  //輸出1
console.log(keyObj.next());  //輸出2

　　

//對象的遍歷

同數組一樣，不過是掛載在 Object 對象下，調用方式是使用 Object.entries(obj) 調用，返回一個遍歷器對象

 

箭頭函數

　　箭頭函數的形式為：() => { }，前面的圓括號是參數列表，后面的大括號是函數體，箭頭函數和普通函數有以下幾點不同：

1、箭頭函數的 this 對象是定義時所在的對象，不需要等到運行的時候再去確定

2、箭頭函數不可以當作構造函數

3、箭頭函數不可以使用 arguments 對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替

4、箭頭函數沒有自己的 this 對象，所以也不能使用 apply()，call()，bind()，改變 this的指向

//ES6

function fun() {
  let arrowFun = () => {
    console.log(this.a);
  }
  arrowFun();
}

let obj = { a: 1 }
fun.apply(obj);

//轉碼后的ES5

function fun() {
  var $__1 = this;
  var arrowFun = function() {
    console.log($__1.a);
  };
  arrowFun();
}
var obj = {a: 1};
fun.apply(obj);