1. 程式人生 > >微信小程序中的循環遍歷問題

微信小程序中的循環遍歷問題

.sh success show code 我們 log ast ons 小程序

比如:如果在微信小程序中要遍歷輸出 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);
        }
      })
    }

結果還是:

技術分享圖片

微信小程序中的循環遍歷問題