本文實例講述了ES6學(xué)習筆記之let與const用法。分享給大家供大家參考，具體如下：

在ES6中不是var，而是通過let來聲明變量，用const來聲明常量，有如下一些不同：

1、let與const作用域只限于當前代碼塊{}，而var則沒有這種限制。

2、使用let、const申明的變量作用域不會被提升。例如：

console.log(str);
var str="var declare";

控制臺輸出undefined；因為變量申明是在任意代碼執(zhí)行前處理的，在代碼區(qū)中任意地方聲明變量和在最開始（最上面）的地方聲明是一樣的。也就是說，看起來一個變量可以在聲明之前被使用！這種行為就是所謂的“hoisting”，也就是變量提升，看起來就像變量的聲明被自動移動到了函數(shù)或全局代碼的最頂上。注意：僅僅是聲明提升了，定義并不會被提升。因此console.log()可以檢測到str的聲明，但是卻沒有定義，提示undefined。

console.log(str2);
let str2="let declare";

控制臺報錯：can't access lexical declaration `str2' before initialization，let不會把聲明提升到全局之前，因此在console輸出str2時會報錯未聲明。

3、在相同的作用域下不能申明相同的變量，利用var可以聲明兩次同一個變量，并且后一個會覆蓋前面的聲明，而let、const不可以。

4、for循環(huán)體現(xiàn)let的父子作用域

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  btns[i].οnclick=function () {
    alert("第"+i+"個按鈕");
  }
}

由于var會提升作用域，當btns[i]在本代碼塊{}找不到i時，會找到之前的for中的i。在函數(shù)循環(huán)執(zhí)行時，并沒有觸發(fā)onclick，i一直++到5。當任意按鈕點擊的時侯觸發(fā)onclick，此時i==5，因此無論按那個按鈕都會顯示“第5個按鈕”。

解決方法一：閉包處理      

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  (function (i) {//通過參數(shù)傳遞i，在另一個函數(shù)內(nèi)的i
    btns[i++].οnclick=function () {
      alert("第"+i+"個按鈕");
    }
  })(i);
}

閉包處理：閉包就是一個函數(shù)引用另外一個函數(shù)的變量，因為變量被引用著所以不會被回收，因此可以用來封裝一個私有變量,i是另一個函數(shù)作用域內(nèi)的變量，不會隨著外循環(huán)而改變。

方法二：使用let的情況下，會自己區(qū)分為兩個作用域，每個btns[i]內(nèi)的函數(shù)對應(yīng)不同的變量i

for (let i=0;i<btns.length;i++){//內(nèi)部為新的let作用域
  btns[i].οnclick=function (){
    alert("第"+i+"個按鈕");
  }
}

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論