Question

我有两个不同的代码，但是产生了不同的结果：

(async () => {
  const results = new Array(concurrentBrowsers).fill({});
  const browsers = [];
  for (let index = 0; index < concurrentBrowsers; index++) {
    browsers.push(
      (async function() {
        let i = index;
        const browser = await puppeteer.launch({ headless });
        const page = await getNewPage({ browser });
        results[i].loginPage = await timer(actions.loginPage, { page }); // <---- this line
        results[i].homePage = await timer(actions.homePage, {
          page,
          username,
          password
        });
        console.log(i, results[i]);
        browser.close();
      })()
    );
  }
  await Promise.all(browsers);
})();

结果是

1 { loginPage: 2.924, homePage: 19.939 }
2 { loginPage: 2.924, homePage: 21.388 }
3 { loginPage: 2.924, homePage: 21.122 }
0 { loginPage: 2.924, homePage: 21.305 }
4 { loginPage: 2.924, homePage: 21.6 }

还有一个：

(async () => {
  const results = new Array(concurrentBrowsers).fill({});
  const browsers = [];
  for (let index = 0; index < concurrentBrowsers; index++) {
    browsers.push(
      (async function() {
        let i = index;
        const browser = await puppeteer.launch({ headless });
        const page = await getNewPage({ browser });
        let loginPageTime = await timer(actions.loginPage, { page }); // <---- this line
        let homePageTime = await timer(actions.homePage, {
          page,
          username,
          password
        });
        results[i].loginPage = loginPageTime;
        results[i].homePage = homePageTime;
        console.log(i, results[i]);
        browser.close();
      })()
    );
  }
  await Promise.all(browsers);
})();

结果是

2 { loginPage: 3.291, homePage: 17.911 }
4 { loginPage: 3.226, homePage: 18.949 }
1 { loginPage: 3.047, homePage: 22.619 }
0 { loginPage: 3.291, homePage: 24.508 }
3 { loginPage: 3.059, homePage: 26.391 }

第一个代码中有一个错误，似乎loginPage结果总是取自上一次迭代，正如您所看到的，在所有迭代中都设置为相同的值。

唯一的区别是我在第一个例子中将计时器的结果分配给results[i].loginPage，在第二个例子中分配给loginPageTime。

有人可以解释这个区别吗？

由于

Answer 1

事实上，两个代码变体共享同一个问题，但第二个代码块没有显示出错的地方：

const results = new Array(concurrentBrowsers).fill({});

这将创建一个（！）空对象，并将其分配给所有数组条目。无论您对该对象的更改是什么，都将通过所有数组条目看到，因为它们都引用相同的对象。

您看到第一个版本中发生的不一致的原因是，在同一次迭代中的两个await表达式之间发生了其他分配，而第二个代码版本直到就在console.log之前。

您可以按如下方式对results执行正确的初始化：

const results = Array.from(new Array(concurrentBrowsers), _ => ({}));

在不同时间分配给数组会产生不同的结果

1 个答案: