ES6 中 let 和 const 是新的聲明變量的方式

let 與 var 的一些用法區(qū)別

塊級(jí)作用域

let a = 10;     

這一句是 ES6中 代替 var a = 10; 的語(yǔ)法芜赌，這個(gè)語(yǔ)法和 var 有啥區(qū)別呢襟锐？？我們看下面的一個(gè)示例代碼只壳。

if (true){
var a =10;
}
console.log(a);       

if (true){
var let =10;
}
console.log(a);        

<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; 
        };
    }
}     

當(dāng)我們點(diǎn)擊 0 1 2 3 的按鈕的時(shí)候建邓，下面的框里會(huì)顯示出 i 的值。這里 我們用的是 for (let i=0;i<X.length;i++) 中的 let 打印出來(lái)就是

<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; 
        };
    }
}        

重復(fù)定義同一個(gè)變量

JS代碼

var a = 10;
var a = 20 ;
var XO = document.getElementById('xo'); 
XO.innerHTML = a ;         

然后打印出 a 的值要注意這時(shí)候 var 是不報(bào)錯(cuò)的注意看紅色的框框菲语，是監(jiān)聽(tīng)的時(shí)間妄辩。

全局下并沒(méi)有成為 window 的屬性

因?yàn)?window. 這是我們 JS 的最頂層胶哲。我們有這樣一段代碼畔塔，那就是

var a = 10;     
console.log(window.a)    

const 命令

const 是用來(lái)定義常量的基本語(yǔ)法和 let 差不多，let 有的他也有鸯屿。const 也是有一些自己的特殊要求澈吨。有三點(diǎn)

1. 必須定義初始值。
   比如這樣的代碼：
   const NUM = 20;
   如果寫(xiě) const NUM ; //這樣就是報(bào)錯(cuò)了
   而 var NUM; 是不會(huì)報(bào)錯(cuò)的寄摆，會(huì)返回一個(gè) undefine

2. 一般常量規(guī)范命名需要大寫(xiě)谅辣。這是大家遵守的一個(gè)不成文的規(guī)定吧。

3. 不可變的是地址婶恼，但是常量本身是可以變的桑阶。
   這句話的意思是變量的地址你不能改，內(nèi)容卻可以改的勾邦，具體我們看下面的例子蚣录。

   const OBJ = {name:'咸菜',age:'27'};
   console.log(OBJ);
   //OBJ = {};//改變對(duì)象本身，這樣是不行的會(huì)報(bào)錯(cuò)
   OBJ.name = '油條';
   console.log(OBJ);
   紅框就是修改了對(duì)象自身以后報(bào)錯(cuò)的內(nèi)容眷篇。

當(dāng)修改了對(duì)象里面的內(nèi)容以后萎河，是不會(huì)報(bào)錯(cuò)的紅框是修改前，藍(lán)框是修改后

const OBJ = {name:'咸菜',age:'27'};
console.log(OBJ);   
//OBJ = {};//改變對(duì)象本身，這樣是不行的會(huì)報(bào)錯(cuò)    
OBJ.name = '油條';
console.log(OBJ);      
OBJ = {name:'油條',age:'26'};//報(bào)錯(cuò)
console.log(OBJ);              

const xo = {};
xo.prop = 123;

xo.prop
// 123

xo = {}; // TypeError: "xo" is read-only       

上面代碼中吞歼，常量 xo 儲(chǔ)存的是一個(gè)地址，這個(gè)地址指向一個(gè)對(duì)象塔猾。不可變的只是這個(gè)地址，即不能把 xo 指向另一個(gè)地址稽坤，但對(duì)象本身是可變的丈甸，所以依然可以為其添加新屬性。