for循环遍历时var let的区别

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

1 for (var i = 0; i < 10; i++) {
2 
3     console.log(i);
4 
5 }

输出：

​

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

 1 for (var i = 0; i < 10; i++) {
 2 
 3     wx.showToast({
 4 
 5         title: 'haha',
 6 
 7         success: function () {
 8 
 9             console.log(i);
10 
11         }
12 
13     })
14 
15 }

 

输出：

​

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

可以理解为一个存储单元与与分配的所以下属存储单元都相通（自己的理解）

解决方法:

1、使用临时函数（兼容所有）

 1 for (var i = 0; i < 10; i++) {
 2 
 3     (function (j) {
 4 
 5         wx.showToast({
 6 
 7             title: 'haha',
 8 
 9             success: function () {
10 
11                 console.log(j);
12 
13             }
14 
15         })
16 
17     })(i);
18 
19 }

 

等同于

 1 for (var i = 0; i < 10; i++) {
 2 
 3     function temp(j) {
 4 
 5         wx.showToast({
 6 
 7             title: 'haha',
 8 
 9             success: function () {
10 
11                 console.log(j);
12 
13             }
14 
15         })
16 
17     };
18 
19     temp(i);
20 
21 }

 

输出：

​

2、使用ES6中let的块作用域（推荐）（低版本IE不兼容）

 1 for (let i = 0; i < 10; i++) {
 2 
 3     wx.showToast({
 4 
 5         title: 'haha',
 6 
 7         success: function () {
 8 
 9             console.log(i);
10 
11         }
12 
13     })
14 
15 }

 

输出：

​

 

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

 1 let i;
 2 
 3 for (i = 0; i < 10; i++) {
 4 
 5     wx.showToast({
 6 
 7         title: 'haha',
 8 
 9         success: function () {
10 
11             console.log(i);
12 
13         }
14 
15     })
16 
17 }

 

结果还是：

​

posted @ 2021-01-25 16:16  tutouman  阅读(195)  评论(0)    收藏  举报