for 循環(huán)中 var 和 let的區(qū)別是什么？

let homeTravelItemImg = document.getElementsByClassName("item-img");

let homeTravelItemIcon = document.getElementsByClassName("item-icon");

for (var i = 0; i < homeTravelItemIcon.length; i++) {
    homeTravelItemIcon[i].onclick = function() {
        homeTravelItemImg[i].style.opacity = '1';
        homeTravelItemIcon[i].style.display = 'none';
    }
}

代碼主要實(shí)現(xiàn)的是，當(dāng)我點(diǎn)擊一個(gè)icon時(shí)，icon消失，并且背景圖片的不透明度改變；

這里面當(dāng)我觸發(fā)點(diǎn)擊事件時(shí)，控制臺(tái)報(bào)錯(cuò)：

Uncaught TypeError: Cannot read property 'style' of undefined

而我將for循環(huán)的var 改為 let時(shí)，就不會(huì)報(bào)錯(cuò)，請(qǐng)問(wèn)這是為什么？

是因?yàn)閴K級(jí)作用域的問(wèn)題嗎？

回答

編輯回答

孤影

1.var會(huì)導(dǎo)致變量提升,如果你在for循環(huán)中var了i,那么在該作用域中是可以找到i的
如for(var i =0;i<5;i++){}
console.log(i) //5

2.let是Es6中的聲明方式,但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
for(let i =0;i<5;i++){}
console.log(i) //報(bào)錯(cuò)
詳見(jiàn):http://es6.ruanyifeng.com/#do...

2017年2月25日 12:37

編輯回答

心沉

你可以打個(gè)斷點(diǎn)就知道了，在onclick里面，執(zhí)行進(jìn)去的時(shí)候，i的值應(yīng)該是homeTravelItemIcon.length了
找不到相關(guān)的DOM節(jié)點(diǎn)，所以報(bào)錯(cuò)的。

在里面直接用this吧

let homeTravelItemImg = document.getElementsByClassName("item-img");

let homeTravelItemIcon = document.getElementsByClassName("item-icon");

for (var i = 0; i < homeTravelItemIcon.length; i++) {
    homeTravelItemIcon[i].onclick = function() {
        this.style.opacity = '1';
        this.style.display = 'none';
    }
}

//主要是非方法內(nèi)部用var定義的話，相當(dāng)于全局的，任何地方都可以訪問(wèn)到,瀏覽器引擎解析的時(shí)候也就不會(huì)
在內(nèi)部開(kāi)辟一個(gè)局部變量，而直接引用外部變量的地址了。

//使用let的方式應(yīng)該跟以下這種方式是一致的。

for (var i = 0; i < homeTravelItemIcon.length; i++) {
  
    (function(i){homeTravelItemIcon[i].onclick = function() {
        homeTravelItemImg[i].style.opacity = '1';
        homeTravelItemIcon[i].style.display = 'none';
    }})(i);
}

2017年10月31日 12:06

編輯回答