ES6 中 let 和 const 是新的聲明變量的方式
let 與 var 的一些用法區(qū)別
塊級作用域
let a = 10;
這一句是 ES6中 代替 var a = 10; 的語法，這個語法和 var 有啥區(qū)別呢？？我們看下面的一個示例代碼。
if (true){
var a =10;
}
console.log(a);
上面和下面的兩個語法上有什么區(qū)別
if (true){
var let =10;
}
console.log(a);
可以看出當使用 let 的時候報錯了。原因是 var 不具備塊級作用域，可以找到 a。而 let 是具備塊級作用域的，所以找不到 a。這樣就可以提高語言的嚴謹性，有了更大的應用的場合。
看下面的一個例子。
有這樣的一段代碼
HTML 代碼
<div>
<ul>
<input type="button" value="0" />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
</ul>
</div>
<div id="xo">
<p>這里是 i = </p>
</div>
JS 代碼
window.onload = function () {
var X = document.getElementsByTagName('input');
for (let i=0;i<X.length;i++){
X[i].onclick = function(){
var XO = document.getElementById('xo');
XO.innerHTML = XO.innerHTML + '<br>'+i;
};
}
}
當我們點擊 0 1 2 3 的按鈕的時候，下面的框里會顯示出 i 的值。這里 我們用的是 for (let i=0;i<X.length;i++) 中的 let 打印出來就是
而我們把
for (let i=0;i<X.length;i++) 中的 let 換成 var 的時候就是這樣的情況
顯示的都是 i=4 說明用 var 的情況下我們點擊 0 1 2 3 按鈕的時候
for (var i=0;i<X.length;i++) 這個循環(huán)已經(jīng)結(jié)束了，而 var 不具備塊級作用域，所以最后輸出的還是 4 。而 let 有作用域，在輸出的時候就是就算在 for 循環(huán)的塊內(nèi)執(zhí)行完了外部無法調(diào)用。只能就是按照它的順序執(zhí)行。這個我們可以給他做一個 console.log(i) 這樣就很明顯了。代碼如下HTML 代碼
<div>
<ul>
<input type="button" value="0" />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
</ul>
</div>
<div id="xo">
<p>這里是 i = </p>
</div>
JS 代碼
window.onload = function () {
var X = document.getElementsByTagName('input');
for (let i=0;i<X.length;i++){
console.log(i);
X[i].onclick = function(){
var XO = document.getElementById('xo');
XO.innerHTML = XO.innerHTML + '<br>'+i;
};
}
}
那么換是 let 的時候看下圖；
可以看出兩個是一樣的。
重復定義同一個變量
JS代碼
var a = 10;
var a = 20 ;
var XO = document.getElementById('xo');
XO.innerHTML = a ;
然后打印出 a 的值要注意這時候 var 是不報錯的注意看紅色的框框，是監(jiān)聽的時間。
最后打印出了 20 ；也就是 20 覆蓋了 10；
那么我們再用 let 試一下。
這樣大大的提高了 JavaScript 語言的嚴謹性。
全局下并沒有成為 window 的屬性
因為 window. 這是我們 JS 的最頂層。我們有這樣一段代碼，那就是
var a = 10;
console.log(window.a)
而是 let 的時候就是這樣的
const 命令
const 是用來定義常量的基本語法和 let 差不多，let 有的他也有。const 也是有一些自己的特殊要求。有三點
必須定義初始值。
比如這樣的代碼：
const NUM = 20;
如果寫const NUM ;//這樣就是報錯了
而var NUM;是不會報錯的，會返回一個undefine一般常量規(guī)范命名需要大寫。這是大家遵守的一個不成文的規(guī)定吧。
-
不可變的是地址，但是常量本身是可以變的。
這句話的意思是變量的地址你不能改，內(nèi)容卻可以改的，具體我們看下面的例子。const OBJ = {name:'咸菜',age:'27'};
console.log(OBJ);
//OBJ = {};//改變對象本身，這樣是不行的會報錯
OBJ.name = '油條';
console.log(OBJ);
紅框就是修改了對象自身以后報錯的內(nèi)容。
當修改了對象里面的內(nèi)容以后，是不會報錯的紅框是修改前，藍框是修改后
const OBJ = {name:'咸菜',age:'27'};
console.log(OBJ);
//OBJ = {};//改變對象本身，這樣是不行的會報錯
OBJ.name = '油條';
console.log(OBJ);
OBJ = {name:'油條',age:'26'};//報錯
console.log(OBJ);
當
const 一個對象以后，對象的地址是不能做修改的，比如上面的代碼中的 OBJ = {name:'油條',age:'26'};//報錯 雖然結(jié)構(gòu)是一樣的但是他的地址是被修改了的。所以就報錯了。對于復合類型的變量，變量名不指向數(shù)據(jù)，而是指向數(shù)據(jù)所在的地址。
const 命令只是保證變量名指向的地址不變，并不保證該地址的數(shù)據(jù)不變，所以將一個對象聲明為常量必須非常小心。
const xo = {};
xo.prop = 123;
xo.prop
// 123
xo = {}; // TypeError: "xo" is read-only
上面代碼中，常量 xo 儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把 xo 指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。
