map循环、for循环总是出现最后一个值解决方案【************多次出现的问题****************】

问题一：点击显示for循环里的值

问题：每次点击都会弹出最后一个值3

<ul id="myul">
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
</ul>

var u=document.getElementById("myul");
var l=u.getElementsByTagName("li");
for(var i=0;i<l.length;i++){
    l[i].onclick=function(){
       alert(i);  //这样每次点击都会弹出最后一个值3
    }
}

解决方案：

 第⼀种：使⽤
声明变量，let会使for循环构成块级作⽤域，这个变量只存在于当前的作⽤域

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

第⼆种：把每次的变量都保存下来

for(let i=0;i<l.length;i++){
   l[i].temp=i;
   l[i].onclick=function(){
　　　　alert(this.temp);
　　}
}

第三种：使⽤闭包，让i作为参数

for(var i=0;i<l.length;i++){

　　(function(temp){

       l[i].onclick=function(){

　　　　　　alert(temp);

　　　　}

　　})(i);

}

第四种：使⽤闭包，让i作为局部变量

for(var i=0;i<l.length;i++){
　　(function(){
　　　　var temp=i;
       l[i].onclick=function(){
　　　　alert(temp);
　　　　}
　　})();
}

第五种：返回函数

for(var i=0;i<l.length;i++){
    l[i].onclick=function(temp){
　　　　returnfunction(){
　　　　alert(temp);
　　　　}
　　}(i);
}
例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>For循环内异步操作，总是得到最后一次循环变量？</title>
</head>
<body>

<script type="text/javascript">
    
    for(var i=0; i<5; i++) {
      setTimeout(function() {
        console.log(i)
      },1000)
    }
    

   for(let i=0; i<5; i++) {
      setTimeout(function() {
        console.log(i)
      },1000)
    }

    //输出0,1,2,3,4

    

    for(var i=0; i<5; i++) {
      try{
        throw(i)
      } catch(j) {
        setTimeout(function() {
          console.log(j)
        },1000)
      }
    }
    //输出0,1,2,3,4

    

   for(var i=0; i<5; i++) {
      (function(i) {
        setTimeout(function() {
          console.log(i)
        },1000)
      })(i)
    }
    //输出0,1,2,3,4


</script>
</body>
</html>

 

 

问题二：for循环后，显示默认值

 

============================团购弹窗的时候，总是出现最后一个磅数问题==========================================

 

 

 

goods.map((item, index) => {
  this.currentIndex = index;
  //this.current = item;  //这样直接赋值的话，最后循环出来的值总是最后一个，因此不能直接赋值
 
  if(index==0){   //显示默认值，要在需要显示的当前值的时候，判断索引值index
       this.current = item;
  }
});

 

posted @ 2022-06-21 12:28  Shimily  阅读(1178)  评论(0)    收藏  举报