如何用Cheerio嵌套遍历元素，返回对象数组而非数组嵌套？

问题核心 #

你当前的代码因为外层map会为每个<li>返回一个由内层map生成的对象数组，最终导致结果是二维数组，而你需要的是扁平的对象数组。

原始HTML结构 #

<body style="overflow: hidden">
    <div class="cookie-box"></div>
    <div id="next">
        <div></div>
        <div>
            <main id="main">
                <article>
                    <div>
                       <h2>title</h2>
                    </div>
                    <div></div>
                    <div class="layout">
                        <form></form>
                        <section aria-labelledby="Train">
                          <ul>
                            <li>
                               <p>title</p>
                               <span>
                                 <a>
                                    <span>123</span>
                                 </a>
                                 <a>
                                   <span>456</span>
                                 </a>
                                 ...
                               </span>
                              ...
                           </li>
                           <li></li>
                           ...
                      </ul>
                   </section>
                    </div>
                </article>
            </main>
        </div>
    </div>
</body>

当前错误代码 #

const data = [...$('[aria-labelledby="Train"] li')].map(e => { 
return [...$item.find('span a')].map(elem=> {
  return {
     p: $(e).find("p").text(),
     number: $(elem).find('span').text()
  }
})

});

期望输出 #

[
  {
    p: "title",
    num: 123
  },
  {
    p: "title",
    num: 456
  }
]

实际错误输出 #

[
 [
  {
    p: "title",
    num: 123
  },
  {
    p: "title",
    num: 456
  }
 ]
]

修复方案 #

方案1：使用flat()扁平化结果 #

在原代码末尾调用flat()方法，将二维数组直接展开为一维数组：

const data = [...$('[aria-labelledby="Train"] li')].map(e => { 
  // 修正原代码的$item为$(e)，否则无法定位当前li下的元素
  return [...$(e).find('span a')].map(elem => {
    return {
      p: $(e).find("p").text(),
      num: $(elem).find('span').text() // 与期望输出的key保持一致
    }
  })
}).flat(); // 新增flat()实现扁平化

方案2：使用flatMap()替代外层map #

flatMap()相当于map()后自动调用flat(1)，一步完成遍历+扁平化：

const data = [...$('[aria-labelledby="Train"] li')].flatMap(e => { 
  return [...$(e).find('span a')].map(elem => {
    return {
      p: $(e).find("p").text(),
      num: $(elem).find('span').text()
    }
  })
});

注意：原代码中的$item是笔误，必须改为$(e)才能正确定位当前<li>节点下的子元素。

内容的提问来源于stack exchange，提问作者learncode