昨天考核同學(xué)js的時(shí)候問到了這個(gè)問題，結(jié)果自己忘了還有一些條件，結(jié)果當(dāng)場(chǎng)翻車，。。。。后來試了幾次，才發(fā)現(xiàn)問題所在。。想想就好笑，治學(xué)要嚴(yán)謹(jǐn)啊，馬虎不得。
直接看代碼

<script>
 for (let i = 0; i < 4; i++) {
        console.log(i);
    }
 //結(jié)果為 0 1 2 3    
    for (var i = 0; i < 4; i++) {
        console.log(i);
    }
    console.log(i);
//結(jié)果為0 1 2 3
</script>

然后我們嘗試在html中加點(diǎn)代碼
我們?cè)趗l中創(chuàng)建四個(gè)li,為方便觀看，將ul的背景顏色設(shè)置為紅色

<ul style="background-color: red;width: 100px">ul
          <li>li1</li>
          <li>li2</li>
          <li>li3</li>
          <li>li4</li>
      </ul>

然后我們?cè)偈褂脙蓚€(gè)for循環(huán)打印每個(gè)li標(biāo)簽

var lis=document.querySelectorAll('li'); //獲取所有l(wèi)i標(biāo)簽
    for (let i = 0; i < 4; i++) {   //let循環(huán)打印
        console.log(lis[i]);
    }
    for (var i = 0; i < 4; i++) {   //var循環(huán)打印
        console.log(lis[i]);
    }

通過控制臺(tái)，我們可以看到兩個(gè)循環(huán)都成功打印出每個(gè)li標(biāo)簽，確實(shí)沒什么毛病，嗯。
然后我們?cè)诖嘶A(chǔ)上為兩個(gè)循環(huán)遍歷得到的li標(biāo)簽分別添加不同的效果，奇跡發(fā)生了，不要眨眼睛啊

// for 循環(huán)使用let 添加點(diǎn)擊事件，改變每個(gè)li標(biāo)簽的顏色為藍(lán)色
 var lis=document.querySelectorAll('li');
    for (let i = 0; i < 4; i++) {
        // console.log(lis[i]);
       lis[i].addEventListener('click',function (){
           lis[i].style.color='blue';
       })
    }

結(jié)果如我們所料

然后再使用for循環(huán)var

//for循環(huán)使用var為每個(gè)li添加綁定事件，改變顏色為綠色
for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            // console.log(i);
            // console.log(this);
            lis[i].style.color='gerrrn';
        })
    }

結(jié)果是我們無論怎么點(diǎn)擊就是觸發(fā)不了我們的預(yù)期效果，之前我們明明使用for循環(huán)中的var選取到了每個(gè)li標(biāo)簽，為什么就是沒效果呢，而且還報(bào)錯(cuò)。

原來這其中還牽涉到同步異步的思想
當(dāng)執(zhí)行上下文到for循環(huán)中，會(huì)把for循環(huán)放到同步執(zhí)行棧中，執(zhí)行for循環(huán)，然后把for循環(huán)中的內(nèi)部點(diǎn)擊事件放到異步方法里面。等到同步任務(wù)，也就是for循環(huán)執(zhí)行完之后再執(zhí)行里面的點(diǎn)擊事件。
我們可以在點(diǎn)擊事件后把i打印出來

 for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            console.log(i);//4
            lis[i].style.color='orange';
        })
    }
    console.log(i)=4;

我們可以看到每次點(diǎn)擊都會(huì)打印出i的值為4，數(shù)組lis的長(zhǎng)度為4，數(shù)組最大索引為3，所以找不到lis[4]。
為什么i是4？因?yàn)閒or循環(huán)最后一次循環(huán)i=3又執(zhí)行了一步i++的操作，所以為4.

為了防止出現(xiàn)這種難以預(yù)期的意外，我們可以把lis[i]改為this，因?yàn)閠his在這里指的是點(diǎn)擊的對(duì)象。

```html
 for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            console.log(i);//4
            console.log(this);
            this.style.color='orange';
            //lis[i].style.color='orange';
        })
    }
    console.log(i)=4;

關(guān)于同步異步的理解可以參考鏈接