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

Question

这方面有很多帖子，但是我的 JS 印章还没有找到适合我的情况的解决方案。

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

数组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>

Answer 2

我认为你应该使用类似的东西：

var results = []; // the results array

for (var i = 0; i < markers.length; i++) // iterate for every marker key
{
   results = results.concat(gdata.filter(function(item) { return item[8] == markers[i][0]; }));
}

在 js 中，我们可以使用 filter 方法通过查询语句仅检索给定数组的一部分。在这种情况下，我们使用了每个标记键与整个 gdata 的比较数组.. 最后 - 我们将每个标记的相关项目连接到目标结果数组

Answer 3

如果其中任何一个 (some()) 与动态列表匹配，听起来您想要 filter() 静态列表：

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

var dynamic = [
    ['a0', 32.840801, -117.244842],
    ['a0zz', 32.840801, -117.244842]
];

var found = markers.filter( m => dynamic.some( d => d[0] === m[0]) );


console.log(found)