新手快速學習ES6語法,用最快的速度入門ES6就看這裏

最近正在學習ES6,對於ES6的語法有一些本身的理解,
想寫這篇文章幫助跟我同樣的新手快速入門ES6而不至於連代碼都看不懂.
    至於開發環境的搭建什麼的例如balel下載什麼的,百度上有不少的教程了.
我在這就再也不贅述了,不懂得童鞋自行查找,咱們將精力放在語法上.

（一）let命令

ES6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

什麼叫作代碼塊簡單來講就是{}內的東西,以前JS是沒有塊級做用域的，咱們會使用自執行匿名函數來模擬塊級做用域

function outputNumbers(count){
    (function () {
        for (var i=0; i < count; i++){
            alert(i);
        }
    })();
    alert(i); //致使一個錯誤！
}

而在ES6中咱們有了let，使用let在內定義的變量在外部環境是沒法訪問到的,最適合使用let的地方就是for循環了

for (let i = 0; i < 10; i++) {
    console.log(i)
}
console.log(i) //報錯

這樣就避免了以前使用var來定義i執行以後i變量依然保留下來的尷尬局面.
使用let時有一個須要注意的問題就是let與var不一樣的一點是不存在變量提高

// var 的狀況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;

在let生命變量以前調用該變量則會報錯,而var的處理方式是把聲明提早而賦值操做保留在原地,咱們都知道var只聲明未賦值則會返回unfdinded。
咱們把let聲明該變量以前的這段區域稱爲該變量的「暫時性死區」（temporal dead zone，簡稱 TDZ）
另外let不容許重複聲明

function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}

（二）const命令

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代碼代表改變常量的值會報錯。
const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值。

const foo;
// SyntaxError: Missing initializer in const declaration

上面代碼表示，對於const來講，只聲明不賦值，就會報錯。

const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

if (true) {
  const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const命令聲明的常量也是不提高，一樣存在暫時性死區，只能在聲明的位置後面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

上面代碼在常量MAX聲明以前就調用，結果報錯。

const聲明的常量，也與let同樣不可重複聲明。

var message = "Hello!";
let age = 25;

// 如下兩行都會報錯
const message = "Goodbye!";
const age = 30;

const命令更適合定義那種一經定義就不須要再改變的變量，例如url地址之類。

關於頂層對象
咱們都知道，ES5中全局var定義的變量、function實際都是全局對象window（global）的屬性，而ES6爲了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另外一方面規定，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。也就是說，從ES6開始，全局變量將逐步與頂層對象的屬性脫鉤。

var a = 1;
// 若是在Node的REPL環境，能夠寫成global.a
// 或者採用通用方法，寫成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代碼中，全局變量a由var命令聲明，因此它是頂層對象的屬性；全局變量b由let命令聲明，因此它不是頂層對象的屬性，返回undefined。

（三）變量的解構賦值

這部分是ES6新加的一些賦值的方法，我每一個部分給一個例子，只要別人的代碼使用時能看懂就行。
1.數組解構賦值
之前，爲變量賦值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6容許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

2.對象的解構賦值
解構不只能夠用於數組，還能夠用於對象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

3.字符串的解構賦值
字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

相似數組的對象都有一個length屬性，所以還能夠對這個屬性解構賦值。

let {length : len} = 'hello';
len // 5

4.數值和布爾值的解構賦值
解構賦值時，若是等號右邊是數值和布爾值，則會先轉爲對象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代碼中，數值和布爾值的包裝對象都有toString屬性，所以變量s都能取到值。
解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉爲對象。因爲undefined和null沒法轉爲對象，因此對它們進行解構賦值，都會報錯。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

5.函數參數的解構賦值
函數的參數也可使用解構賦值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面代碼中，函數add的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變量x和y。對於函數內部的代碼來講，它們能感覺到的參數就是x和y。
6.默認值
解構賦值容許指定默認值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。因此，若是一個數組成員不嚴格等於undefined，默認值是不會生效的。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代碼中，若是一個數組成員是null，默認值就不會生效，由於null不嚴格等於undefined。

未完待續。。