javascript - 通过比较多个数组中的单个值来创建新的 jQuery 数组

Question

有很多关于此问题的帖子，但我的 JS 能力还没有为我的案例找出解决方案。

我有两个数组，一个是 Google Lat/Lng 变量的硬编码数组(屏幕截图中的 Array2)，另一个是通过迭代 DOM 元素构造的数组(屏幕截图中的 Array1)。我需要将 Array2 与从 DOM 动态创建的 Array1 进行比较，并创建一个仅包含 Array1 中找到的 Array2 对象的新 Array3。这将是我迭代以创建 map 标记的数组。以下是我的代码示例。

数组1

var gdata = new Array();

$("table tbody tr:gt(0)").each(function (i) {
    gdata[i] = new Array();
    $(this).children('td').each(function (ii) {
        gdata[i][ii] = $(this).text();
    });
});

数组2

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ...
]

Answer 1

由于您的检查似乎只处理 HTML 表第一列中的值，因此您不需要读取 gdata 中的所有内容，只需读取第一列即可。然后，您可以将第一列中的文本转换为一个以文本为键的对象，这样可以加快查找速度:

var gdata = {};
$("table tbody tr:gt(0)>td:first-child").each(function () {
    gdata[$(this).text()] = true;
});

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ['c3', 32.840777, -117.244864],
];

var array3 = markers.filter(function(row) {
    return row[0] in gdata; 
});

console.log(array3);

td, th { font-size: 9px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing=0 cellpadding=0 border=1>
   <tr>
      <th>heading</th><th>heading</th><th>heading</th>
   </tr>
   <tr>
      <td>b</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a20</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a0</td><td>123</td><td>123</td>
   </tr>
</table>

如果您支持 ES6，则可以使用 Set 和箭头函数:

var gdata = new Set($("table tbody tr:gt(0)>td:first-child")
                    .map( (i,td) => $(td).text()).get());

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ['c3', 32.840777, -117.244864],
];

var array3 = markers.filter( ([id]) => gdata.has(id) );

console.log(array3);

td, th { font-size: 9px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing=0 cellpadding=0 border=1>
   <tr>
      <th>heading</th><th>heading</th><th>heading</th>
   </tr>
   <tr>
      <td>b</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a20</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a0</td><td>123</td><td>123</td>
   </tr>
</table>