for循環(huán)與事件的i傳值問題（5種解決方法）

Yuqi 發(fā)布于2019-08-26 10:40 / 1830人閱讀

摘要：方法四利用循環(huán)的方法注意全都是的，不是的注意此處有一個(gè)兼容性問題，是類數(shù)組，兼容性好的瀏覽器可以直接使用這三個(gè)方法，但是兼容性不好的不能直接用為保證穩(wěn)妥，最好轉(zhuǎn)成真正的數(shù)組或者是的原型是中的一個(gè)對(duì)象被轉(zhuǎn)成了真正的數(shù)組方法五中給的方法

希望可以實(shí)現(xiàn)點(diǎn)擊哪個(gè)就打印出對(duì)應(yīng)的順序


  第0個(gè)
  第1個(gè)
  第2個(gè)
  第3個(gè)
  第4個(gè)

錯(cuò)誤實(shí)現(xiàn)：

注意此處使用的var i=0, var是可以被重復(fù)定義的，最后執(zhí)行了i++，根據(jù)垃圾回收機(jī)制，當(dāng)點(diǎn)擊事件發(fā)生的時(shí)候，i已經(jīng)變成5了，所以不管點(diǎn)擊哪個(gè)li，打印的都是5

window.onload=()=>{
  const list = document.querySelectorAll("li")
  for (var i=0; i{
        console.log(i)
    }
  }
}

正確實(shí)現(xiàn)：

方法一：給每個(gè)li添加自定義屬性

window.onload=()=>{
  const list = document.querySelectorAll("li")
  for (var i=0; i
方法二：自執(zhí)行函數(shù)，并利用作用域的關(guān)系，定義函數(shù)把i傳進(jìn)來，并進(jìn)行自動(dòng)調(diào)用
for (var i=0; i
方法三：ES6中的let，let應(yīng)用于塊級(jí)作用域，塊級(jí)作用域以大括號(hào)劃分
let不會(huì)被垃圾回收機(jī)制回收，var為什么會(huì)被回收？因?yàn)関ar聲明的變量會(huì)被覆蓋，而let不能被覆蓋，就會(huì)被存下來。
for (let i=0; i{
        console.log(i)
    }
}
方法四：利用for循環(huán)的方法：filter、forEach、map（注意全都是ES5的，不是ES6的）
// 注意此處有一個(gè)兼容性問題，li是類數(shù)組，兼容性好的瀏覽器可以直接使用這三個(gè)方法，但是兼容性不好的不能直接用
// 為保證穩(wěn)妥，最好轉(zhuǎn)成真正的數(shù)組
const newArr = [].slice.call(list) // 或者const newArr = Array.prototype.slice.call(list), []是Array的原型
console.log(list) // NodeList(5)?[li, li, li, li, li]      NodeList是dom中的一個(gè)對(duì)象
console.log(newArr) // ?[li, li, li, li, li]       被轉(zhuǎn)成了真正的數(shù)組
newArr.forEach((value,index)=>{
  value.onclick=function(){
    console.log(index)
  }
})
newArr.filter((value,index)=>{
  value.onclick=function(){
    console.log(index)
  }
})
newArr.map((value,index)=>{
  value.onclick=function(){
    console.log(index)
  }
})
方法五：ES6中給Array的from方法
Array.from(list, function(value, index){
  value.onclick=function(){
    console.log(index)
  }
})