視頻鏈接：
JavaScript var let const的區(qū)別 - Web前端工程師面試題講解

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、域名申請(qǐng)、虛擬空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

參考鏈接：
JavaScript 變量
JavaScript Let
JavaScript Const

練習(xí)網(wǎng)站：
codepen.io

初步認(rèn)識(shí)：

功能實(shí)現(xiàn)

HTML的部分：

發(fā)表評(píng)論

JS的部分：

//首先要要我想弄一個(gè)評(píng)論功能，
//通過(guò)document.querySelector獲取到HTML中input標(biāo)簽的type屬性為"text"的輸入框的部分
//于是賦值給這個(gè)var變量text，該變量就成類似容器一樣的存在
var text = document.querySelector("input[type='text']");
var button = document.querySelector("button");
var div = document.querySelector("div");

button.onclick = function(){
//用var創(chuàng)建變量content，把輸入的內(nèi)容賦值給content
  var content = text.value;
//接著就把內(nèi)容賦值給下面的評(píng)論顯示區(qū)域
  div.innerText = content;
};

現(xiàn)在我輸入內(nèi)容就顯示出評(píng)論的結(jié)果了：

重復(fù)聲明

在不新增變量以及不該寫整體結(jié)構(gòu)的前提下，我們可以利用var變量可以重復(fù)聲明的性質(zhì)，改寫原來(lái)評(píng)論輸入的內(nèi)容：

JS部分改寫：

var text = document.querySelector("input[type='text']");
var button = document.querySelector("button");
var div = document.querySelector("div");

button.onclick = function(){
  var content = text.value;
  var content = "下次一定";
  div.innerText = content;
};

值的修改

而 如果我們不聲明 var 這個(gè)變量，直接賦值就叫值的修改：

button.onclick = function(){
  var content = text.value;
  content = "下次一定";
  div.innerText = content;
};

當(dāng)我們使用let變量時(shí)，想重復(fù)定義是不可以的，但是可以進(jìn)行值的修改或者創(chuàng)建一個(gè)新的let變量

而const變量則更加嚴(yán)格，即不能重復(fù)定義，也不存在值修改，但是可以創(chuàng)建一個(gè)數(shù)組，利用數(shù)組通過(guò)指針指向和被引用的特點(diǎn)，來(lái)存新的變量達(dá)到我們修改評(píng)論的目的，例子如下。

JS的部分：

button.onclick = function(){
  const content = [];
  content[0] = text.value;
  content[1] = "下次一定";
  div.innerText = content[1];
};

聲明提升

接下來(lái)弄一個(gè)新的例子來(lái)說(shuō)明
HTML部分：

聽(tīng)君一席話

JS部分：

var p1 = document.querySelector("p.p1");
var p2 = document.querySelector("p.p2");

p2.innerText=content;

var content = "如聽(tīng)一席話"

之所以p2的類沒(méi)有顯示內(nèi)容，則是因?yàn)?code>var變量可以聲明提示，類似如下的效果：

var content

p2.innerText=content;

content = "如聽(tīng)一席話"

此外let、const聲明的變量是沒(méi)有聲明提升，但是可以利用值的修改可令let聲明的變量不報(bào)錯(cuò)。

創(chuàng)建塊級(jí)作用域

就是弄個(gè)函數(shù)，一個(gè)函數(shù)盡管使用了函數(shù)外的同名變量，但是可以選擇是否調(diào)用，來(lái)達(dá)到改變?cè)摪咐?code>p2段落的情況。

不過(guò)這樣太麻煩了，其實(shí)用let/const+花括號(hào)內(nèi)容括起來(lái)就可以形成塊級(jí)作用域的效果：

循環(huán)

注意：ES6之前的循環(huán)不算是塊級(jí)作用域的一種
以下就弄也給循環(huán)案例
HTML部分：

JS部分：

var li = document.querySelectorAll("li");
//這里進(jìn)行5次循環(huán)
for(var i=0;i<5;i++){
  //每次循環(huán)都為li元素添加鼠標(biāo)事件
  li[i].onmouseover = function(){
    //在這個(gè)監(jiān)聽(tīng)事件，就添加文本節(jié)點(diǎn)用循環(huán)里的i賦值
    var text = document.createTextNode(i);
    this.appendChild(text);
    //并且修改li元素的高度
    this.style.height = i * 10 + "px";
  }
}

鼠標(biāo)逐個(gè)移動(dòng)每個(gè)li，可以看到它們的間距確實(shí)變大了，但是變大的間距都是一致的，并不是逐個(gè)上升的，這里是回調(diào)函數(shù)的問(wèn)題。

該函數(shù)的具體實(shí)現(xiàn)流程如下：

首先鼠標(biāo)事件里的內(nèi)容是回調(diào)函數(shù)

需要等執(zhí)行棧里面的正常任務(wù)執(zhí)行以后才會(huì)執(zhí)行任務(wù)隊(duì)列里面的回調(diào)函數(shù)的結(jié)果，var關(guān)鍵字沒(méi)有形成塊級(jí)作用域，回調(diào)函數(shù)只保存了參數(shù)i,等正常任務(wù)執(zhí)行后，i就為5了。

可以在循環(huán)聲明一個(gè)新的let變量j，把i的數(shù)值賦給j，并且令鼠標(biāo)事件只認(rèn)j，這樣因?yàn)閴K級(jí)作用域的關(guān)系，每次迭代可以進(jìn)行重新綁定，這樣就可以使任務(wù)隊(duì)列里面的回調(diào)函數(shù)都有不一樣的i了

var li = document.querySelectorAll("li");

for(var i=0;i<5;i++){
  let j=i;
  li[j].onmouseover = function(){
    var text = document.createTextNode(j);
    this.appendChild(text);
    this.style.height = i * 10 + "px";
  }
}

可以看到現(xiàn)在就達(dá)到我們希望可以逐個(gè)增大的效果了

當(dāng)然也可以把塊級(jí)作用域鎖定在循環(huán)里面達(dá)到同樣的效果（我測(cè)試不成功，不知道為什么i參數(shù)的0與1總是重合）
JS修改：

var li = document.querySelectorAll("li");

for(let i=0;i<5;i++){
  li[i].onmouseover = function(){
    var text = document.createTextNode(i);
    this.appendChild(text);
    this.style.height = i * 10 + "px";
  }
}

總結(jié)：

網(wǎng)頁(yè)題目：JavaScript var let const的區(qū)別
當(dāng)前地址：http://weahome.cn/article/dsojpoh.html