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

Question

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

而且我无法同时访问 keyData1 和 keyData2 以及 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);
        });
      });
    });

Answer 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() or Object.entries() 遍历分支并使用数组方法遍历叶子。

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

How do I acces a variables outside the map function in js puppeteer

javascript

mapping

function

list

puppeteer