将值添加到现有数组数组

时间：2018-03-14 14:17:33

标签： javascript arrays

我制作的数组看起来像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/

5 个答案:

答案 0 :(得分：0)

看起来你想要一个叫做关联数组的东西，python中的“dict”，一个键/值配对，键是你的[a，b]部分，你的[c，d]部分的值。

您可以通过对象在JavaScript中模拟它。

进一步阅读：

答案 1 :(得分：0)

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

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/

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

答案 2 :(得分：0)

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

  • 您正在循环数据数组。
  • 您正在根据作为元组的键存储数据。
  • 其中key是匹配的值是一个附加选项。
  • 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个值。

答案 3 :(得分：0)

如果你知道每行的字段数量，这里有另一种检索数组的方法。

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) );

答案 4 :(得分：-1)

您可以尝试找到要更新的项目，如果没有推送新阵列。

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>

相关问题
最新问题