向现有的数组数组添加值

Question

我正在制作一个看起来像var qwe = [[a,b],[c],[d]]的数组，目的是a和b为标识符。

a-d来自读取DOM。 我当前的JS正在做我想要的，但是我想通过它们的标识符组合相似的数组。 运行以下代码将给我

qwe =[
[100,200],[3],[2],  
[200, 300],[12],[4],    
[100,200],[2],[6]
]

但我希望最终数组通过其标识符添加相似的数组，以便最终看起来像（基于前面的示例）

qwe =[
[100,200],[5],[8],
[200, 300],[12],[4]
]

HTML

<table name="tab" id="tab">
  <tr>
    <th>ID</th>
    <th>Location</th>
    <th>Value</th>
    <th>Other</th>
  </tr>
  <tr>
    <td><input name="itinValue" value="100"></td>
    <td><input name="location" value="200"></td>
    <td><input name="num" value='3'></td>
    <td><input name="other" value='2'></td>
  </tr>
  <tr>
    <td><input name="itinValue" value="200"></td>
    <td><input name="location" value="300"></td>
    <td><input name="num" value='12'></td>
    <td><input name="other" value='4'></td>
  </tr>
  <tr>
    <td><input name="itinValue" value="100"></td>
    <td><input name="location" value="200"></td>
    <td><input name="num" value='2'></td>
    <td><input name="other" value='6'></td>
  </tr>
</table>

JS

var table = document.querySelectorAll('[name="itinValue"]');
var qwe = [];

for(var i = 0; i < table.length; i++) {
  var a = document.getElementsByName('itinValue')[i].value;
  var b = document.getElementsByName('location')[i].value;
  var c = document.getElementsByName('num')[i].value;
  var d = document.getElementsByName('other')[i].value;
  var x = [[a,b],[c],[d]];

  //Compare,find,add here

  //if identifiers do not exist
  qwe.push(x);

}

这是我的例子的小提琴，它也可以正确输出html https://jsfiddle.net/3oge7wxg/125/

Answer 1

看起来您想要一个称为关联数组的东西，即python中的“ dict”，一个键/值配对，其中键是您的[a，b]部分，而值是您的[c，d]部分。

您可以通过对象在JavaScript中进行仿真。

进一步的阅读在这里：

• JavaScript关联数组揭秘
• JavaScript基础知识：如何使用键/值对创建字典

Answer 2

您可以尝试查找要更新的项目，如果没有，请推送新的数组。

 var table = document.querySelectorAll('[name="itinValue"]'), qwe = [], a, b, c, d, i, item; for (i = 0; i < table.length; i++) { a = +document.getElementsByName('itinValue')[i].value; b = +document.getElementsByName('location')[i].value; c = +document.getElementsByName('num')[i].value; d = +document.getElementsByName('other')[i].value; item = qwe.find(([[l, r]]) => l === a && r === b); if (item) { item[1][0] += c; item[2][0] += d; } else { qwe.push([[a, b], [c], [d]]); } } console.log(qwe); 

 <table name="tab" id="tab"> <tr> <th>ID</th> <th>Location</th> <th>Value</th> <th>Other</th> </tr> <tr> <td><input name="itinValue" value="100"></td> <td><input name="location" value="200"></td> <td><input name="num" value='3'></td> <td><input name="other" value='2'></td> </tr> <tr> <td><input name="itinValue" value="200"></td> <td><input name="location" value="300"></td> <td><input name="num" value='12'></td> <td><input name="other" value='4'></td> </tr> <tr> <td><input name="itinValue" value="100"></td> <td><input name="location" value="200"></td> <td><input name="num" value='2'></td> <td><input name="other" value='6'></td> </tr> </table> 

Map版本。

 var table = document.querySelectorAll('[name="itinValue"]'), qwe = [], a, b, c, d, i, item map = new Map; for (i = 0; i < table.length; i++) { a = +document.getElementsByName('itinValue')[i].value; b = +document.getElementsByName('location')[i].value; c = +document.getElementsByName('num')[i].value; d = +document.getElementsByName('other')[i].value; item = map.get([a, b].join('|')); if (item) { item[1][0] += c; item[2][0] += d; } else { item = [[a, b], [c], [d]] map.set([a, b].join('|'), item); qwe.push(item); } } console.log(qwe); 

 <table name="tab" id="tab"> <tr> <th>ID</th> <th>Location</th> <th>Value</th> <th>Other</th> </tr> <tr> <td><input name="itinValue" value="100"></td> <td><input name="location" value="200"></td> <td><input name="num" value='3'></td> <td><input name="other" value='2'></td> </tr> <tr> <td><input name="itinValue" value="200"></td> <td><input name="location" value="300"></td> <td><input name="num" value='12'></td> <td><input name="other" value='4'></td> </tr> <tr> <td><input name="itinValue" value="100"></td> <td><input name="location" value="200"></td> <td><input name="num" value='2'></td> <td><input name="other" value='6'></td> </tr> </table> 

Answer 3

我将使用对象，只需创建一个复合键：

var table = document.querySelectorAll('[name="itinValue"]');
var qwe = {};

for(var i = 0; i < table.length; i++) {
  var a = document.getElementsByName('itinValue')[i].value;
  var b = document.getElementsByName('location')[i].value;
  var c = new Number(document.getElementsByName('num')[i].value);
  var d = new Number(document.getElementsByName('other')[i].value);

  var key = a + "_" + b;

  previousValue = qwe[key];
  qwe[key] = previousValue ? [previousValue[0] + c, previousValue[1] + d] : [c, d];

}

您可以像这样转换为所需的数组：

Object.keys(qwe).map(key => [key.split("_")].concat(qwe[key]));

https://jsfiddle.net/3oge7wxg/161/

编辑：数字构造函数； 添加了小提琴

Answer 4

我在您的问题中注意到一些关键事实：

• 您正在循环数据数组。
• 您正在基于作为元组的键来存储数据。
• 键是匹配项的值是附加选项。
• a，b，c，d都是整数，因此，如果它们是字符串，则如果它们是字符串，则需要运行parseint（）。 这可以通过检查当前是否类型为字符串，如果是，则将其转换来完成。

由于这是一个元组，而javascript中没有这些元组，因此您可以执行以下操作。

var m = {};
var table = document.querySelectorAll('[name="itinValue"]');
for(var i = 0; i < table.length; i++) {

  var a = +document.getElementsByName('itinValue')[i].value;
  var b = +document.getElementsByName('location')[i].value;
  var c = +document.getElementsByName('num')[i].value;
  var d = +document.getElementsByName('other')[i].value;

  var key = a.toString() + "-" + b.toString();
  //creates key = "100-200"
  if (m[key]){
    m[key] = [m[key][0] + c, m[key][1] + d]
  }else{
    m[key] = [c,d]
  }
}

最后，您的地图现在将具有唯一键，并且地图看起来像：

{
  "100-200": [5,8],
  "200-300": [12,4]
}

如果出于某种原因，您需要在以后拆分它们的密钥，则只需拆分密钥即可。 map.keys[index].split("-")

我认为这很干净，但是如果您想进一步学习，可以将其变成一堂课。

然后，您将信息存储在qwe中。 如果需要，您可以轻松地将其从映射转换为列表，但这取决于所需的实现目标。 通常，主要区别在于您是否希望维持订单。 qwe仅填充了此信息，并且鉴于您的评论不是您的最佳实现，因此它给了我足够多的见识，使我们相信顺序并不像保留关键数据元素，此关键/元组那样重要。 2个值。

Answer 5

如果您知道每行的字段数，这是检索数组的另一种方法。

var qwe = {};
var els = document.querySelectorAll('table#tab input');
for (i=0; i<els.length; i+=4) {
    var indexer = i < 4 ? 0 : i;
    var row = {
        a: [
            parseInt(els[indexer].value)
          , parseInt(els[indexer+1].value)
        ]
        , c: parseInt(els[indexer+2].value)
        , d: parseInt(els[indexer+3].value)
    };
    row.key = row.a.join('_');

    if (qwe[row.key]) {
        qwe[row.key][1][0]+=row.c;
        qwe[row.key][2][0]+=row.d;
    } else {
        qwe[row.key] = [row.a, [row.c], [row.d]];
    }
}

console.log( Object.values(qwe) );