全域性安裝Babel-cli

在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶映象的cnpm來進行安裝。安裝cnpm的方法，大家自己百度吧。

npm install -g babel-cli

雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，如果你不相信可以輸入下邊的命令試一下。

npm install --save-dev babel-preset-es2015 babel-cli

新建.babelrc

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

es6結構賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的程式碼量，並且讓我們的程式結構更清晰。也許你還是不太明白，那先來一個最簡單的

陣列的結構賦值：

陣列模式和賦值模式統一：

可以簡單的理解為等號左邊和等號右邊的形式要統一，如果不統一解構將失敗。

let[a,[b,c],d]=[1,[2,3],4]
console.log(a);
console.log(b);
console.log(c);

console.log(d);

列印結果：1 2 3 4

解構的預設值：

解構賦值是允許你使用預設值的，先看一個最簡單的預設是的例子。

console.log(foo);

列印結果：true

上邊的例子陣列中只有一個值，可能你會多少有些疑惑，我們就來個多個值的陣列，並給他一些預設值。

let [a,b="leiy"]=['ly']

console.log(a+b);

列印結果：lyleiy

現在我們對預設值有所瞭解，需要注意的是undefined和null的區別。

let [a,b="JSPang"]=['技術胖',undefined];
console.log(a+b);

列印結果：lyleiy

undefined相當於什麼都沒有，b是預設值。

let [a,b="leiy"]=['ly',null]
console.log(a+''+b);

列印結果：lynull

null相當於有值，但值為null。所以b並沒有取預設值，而是解構成了null

物件的解構賦值

解構不僅可以用於陣列，還可以用於物件

let {a,b}={a:'leiy',b:'ly'}
console.log(a);

console.log(b);

列印結果：

leiy

ly

注意：物件的解構與陣列有一個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。

圓括號的使用

如果在解構之前就定義了變數，這時候你再解構會出現問題。下面是錯誤的程式碼，編譯會報錯。

let a
{a}={a:'leiye'}
console.log(a);

要解決報錯，使程式正常，我們這時候只要在解構的語句外邊加一個圓括號就可以了。

let a
({a}={a:'leiye'})
console.log(a);

字串解構

console.log(d);

列印結果：

l
e
i
Y