微信小程序中的循环遍历问题

Posted 2020-10-31 feiquan

比如：如果在微信小程序中要遍历输出 0-9 的数，我们会使用for循环

for(var i=0;i<10;i++){
      console.log(i);
    }

确实结果也是这样：

但是，如果我在循环时同时调用wx的api接口10次，那么输出的结果就会不同（这是产生了闭关的效应）

eg：每次调用一次wx.showToast()接口,并在成功时输出循环的值。

for(var i=0;i<10;i++){
      wx.showToast({
        title: \'haha\',
        success:function(){
          console.log(i);
        }
      })
    }

结果：

可以看到输出了10次10，这是因为i自变量的作用域范围，在这里它相当于全局变量。

两种解决办法：

1.使用临时函数

　

for(var i=0;i<10;i++){
      (function(j){
        wx.showToast({
          title: \'haha\',
          success: function () {
            console.log(j);
          }
        })
      })(i);
    }

以上代码同：

for(var i=0;i<10;i++){
      function temp(j){
        wx.showToast({
          title: \'haha\',
          success: function () {
            console.log(j);
          }
        })
      };
      temp(i);
    }
  },

结果：

2.使用ES6中let的块作用域（推荐）

for(let i=0;i<10;i++){
      wx.showToast({
        title: \'haha\',
        success: function () {
          console.log(i);
        }
      })
    }

结果同上。

但是如果将let i定义在函数外部，则对于循环来说还是相当于全局变量

let i;
    for(i=0;i<10;i++){
      wx.showToast({
        title: \'haha\',
        success: function () {
          console.log(i);
        }
      })
    }

结果还是：