向現有的數組數組添加值

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