jQuery .toArray()在.map()中没有按预期工作

时间:2018-04-08 22:23:31

标签: jquery

我很难理解jQuery的Retrieving https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm curl: (7) Failed to connect to dl.fedoraproject.org port 443: Connection timed out error: skipping https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm - transfer failed在这种情况下的行为。

我有2个.toArray(),一个用于"参与者"和#34;赢家"。 我想使用jQuery从这些表中提取一些数据。

我使用2个<table>函数将表的内容转换为数组/对象,看看代码:

HTML:

.map()

的JavaScript:

<h2>Participants</h2>
<table border="1">
  <tbody>
    <tr>
      <td>01</td>
      <td>Andrew</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Julian</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Matt</td>
    </tr>
    <tr>
      <td>04</td>
      <td>Sarah</td>
    </tr>
  </tbody>
</table>

<h2>Winners</h2>
<table border="1">
  <tbody>
    <tr>
      <td>01</td>
      <td>Andrew</td>
    </tr>
    <tr>
      <td>04</td>
      <td>Sarah</td>
    </tr>
  </tbody>
</table>

[1] 没有const result = $('table') .map((i, table) => { return $(table) .find('tbody tr') .map((j, row) => { const $row = $(row); return { number: $row.find('td:nth-child(1)').text(), name: $row.find('td:nth-child(2)').text(), }; }) .toArray(); // [1] }) .toArray(); console.log(result); 我得到一个包含2个jQuery对象的数组,每个表对应一个。 (太棒了!)
但是当我突然添加.toArray()时它返回一个包含所有对象的单个数组,为什么? 那之前的分离在哪里?!

预期输出:

.toArray()

实际输出:

[
  [
    {number: "01", name: "Andrew"},
    {number: "02", name: "Julian"},
    {number: "03", name: "Matt"},
    {number: "04", name: "Sarah"}
  ],
  [
    {number: "01", name: "Andrew"},
    {number: "04", name: "Sarah"}
  ]
]

我做了一个jsfiddle,你可以自己看看:https://jsfiddle.net/93cLyq6h/22/

1 个答案:

答案 0 :(得分:1)

您的问题实际上不在于.toArray(),而在于jquery的.map()Here是另一个解释这个问题的答案,但是当.map()参数函数返回一个数组时,每个元素都插入到集合而不是数组本身。因此,您的外部.map()将两个数组展平为一个。

  

如果返回一个数组,则数组中的元素将插入到集合中。

Is there a jQuery map utility that doesn't automically flatten?这可以帮助您获得所需的内容。