如何在 js puppeteer 中访问 map 函数之外的变量答案

【问题标题】：How do I acces a variables outside the map function in js puppeteer如何在 js puppeteer 中访问 map 函数之外的变量
【发布时间】：2021-10-04 01:29:53
【问题描述】：

好的，所以我正在尝试使用映射函数从Website（使用 puppeteer）获取多个元素，这些元素有多个子元素，它们的子元素有多个子元素，依此类推。所以我需要以某种方式存储这些物品吗？

而且我无法同时访问 keyData1 和 keyData2 AND keyData3，我必须以我不知道如何访问它们的方式访问它们。我试图将它们推送到列表中，但我记得我仍然不知道如何从函数外部访问它，无论如何如果有人有解决方案请告诉我我真的需要学习这个地图东西我是初学者顺便说一句这是代码

const test = await page.evaluate(() => {

    var list= [];

    [...document.querySelectorAll('.item.util-clearfix')].map(item =>{

       keyData1 = item.querySelector('h3').innerText;
       list.push(keyData1);

      [...item.querySelectorAll('.sub-item')].map(item =>{

         keyData2 = item.querySelector('h4').innerText;
         list.push(keyData2);

        [...item.querySelectorAll('li')].map(item=>{

          var keyData3 = item.innerText;
          list.push(keyData3);

          console.log(list);
        });
      });
    });

【问题讨论】：

你的意思是说返回列表回到主程序？
是的，那也行，我只想能够与该列表中的所有项目作为一个整体进行交互，你知道，就像我必须将它们联合起来，最好是一个列表
您要获取哪些数据或您要执行哪些操作？当前代码有什么问题？

标签： javascript list function mapping puppeteer

【解决方案1】：

如果我理解正确，您需要一些层次结构的数据树：对象对象的对象作为带有叶子数组（最终元素）的分支。试试这个，也许这就是你需要的：

const test = await page.evaluate(() => {
  const tree = {};

  for (const item of document.querySelectorAll('.item.util-clearfix')) {
    const keyData1 = item.querySelector('h3').innerText;
    tree[keyData1] = {};

    for (const subItem of item.querySelectorAll('.sub-item')) {
      const keyData2 = subItem.querySelector('h4').innerText;
      tree[keyData1][keyData2] = [];

      for (const li of subItem.querySelectorAll('li')) {
        const keyData3 = li.innerText;
        tree[keyData1][keyData2].push(keyData3);
      }
    }
  }

  return tree;
});

console.log(test);
// or maybe:
// console.log(JSON.stringify(test, null, '  '));

然后您可以使用Object.keys()、Object.values() 或Object.entries() 遍历分支，并使用数组方法遍历叶子。

【讨论】：