for循环遍历时var let的区别

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

for (var i = 0; i < 10; i++) {

    console.log(i);

}

输出：

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

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的块作用域（推荐）（低版本IE不兼容）

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);

        }

    })

}

结果还是：