ES6中的let/cont、解構賦值和迭代器Interator

ES6中的一些新特性

引入let/const的目的

ES5中的作用域分爲：全局作用域 和 函數作用域。
並沒有塊作用域的概念，ECMAScript 6(簡稱ES6)中新增了塊級作用域。
塊作用域由 { } 包括，if語句和for語句裏面的{ }也屬於塊作用域。

ES5創建作用域的兩種方式：

• 立即執行函數
• try catch語句

在ES6中引入let/const增加塊級作用域的概念，這便於開發者對變量的管理使用，避免變量污染等問題。舉個例子：

例子一：

for(var i = 0; i<5;i++){
    setTimeout(function(){
        console.log(i);
    }, 1000)
}
// 上面的代碼輸出5個5

for(let i = 0; i<5; i++){
    setTimeout(()=>{
        console.log(i);
    }, 2000)
}
// 上面的代碼依次輸出0，1，2，3，4

let聲明的變量在塊級作用域中，但是var生命的變量在全局作用域下，當執行setTimeout時，全局域下的i值已經變成5。

例子二：

let a = 1;
console.log(`a is ${a}`);
let a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 'b';
const c; // Uncaught SyntaxError: Missing initializer in const declaration
c = 'c'; 

用let/const聲明過的變量，不能再次聲明，主要是防止變量名濫用，導致相互覆蓋。
而用const聲明的變量必須立即賦值，這種限制也符合const本身的意義（不需要二次賦值，因此最好聲明的時候賦值，便於維護）。

例子三：

var a = 1;
console.log(window.a); // 1

let b = 1;
console.log(window.b); // undefined

使用let/const聲明的變量不會綁在window對象上面（window對象屬於瀏覽器的部分，故此話針對瀏覽器端而言）。

解構賦值

解構賦值的出現可以從對象中更加方便快捷地取出需要的數據，避免出現大量很相近的重複代碼。

解構賦值本質上利用了ES6的Iterator特性，只有可以被迭代的對象纔可以應用解構賦值，對於null或undefined使用結構賦值，程序會拋出異常。

let {a, b} = {a:1, b:'b'};
console.log(a,b); // 1 "b"

let {c} = null; // Uncaught TypeError: Cannot destructure property `c` of 'undefined' or 'null'.

Iterator

遍歷器（Iterator）是一種接口，爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。

具有遍歷接口的對象稱爲可遍歷的，可以通過for ... of語句訪問內部成員。

我們知道，在JavaScript中，也可以通過for ... in語句遍歷對象屬性， 那麼 for ... of 和 for ... in有什麼區別麼？

let arr = ['a', 'b'];
arr.name = 'array';

for(let k in arr){
    console.log(arr[k]);
}
// 'a' 'b' 'array' 

for( let k of arr){
    console.log(k);
}
// 'a' 'b'

通過上面代碼發現，for ... of語句並沒有遍歷到 數組arr 的name屬性。

ES6 規定，默認的 Iterator 接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具有Symbol.iterator屬性，就可以認爲是“可遍歷的”（iterable）。

原生具備 Iterator 接口的數據結構如下：

• Array
• Map
• Set
• String
• TypedArray
• 函數的 arguments 對象
• NodeList 對象

另外，在ES6中，跟Iterator特性密切相關是Geneator。後面有機會再詳細展開。