成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Yuqi / 1852人閱讀

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

希望可以實現(xiàn)點擊哪個就打印出對應(yīng)的順序

  • 第0個
  • 第1個
  • 第2個
  • 第3個
  • 第4個
錯誤實現(xiàn):

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

window.onload=()=>{
  const list = document.querySelectorAll("li")
  for (var i=0; i{
        console.log(i)
    }
  }
}
正確實現(xiàn):

方法一:給每個li添加自定義屬性

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

方法二:自執(zhí)行函數(shù),并利用作用域的關(guān)系,定義函數(shù)把i傳進來,并進行自動調(diào)用

for (var i=0; i

方法三:ES6中的let,let應(yīng)用于塊級作用域,塊級作用域以大括號劃分
let不會被垃圾回收機制回收,var為什么會被回收?因為var聲明的變量會被覆蓋,而let不能被覆蓋,就會被存下來。

for (let i=0; i{
        console.log(i)
    }
}

方法四:利用for循環(huán)的方法:filter、forEach、map(注意全都是ES5的,不是ES6的)

// 注意此處有一個兼容性問題,li是類數(shù)組,兼容性好的瀏覽器可以直接使用這三個方法,但是兼容性不好的不能直接用
// 為保證穩(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中的一個對象
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)
  }
})

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/106559.html

相關(guān)文章

  • React 組件之間如何交流

    摘要:前言今天群里面有很多都在問關(guān)于組件之間是如何通信的問題,之前自己寫的時候也遇到過這類問題。英文能力有限,如果有不對的地方請跟我留言,一定修改原著序處理組件之間的交流方式,主要取決于組件之間的關(guān)系,然而這些關(guān)系的約定人就是你。 前言 今天群里面有很多都在問關(guān)于 React 組件之間是如何通信的問題,之前自己寫的時候也遇到過這類問題。下面是我看到的一篇不錯英文版的翻譯,看過我博客的人都知道...

    tomlingtm 評論0 收藏0
  • 微信小程序?qū)W習(xí)wepy框架使用詳解

    摘要:,至此咱們的微信小程序的簡單使用及了解算是分享完了,畢竟個人也是道行有限,沒有鉆研太深,這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗,有太多不足或不對的地方,希望大家多多給予指出與改正,咱們一起來共同學(xué)習(xí)與進步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用,在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度,然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視,也就形成了咱們開...

    sf190404 評論0 收藏0
  • 微信小程序?qū)W習(xí)wepy框架使用詳解

    摘要:,至此咱們的微信小程序的簡單使用及了解算是分享完了,畢竟個人也是道行有限,沒有鉆研太深,這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗,有太多不足或不對的地方,希望大家多多給予指出與改正,咱們一起來共同學(xué)習(xí)與進步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用,在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度,然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視,也就形成了咱們開...

    stormjun 評論0 收藏0
  • 微信小程序?qū)W習(xí)wepy框架使用詳解

    摘要:,至此咱們的微信小程序的簡單使用及了解算是分享完了,畢竟個人也是道行有限,沒有鉆研太深,這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗,有太多不足或不對的地方,希望大家多多給予指出與改正,咱們一起來共同學(xué)習(xí)與進步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用,在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度,然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視,也就形成了咱們開...

    xiao7cn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<