for循环与事件的i传值问题（5种解决方法）

Yuqi 发布于2019-08-26 10:40 / 1771人阅读

摘要：方法四利用循环的方法注意全都是的，不是的注意此处有一个兼容性问题，是类数组，兼容性好的浏览器可以直接使用这三个方法，但是兼容性不好的不能直接用为保证稳妥，最好转成真正的数组或者是的原型是中的一个对象被转成了真正的数组方法五中给的方法

希望可以实现点击哪个就打印出对应的顺序


  第0个
  第1个
  第2个
  第3个
  第4个

错误实现：

注意此处使用的var i=0, var是可以被重复定义的，最后执行了i++，根据垃圾回收机制，当点击事件发生的时候，i已经变成5了，所以不管点击哪个li，打印的都是5

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

正确实现：

方法一：给每个li添加自定义属性

window.onload=()=>{
  const list = document.querySelectorAll("li")
  for (var i=0; i
方法二：自执行函数，并利用作用域的关系，定义函数把i传进来，并进行自动调用
for (var i=0; i
方法三：ES6中的let，let应用于块级作用域，块级作用域以大括号划分
let不会被垃圾回收机制回收，var为什么会被回收？因为var声明的变量会被覆盖，而let不能被覆盖，就会被存下来。
for (let i=0; i{
        console.log(i)
    }
}
方法四：利用for循环的方法：filter、forEach、map（注意全都是ES5的，不是ES6的）
// 注意此处有一个兼容性问题，li是类数组，兼容性好的浏览器可以直接使用这三个方法，但是兼容性不好的不能直接用
// 为保证稳妥，最好转成真正的数组
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]       被转成了真正的数组
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)
  }
})

GPU云服务器云服务器解决问题的方法 while循环与for循环数据分析方法5种云服务器问题及解决方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106559.html

React 组件之间如何交流

摘要：前言今天群里面有很多都在问关于组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。英文能力有限，如果有不对的地方请跟我留言，一定修改原著序处理组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就是你。前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道...

tomlingtm 2019-08-19 17:06 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

sf190404 2019-08-29 16:09 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

stormjun 2019-08-23 10:24 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

xiao7cn 2019-08-02 11:02 评论0 收藏0