JS 筆記 - ES6 的 let 與 for 用法

直接筆記一個基本的 ES6 的 let 搭配 for 迴圈的用法:

for (var i = 0; i < 3; i++) {
  console.log(i);
}

//結果會得到 0, 1, 2

但因為用 var 宣告變數，也是全域變數，無形也汙染到 window，所以在開發人員工具中輸入 i，也會得到 3。如果改成 let 變成只在區域中執行，就不會汙染到 window，所以就把 var 改成 let。

for (let i = 0; i < 3; i++) {
  console.log(i);
}
//結果一樣會得到 0, 1, 2

但在 console 裡輸入 i ，得到得到這個資訊:

Uncaught ReferenceError: i is not defined
at <anonymous>:1:1

就變找不到 i 了!

實務練習

情境: 倘若有個數字清單，內含三個數字，在點擊事件後會彈跳該數字的號碼。
分析:

• 數字清單，有三個數字。
• 有點擊事件並觸發彈跳視窗。
• 使用迴圈做選擇。

建立一個 ul .list 的列表，並且 li 有三個數字，在點擊數字後，會顯示該數字號碼。

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var 會影響全域

一般是使用 var 宣告選取 list 裡面的 li ，並記錄其長度。

var list = document.querySelectorAll(".list li");
var listLen = list.length; //3

透過 for 回圈選出其值，在 list 後面加上[i]，就會去跑 li 的內容，並建立點擊監聽事件，執行 function 後會彈跳出該數字的內容，但因為迴圈是從 0 開始，所以 alert 內容要 i+1，才會正確顯示:

for (var i = 0; i < listLen; i++) {
  function checkList() {
    alert(i + 1);
  }
  list[i].addEventListener("click", checkList, false);
}

但是，結果卻不如預期。可以試試 Codepen: https://codepen.io/hnzxewqw/pen/wvamwZz

在點擊後，結果都會跳出 4，原因是 var 會影響全域，導致結果 i 的值等於 3，就會變成全部的 i 都會綁定成 3，所以結果怎麼點都是 3+1。

let 在區塊執行會重新綁定監聽事件

修正的方法就是把 for 裡面的 var 改成 let，就可以正確顯示出要的結果，原因是 for 用 let 宣告變數時，就只會在該區塊內執行，並每次跑迴圈都會重新綁定事件，所以結果就可以得到跟點擊的數字為相同效果。

可以將上方 Codepen 中的 var 改成 let 試試看。