从循环动态地制作一个Javascript数组

Question

我知道有很多关于此的问题，但我找不到解决问题的方法，并且已经研究了一段时间。我有两组具有相同名称的输入字段，一组用于产品代码，一组用于产品名称。这些输入字段可以被用户拿走并添加到 DOM 中，因此可以有多个：

这是我目前所拥有的，虽然这会保存它，所以所有代码都在一个数组中，所有名称都在另一个数组中：

var updatedContent = [];
var varCode = {};
var varName = {};

$('.productVariationWrap.edit input[name="varVariationCode[]"]')
   .each(function(i, vali){
     varCode[i] = $(this).val();
   });

$('.productVariationWrap.edit input[name="varVariationName[]"]')
  .each(function(i1, vali1){
    varName[i1] = $(this).val();
  });

updatedContent.push(varCode);
updatedContent.push(varName);

我正在尝试获取它，以便名称和代码进入同一个数组。即代码是 K = V 对的键？

基本上这样我就可以遍历最终数组并轻松访问代码和相关名称。

我可以很容易地在 PHP 中做到这一点，但在 javascript 中没有运气。

编辑

我希望数组看起来像：

[
    [code1, name1],
    [code2, name2],
    [code3, name3]
];

因此，在我可以执行循环并针对主数组中的每个数组之后，我可以对键（例如 code1）和关联的值（例如 name1）执行一些操作。这有意义吗？它有点像一个多维数组，尽管有些人可能会在涉及 Javascript 时反对该声明的有效性。

Answer 1

我认为你最好创建一个对象，这样你以后就可以访问键/值对，如果你不想这样做，就不必循环：

var $codes = $('.productVariationWrap.edit input[name="varVariationCode[]"]'),
    $names = $('.productVariationWrap.edit input[name="varVariationName[]"]'),
    updatedContent = {};

for (var i = 0, il = $codes.length; i < il; i++) {
    updatedContent[$codes.get(i).value] = $names.get(i).value;
}

现在以updatedContent.code1 == name1 为例，如果需要，您可以循环访问该对象：

for (var k in updatedContent) {
    // k == code
    // updatedContent[k] == name
}

Answer 2

使用两个循环可能不是最佳选择。最好使用单个循环来收集所有项目，无论是代码还是名称，然后将它们组装在一起。

另一个问题：你的选择器在我看来有点滑稽。你说页面中可以有多个这样的控件，但是控件有重复的名称是不正确的，除非它们是互斥的单选按钮/复选框——除非每对输入都在它自己的祖先<form>？对此的更多详细信息将有助于我提供更好的答案。

请注意：在您的代码中，您将 varCode 和 varName 变量实例化为对象 {}，然后像数组 [] 一样使用它们。那是你的意图吗？当我第一次回答你时，我被“最终输出应该看起来像这个数组”分散了注意力，并错过了你想要对象中的键 = 值对。如果您的意思是您所说的最终结果是嵌套数组，那么您可以对代码进行的最小修改以使其按原样工作如下所示：

var updatedContent = [];

$('.productVariationWrap.edit input[name="varVariationCode[]"]')
   .each(function(i, vali){
      updatedContent[i] = [$(this).val()]; //make it an array
   });

$('.productVariationWrap.edit input[name="varVariationName[]"]')
   .each(function(i1, vali1){
      updatedContent[i1].push($(this).val()); //push 2nd value into the array
   });

但是由于您希望 Code 成为 Name 值的唯一索引，那么我们需要使用对象而不是数组，Code 是键 Name 值：

var updatedContent = {},
   w = $('.productVariationWrap.edit'),
   codes = w.find('input[name="varVariationCode[]"]'),
   names = w.find('input[name="varVariationName[]"]');

for (var i = codes.length - 1; i >= 0; i -= 1) {
   updatedContent[codes.get(i).val()] = names.get(i).val();
});

请注意，这将产生一个对象，符号将如下所示：

{
    'code1': 'name1',
    'code2': 'name2',
    'code3': 'name3'
};

现在您可以像这样使用updatedContent 对象：

var code;
for (code in updatedContent) {
    console.log(code, updatedContent[code]); //each code and name pair
}

最后，依靠Code 和Name 输入以相同的顺序在单独的jQuery 对象中返回似乎有点脆弱。确保您将正确的代码与正确的名称相关联的某种方式对我来说似乎很重要——即使您现在的操作方式正确，谁能说未来对页面布局的修订不会破坏某些东西？我只是更喜欢显式关联而不是依赖页面元素顺序，但您可能觉得不需要这种保证。

Answer 3

我不喜欢用两个循环解决它的方法

 var updatedContent = [] 

 $('.productVariationWrap.edit').each(function(i, vali){
     var $this = $(this)
     , tuple = [$this.find('input[name="varVariationCode[]"]').val()
                , $this.find('input[name="varVariationName[]"]').val()]

     updatedContent.push(tuple)
 });