javascript - 在哪里调用 for 循环来迭代值数组

Question

我有一个 javascript 函数，我用它来抓取。我将它与 Puppeteer 一起使用。如果我使用一个值，它可以工作，但如果我引入一个 for 循环来迭代一组值，它就会失败。我想知道引入 for 循环的正确位置是什么。

这是我的工作基本脚本:

const puppeteer = require('puppeteer');
var listOfURLs = [url1, url2,url3,url4,url5]
let scrape = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(listOfURLs[0]);

  const result = await page.evaluate(() => {
    let title = document.querySelector('#innerLeft > div.dspPropertyTitle > h1').innerText;
    return {
      title
    }

  });

  browser.close();
  return result;
};
scrape().then((value) => {
  console.log(value); 
});

我的 URL 包含在变量 listOfURLs 中。如果我手动引用 listOfURLs[0](如上面的示例所示)，它就可以正常工作。现在我希望它循环遍历整个数组并访问 listOfURLs[i] 形式的值，所以我尝试了这个，但没有成功。我不知道出了什么问题。

const puppeteer = require('puppeteer');    
var listOfURLs = [url1, url2, url3, url4, url5]
for (i=0; i<=listOfURLs.length; i++) {
  let scrape = async () => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();

    await page.goto(listOfURLs[i]);

    const result = await page.evaluate(() => {
      let title = document.querySelector('#innerLeft > div.dspPropertyTitle > h1').innerText;
      return {
        title
      }

    });

    browser.close();
    return result;
  };
  scrape().then((value) => {
    console.log(value); 
  });
}

Answer 1

i被吊起，并且scrape是异步的 - 在 scrape 之后await s 在最开始，for循环将完成，所以 i将变成listOfURLs.length + 1 ，这意味着访问 listOfURLs[i]以后就不行了。

使用let相反，这样每次迭代都有一个单独的 i 绑定(bind).

您还应该测试i < listOfURLs.length ，不是i <= listOfURLs.length ，因为i < listOfURLs[listOfURLs.length]将是未定义的:

for (let i=0; i < listOfURLs.length; i++) {

但是这些for循环非常丑陋，并且是此类问题的常见根源 - 您可能会考虑 forEach相反，它具有更好的抽象，具有函数范围(可组合)并且不需要手动迭代(如果您可以并行发送请求):

listOfURLs.forEach(async (url) => {
  const scrape = async () => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();
    await page.goto(url);
    const result = await page.evaluate(() => {
      const title = document.querySelector('#innerLeft > div.dspPropertyTitle > h1').innerText;
      return { title };
    });
    browser.close();
    return result;
  };
  scrape().then((value) => {
    console.log(value); 
  });
});

(如果您想串行发出请求，使用数组方法的另一个选项是 reduce)