jQuery .toArray() 在.map()中未按预期工作，求技术解析

我完全懂你在处理Participants和Winners两个表格的数据提取时，对.toArray()的运行逻辑感到摸不着头脑——毕竟在DOM操作和数据转换的交叉场景里，jQuery集合和原生数组的差异很容易让人混淆。咱们先把你的场景补全，再一步步拆解清楚。

先还原你的场景代码 #

首先我先补全你截断的HTML和符合描述的jQuery代码：

HTML结构

<h2>Participants</h2>
<table border="1">
  <tbody>
    <tr>
      <td>01</td>
      <td>Andrew</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Emma</td>
    </tr>
  </tbody>
</table>

<h2>Winners</h2>
<table border="1">
  <tbody>
    <tr>
      <td>01</td>
      <td>Andrew</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Liam</td>
    </tr>
  </tbody>
</table>

你的jQuery数据提取代码

// 提取Participants表格数据
const participants = $('table:eq(0) tr').map(function() {
  return {
    id: $(this).find('td:eq(0)').text(),
    name: $(this).find('td:eq(1)').text()
  };
}).toArray();

// 提取Winners表格数据
const winners = $('table:eq(1) tr').map(function() {
  return {
    id: $(this).find('td:eq(0)').text(),
    name: $(this).find('td:eq(1)').text()
  };
}).toArray();

核心：.toArray()到底在做什么？ #

这里的关键区别是：jQuery的.map()方法返回的不是原生JS数组，而是一个jQuery对象集合。

• 这个jQuery对象看起来像数组（有length属性，能通过索引访问元素），但它本质是一个包装了数据/元素的特殊对象，不能直接使用原生数组的所有方法（比如Array.prototype.find()、Array.prototype.reduce()这些）。
• .toArray()的作用就是把这个jQuery集合“拆包”，转换成真正的原生JavaScript数组。

举个直观的例子：
如果不用.toArray()，你尝试执行participants.find(p => p.id === '01')会直接报错——因为jQuery对象的.find()方法是用来查找DOM元素的，不是数组过滤。但转换成原生数组后，这条代码就能正常返回对应的对象。

表格场景下的细节拆解 #

1. 当你用$('table:eq(0) tr')选择表格行时，得到的是包含所有<tr>DOM元素的jQuery集合。
2. .map()遍历每个<tr>，把每行转换成一个包含id和name的自定义对象，此时返回的还是一个jQuery对象（里面包装了这些自定义对象）。
3. .toArray()把这个jQuery对象里的内容提取出来，变成一个普通的对象数组，比如：

   // participants数组的最终形态
   [{id: '01', name: 'Andrew'}, {id: '02', name: 'Emma'}]
   

额外小提示 #

如果你习惯更简洁的写法，jQuery的.get()方法和.toArray()的作用完全相同——$('...').map(...).get()和.toArray()效果一致，只是写法不同，你可以根据喜好选择。

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