Node+Puppeteer+Cheerio爬取表格：表头值无法作为对象键的问题

我正在用Node.js、Puppeteer和Cheerio爬取表格的表头与表尾信息，调试时确认循环里能拿到正确的表头文本hElement和表尾文本fElement，但把数据推入数组时，所有对象的键都是hElement而非实际的表头值，输出数组示例如下，请问哪里出错了？

代码片段 #

const data = await page.content(); // get all page html
const $ = cheerio.load(data);

const head = $('#tblAcctBal > thead > tr');
const foot = $('#tblAcctBal > tfoot > tr');
const h = $(head).find('th');
const f = $(foot).find('th');
for (let i = 0; i < h.length; i++) {
  const hElement = $(h[i]).text();
  const fElement = $(f[i]).text();
  myArr.push({hElement: fElement });
}
console.log(myArr);

输出示例 #

0:
{hElement: ''}
1:
{hElement: ''}
2:
{hElement: ''}
3:
{hElement: ''}
4:
{hElement: ''}
5:
{hElement: '$0.00'}
6:
{hElement: '$0.00'}
7:
{hElement: '$0.00'}
8:
{hElement: '$0.00'}
9:
{hElement: '$0.00'}

问题出在对象字面量的写法上：你直接写{hElement: fElement}时，JavaScript会把hElement当作固定的字符串键名，而不是把变量hElement的实际值作为键。

要解决这个问题，需要使用JavaScript的计算属性名语法——把变量用方括号[]包裹起来，这样就会将变量的取值作为对象的键名。

修改后的循环代码如下：

for (let i = 0; i < h.length; i++) {
  const hElement = $(h[i]).text();
  const fElement = $(f[i]).text();
  // 用方括号包裹hElement，将变量值作为键名
  myArr.push({ [hElement]: fElement });
}

这样修改后，数组里每个对象的键就会是表头的实际文本值，而不是固定的hElement了。

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