es6經常使用語法和特性

簡介

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

 

let 命令

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

一、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 聲明的變量在編譯後至關於被改爲了其餘變量，因此在外部是訪問不到的。

二、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

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

 

二、對象的解構賦值

示例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) 調用，返回一個遍歷器對象

 

箭頭函數

　　箭頭函數的形式爲：() => { }，前面的圓括號是參數列表，後面的大括號是函數體，箭頭函數和普通函數有如下幾點不一樣：

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

二、箭頭函數不能夠看成構造函數

三、箭頭函數不能夠使用 arguments 對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替

四、箭頭函數沒有本身的 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);