var函数=[];//让我们创建3个函数对于(变量i=0;i<3;i++){//并将其存储在funcs中funcs[i]=函数(){//每个都应该记录其值。console.log(“我的值:”,i);};}对于(变量j=0;j<3;j++){//现在让我们逐一查看函数[j]();}

它输出以下内容:

我的价值:3我的价值:3我的价值:3

而我希望它输出:

我的值:0我的价值:1我的价值:2


当使用事件侦听器导致函数运行延迟时,也会出现同样的问题:

var buttons=document.getElementsByTagName(“button”);//让我们创建3个函数for(var i=0;i<buttons.length;i++){//作为事件侦听器buttons[i].addEventListener(“单击”,函数(){//每个都应该记录其值。console.log(“我的值:”,i);});}<按钮>0</按钮><br/><button>1</button><br/><按钮>2</按钮>

…或异步代码,例如使用Promises:

//一些异步等待函数const wait=(ms)=>new Promise((解析,拒绝)=>setTimeout(解析,ms));对于(变量i=0;i<3;i++){//一旦每个承诺得到解决,就记录“i”。等待(i*100)。然后(()=>console.log(i));}

在for in和for of循环中也很明显:

常量arr=[1,2,3];常量fns=[];用于(arr中的变量i){fns.push(()=>console.log(“index:”,i));}对于(arr的var v){fns.push(()=>console.log(“值:”,v));}for(arr常量){var obj={number:n};//或新的MyLibObject({…})fns.push(()=>console.log(“n:”,n,“|”,“obj:”,JSON.stringify(obj)));}for(fns的var f){f();}

这个基本问题的解决方案是什么?


当前回答

好的。我通读了所有答案。尽管这里有一个很好的解释,但我还是没能让它发挥作用。所以我去上网了。位于的人员https://dzone.com/articles/why-does-javascript-loop-only-use-last-value有一个答案,这里没有给出。所以我想我会发布一个简短的例子。这对我来说更有意义。

长短不一的是,LET命令很好,但现在才被使用。然而,LET命令实际上只是一个TRY-CATCH组合。这一点可以追溯到IE3(我相信)。使用TRY-CATCH组合-生活简单而美好。可能是EMCScript人员决定使用它的原因。它也不需要setTimeout()函数。所以没有时间浪费。基本上,每个FOR循环需要一个TRY-CATCH组合。下面是一个示例:

    for( var i in myArray ){
       try{ throw i }
       catch(ii){
// Do whatever it is you want to do with ii
          }
       }

如果您有多个FOR循环,只需为每个循环设置一个TRY-CATCH组合。此外,就我个人而言,我总是使用任何FOR变量的双字母。所以“ii”代表“i”等等。我在一个例程中使用这种技术将鼠标悬停命令发送到另一个例程。

其他回答

Try:

var函数=[];对于(变量i=0;i<3;i++){funcs[i]=(函数(索引){返回函数(){console.log(“我的值:”+索引);};}(i) );}对于(变量j=0;j<3;j++){函数[j]();}

编辑(2014):

就我个人而言,@Aust最近关于使用.bind的回答是目前最好的解决方法。当您不需要或不想使用bind的thisArg时,也可以使用破折号/下划线的_.partial。

这是异步代码中经常遇到的问题,变量i是可变的,在调用函数时,使用i的代码将被执行,并且i将变为其最后一个值,因此意味着在循环中创建的所有函数都将创建一个闭包,i将等于3(for循环的上限+1)。

解决此问题的一个方法是创建一个函数,该函数将为每次迭代保存i的值,并强制复制i(因为它是一个原语,如果有帮助,请将其视为快照)。

为什么不在创建第一个(也是唯一的)循环之后,简单地调用它们,例如:

 var funcs = [];
    for (var i = 0; i < 3; i++) {
    // let's create 3 functions
    funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
    };
    funcs[i]();// and now let's run each one to see
    }

问题是,每个匿名函数中的变量i都绑定到函数外部的同一变量。

ES6解决方案:让

ECMAScript 6(ES6)引入了新的let和const关键字,它们的作用域不同于基于var的变量。例如,在具有基于let的索引的循环中,循环中的每个迭代都将有一个具有循环范围的新变量i,因此您的代码将按预期工作。有很多资源,但我推荐2ality的块范围帖子作为一个很好的信息来源。

for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value: " + i);
  };
}

不过,请注意,IE9-IE11和Edge 14之前的Edge支持以上错误(它们不会每次都创建一个新的i,所以上面的所有函数都会记录3,就像我们使用var时一样)。边缘14最终得到了正确的结果。


ES5.1解决方案:针对每个

随着Array.prototype.forEach函数的广泛使用(2015年),值得注意的是,在那些主要涉及对值数组进行迭代的情况下,.forEach()提供了一种干净、自然的方式,可以为每次迭代获得一个独特的闭包。也就是说,假设您有某种包含值(DOM引用、对象等)的数组,并且设置特定于每个元素的回调时会出现问题,您可以这样做:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

其思想是,与.forEach循环一起使用的回调函数的每次调用都将是其自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它,它不会与在迭代的其他步骤中建立的任何其他回调冲突。

如果您恰好在jQuery中工作,$.each()函数将为您提供类似的功能。


经典解决方案:封口

您要做的是将每个函数内的变量绑定到函数外的一个单独的不变值:

var函数=[];函数createfunc(i){返回函数(){console.log(“我的值:”+i);};}对于(变量i=0;i<3;i++){funcs[i]=创建函数(i);}对于(变量j=0;j<3;j++){//现在让我们逐一查看函数[j]();}

由于JavaScript中没有块作用域-只有函数作用域-通过将函数创建包装在一个新函数中,可以确保“i”的值保持如预期的那样。

只需将var关键字更改为let。

var是函数范围的。

let是块范围的。

当您开始编写代码时,for循环将迭代并将i的值赋值为3,在整个代码中该值将保持为3。我建议您阅读更多关于节点中作用域的信息(let、var、const和其他)

funcs = [];
for (let i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] =async function() {          // and store them in funcs
    await console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}