通过 Javascript 2d 数组进行过滤

Filtering through Javascript 2d array

本文关键字：过滤 数组 Javascript 2d 通过      更新时间：2023-09-26

>我有一个这样的二维数组 

 var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];

但是在 html 中，我想像这样渲染这个数组

**Names**   **Numbers**
  alex   => 2,4,6
  jhon   => 11,13
您可以使用

reduce()返回对象，然后Object.keys()并forEach循环以添加到HTML

var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
var result = items.reduce(function(r, e) {
  r[e[0]] = (r[e[0]] || []).concat(e[1]);
  return r;
}, {});
var rows = '';
Object.keys(result).forEach(function(e) {
  rows += '<tr><td>' + e + '</td><td>' + result[e].join(',') + '</td></tr>';
});
document.querySelector('table tbody').innerHTML += rows;
<table>
  <tbody>
    <tr><td>Names</td><td>Numbers</td></tr>
  </tbody>
</table>

我提出了一种jQuery方法（这不是最好的解决方案，而只是不同的观点）：

$(function () {
  var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
  $.each(items, function(indexInArray, value) {
    var cellIfExist = $('#result').find('td:contains(' + value[0] + ')');
    if (cellIfExist.length > 0) {
      cellIfExist.next().text(cellIfExist.next().text() + ', ' + value[1]);
    } else {
      $('#result').append('<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>')
    }
  });
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<table id="result">
    <tr>
        <td>**Names**</td>
        <td>**Numbers**</td>
    </tr>
</table>

老派的方法可能是遍历数组，并在这样做的同时构建一个非常像关联数组的对象。

 var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
 var group = { }
 for(var i = 0; i < items.length; i++) {
    var pair = items[i];
    if(group[pair[0]]) {
    group[pair[0]].push(pair[1]);
  }
 else {
    group[pair[0]] = [pair[1]];
  }
}

然后，"组"是分组对象。使用 for 循环迭代它。

使用Array.forEach函数的简单解决方案：

var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]],
    names = {};
items.forEach(function (arr) {
    (names[arr[0]])? names[arr[0]].push(arr[1]) : (names[arr[0]] = [arr[1]]);
});
    
console.log(JSON.stringify(names, 0, 4));

相关文章：