javascript - 然后在 Javascript 中使用外部变量

Question

我是 javascript 新手，大部分时间都花在编写后端 java 程序上。我无法弄清楚如何在调用时捕获作用域变量的当前状态，例如:-

idList = [0, 1, 2, 3, 4, 5];

for(id in idList) {
    new Promise(function(resolve, reject) { 
        // A mock async action using setTimeout
        setTimeout(function() {
            resolve(10); 
        }, 300);
    }).then(function(num) { 
        console.log(id + ': ' + num); 
        return num * 2; 
    });
}

输出是:-

"5: 10"
"5: 10"
"5: 10"
"5: 10"
"5: 10"
"5: 10"

但我希望输出是

"0: 10"
"1: 10"
"2: 10"
"3: 10"
"4: 10"
"5: 10"

即想要捕获变量 id 的当前状态。

Answer 1

对此有一些解决方案。

最容易实现的方法(考虑到您提供的代码)，就是简单地在 for 循环中的 id 之前放置一个 let 。

for (let id in idList) { ... }

由于您使用的 for...in 循环是异步的，因此它在循环中包含的内部函数返回之前完成，因此 id 将始终为无论循环结束时是什么(在本例中为 5)。

必须使用 let 而不是 var 的原因是 let 语句声明了一个 block 作用域局部变量。

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. (source)

因此，let 可以工作，var(或者全局变量，如您所拥有的那样)则不行。

但是，当索引顺序很重要时，建议不要在数组上使用 for...in 循环。 (source)

<小时/>

更好的解决方案是使用for...of循环，它将以一致的顺序访问元素。这也是一个相当简单的更改，只需将单词“in”替换为“of”即可创建循环。

for (let id of idList) { ... }

<小时/>

更具声明性的解决方案是使用 JavaScript 创建的每个数组上可用的 forEach 方法。这是为数组中的每个元素执行回调函数。

const idList = [0, 1, 2, 3, 4, 5];

idList.forEach(id => {
    new Promise((resolve, reject) => { 
        setTimeout(() => resolve(10), 300);
    })
    .then((num) => { 
        console.log(id + ': ' + num); 
        return num * 2; 
    });
})

但是，请注意，forEach 将始终返回未定义，即使您为回调提供了返回值。对于您这里的情况来说，这似乎不是问题，因为您要做的就是 console.log 传入异步值。