javascript循环不能正确输出i值的问题。

最新推荐文章于 2021-12-30 11:32:15 发布

落明

最新推荐文章于 2021-12-30 11:32:15 发布

阅读量555

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/Young_Light_Lu/article/details/78564103

版权

js学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

对于javascript的循环取值是每个开发者都遇到过的问题，例如，下面这个例子我们并不能得到想要的结果：

<body>
 <ul>
    <li>fas</li>
    <li>sf</li>
    <li>fas</li>
    <li>sf</li>
    <li>sf</li>
 </ul>
 <script type="text/javascript">
 <!--
 window.onload=function(){
     var lis=document.getElementsByTagName('li');
     var i,len=lis.length;
     for ( i=0;i<len ;i++ )
      {
        //alert(i);                                  // 依次为0,1,2,3,4
            lis[i].onclick=function(){
            alert(i);                                           //5
            }
   }
</body>

我们是希望点击每一个li标签都显示它自己的索引值，但由于内部函数调用时外部的 i 时，i 已经循环完毕，值为5，所以不能正确输出，更详细的解释在于此时onclick函数时一个闭包函数，每次引用的时外部函数的最后一个变量。

关于解决放法，有很多中，在此介绍下我自己常用的吧：

方法一：将循环中的 i 值设置为事件对象的属性，在上面的例子中，事件对象就是lis[i];

window.onload=function(){
     var lis=document.getElementsByTagName('li');
     var i,len=lis.length;
     for ( i=0;i<len ;i++ )
      {
         lis[i].index=i;
        lis[i].onclick=function(){
            alert(this.index);    
        }
      }

方法二：外层加一个立即调用的匿名函数；

window.onload=function(){
     var lis=document.getElementsByTagName('li');
     var i,len=lis.length;
     for ( i=0;i<len ;i++ )
      {
        (function(e){
            lis[i].onclick=function(){
                    alert(e);  }  
         })(i);
 }

此时每次调用onclick函数时，传入的参数时外层函数的e,也就时逐个传入的 i 值。

方法三：仍然选择使用匿名函数

 for ( i=0;i<len ;i++ )
      {
        lis[i].onclick=(function(arg){
            return function(){
                alert(arg); } 
            })(i);
}

原理同上，事件函数调用时调用的值arg是外层函数的arg，此值是逐个又i传入的！

方法四：Function方法

 for ( i=0;i<len ;i++ )
      {
        lis[i].onclick=new Function("alert(" + i + ");");   //每次都会出new一个新函数
    }

方法五：ES6的let方法；

for( let i=0;i<len; i++ ) {       
         lis[i].onclick = function() {       
             alert(i);       
        }     
}

低版本浏览器会报错。

好了，以上就是个人总结的取循环中i值的一些方法，希望能对大家有帮助！

本文参考博客：http://blog.csdn.net/u013084331/article/details/50716467；

落明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录