新的聲明方式

在ES5的時候，我們只有一個聲明方式，var！但是在es6中，聲明進行了擴展，我們加上ES5的var的申明方式，我們有了三種聲明方式：

var：它是variable的簡寫，可以理解成變量的意思

let：它在英文中是讓的意思，也可以理解成一種申明方式

const：它在英文中是常量的意思，在ES6中用來聲明常量，常量可以理解成不變的量=》這裏的不變不是值得不變，是內存地址的指針不變！！！

var 聲明：

　　var在ES中是用來升級成全局變量的，我們可以做一個簡單實例，聲明一個變量，用console.log()輸出看一下

var a = ‘bokeyuan‘;
console.log(a)          //bokeyuan

　　這個時候可以看到我們的a被打印出來，結果是bokeyuan，接下來有個問題了

如何理解它的作用是聲明全局變量的呢？

我們在簡單用測試一下

var a = ‘博客園‘;
window.onload = function(){
    console.log(a)     //博客園
}     

我們匿名函數中console.log()了外面的變量a,顯示結果是‘博客園’，可以證明var確實是全局的，如果不夠直觀，還有一種方法可以驗證

var a = 2;
{
    var b = 3;  
}
console.log(a)    //3

　　可以看出打印出來的是3，說明var是全局的，區塊內的第二次賦值覆蓋了第一次賦值，所以var 的顯示是3！ 　　

let 聲明：

通過上面兩個例子，我們可以對var 全局聲明有一定的了解，那跟var 對應的聲明就是 let聲明，他是局部變量的聲明，我們繼續走一個 例子

var a = 2;
{
     let a = 3;  
}
console.log(a)       //2

　　這個時候可以看出let是局部變量的聲明，所以在區塊外面打印的就是2;

用這種方式在驗證一下

{
      let a = 3;  
}
console.log(a)        //報錯

　　顯示找不到這個變量，說明let只能在區塊內起作用，外部是不可取的！

其實有些小夥伴覺得let 沒有var 好用，其實let是防止你的數據汙染的，在項目中其實非常有用， 舉個例子

我們先來一波var聲明的循環

for(var i = 0 ;i < 10 ;i ++){
    console.log(‘循環體‘+i);
}
console.log(‘循環體外‘+i) 

//輸出結果是 循環體0
　　　　　　 循環體1
　　　　　　 循環體2
　　　　　　 循環體3
　　　　　　 循環體4
　　　　　　 循環體5
　　　　　　 循環體6
　　　　　　 循環體7
　　　　　　 循環體8
　　　　　　 循環體9
 　　　　　　循環體外10

我們發現循環體在的i被變量汙染了，如果外部在使用i就會出現問題，這是開發者不想看到的問題

再來一波let的申明循環

for(let i = 0 ;i < 10 ;i ++){
	console.log(‘循環體‘+i);
}
console.log(‘循環體外‘+i)
//     循環體0
       循環體1
       循環體2
       循環體3
       循環體4
       循環體5
       循環體6
       循環體7
       循環體8
       循環體9
 Uncaught ReferenceError: i is not defined          

　　最後一個console.log(i)你會發現報錯了，找不到循環體外的i了，通過兩種聲明的比較，可以明白let在防止程序汙染上還是很好的，我們要習慣去用let去聲明，減少var聲明去汙染全局空間，特別是在vue中一定要學會使用！

const聲明：

程序開發中，有些聲明是希望不會再發生變化，簡單來說，聲明結束後，這個變量就是這個值，或者這個變量的指針就是指向這個內存，不發生改變，這個時候我們用const聲明就是一個非常合適的選擇。

const a = "博客園";
var a = "博客";
console.log(a)

這個是有你就會發現，程序報錯了，很尷尬，理解上面的一段話你就知道他為啥報錯了

但是，如果這個樣子

const a = [0];
a.push(1);
console.log(a)      // [0,1]

這個時候會發現，這個a的值時可以改變的，仔細閱讀上面一句話，你會理解的！

變量的解構賦值！

以前，為 變量賦值的時候，我們只能介樣子

let a = 0,b = 1,c = 2;

現在在ES6中，我們可以用數組解構的方式進行賦值

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

上面的代碼可以理解為，從數組中一次提取值，按照位置的對應關系進行賦值但是要遵從數組模式和賦值模式的統一

如果兩邊的格式不統一，那麽就很有可能報錯或者是出現undefined;

數組結構的默認值：

解構賦值是允許使用默認值的，看一個簡單例子

let [name = ‘zheng‘] = [];
console.log(name)    //zheng

如果一次解析多個變量的時候呢？

let [name,age = 17] = [‘zheng‘,undefined];
console.log(name,age)     //zheng   17;

　　undefined相當於什麽都沒有，所以，b就被取成默認值！

如果是null呢？

let [name,age = 17] = [‘zheng‘,null]
console.log(name,age) 　　　　//zheng null

　　這個時候就可以發現null被賦值上去了，所以我們可以理解成undefind是什麽都沒有，而null是相當於有值，但是值為null,所以b並沒有取默認值，而是結構成了null

結構不僅僅可以用於數組，還可以用於對象

let {name,age} = {name:‘zheng‘,age:17};
console.log(name,age)    //zheng 17

註意：對象的結構和數組的結構有一個很大的不同。數組是按照元素依次排序的，變量的取值它的位置決定的；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值

圓括號的使用：

如果在解構之前就定義了變量，這個時候解構會出現問題

let foo;
{foo} ={foo:‘JSPang‘};
console.log(foo);

　　要解決報錯，使程序正常，這個時候我們僅僅需要在解構語句外面加一個圓括號就可以了

let foo;
({foo} ={foo:‘zheng‘})
console.log(foo);　　//zheng

　字符串解構賦值！

const [a,b,c,d,e] = ‘zheng‘;
console.log(a);     //z 
console.log(b);     //h
console.log(c);     //e
console.log(d);     //n 
console.log(e);     //g 

ES6學習筆記二 新的聲明方式和變量的解構賦值！