如何在 Javascript 中创建多维数组并避免重复？

Question

我有以下 HTML：

<input type="text" name="inp1" id="inp1" />
<input type="text" name="inp2" id="inp2" />
<input type="text" name="inp3" id="inp3" />

<input type="submit" value="Send" id="clickMe" />

每次我点击提交按钮时，我都应该将每个 inp* 的值添加到一个数组中，所以我最终会得到这样的结果：

[
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
     ['inp1' => val10, 'inp2' => val20, 'inp3' => val30],
     ['inp1' => val11, 'inp2' => val21, 'inp3' => val31],
     ['inp1' => val12, 'inp2' => val22, 'inp3' => val32]
]

阅读this article后，我认为我可以做到以下几点：

var obj = {};
var item = [];

$('#clickMe').click(function() {
    item.push(
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ); 
});

但是上面的解决方案最终会得到一个线性数组，而不是我想要的（例如 Fiddle 上的 here）。我已经阅读了here 和here，但我很困惑。

我也不应该有重复的元素，所以这个：

[
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3]
]

无效。那么，如何正确处理这个问题并获得一个多维数组呢？任何人都可以给我一些帮助并留下一个例子以便我得到这个吗？

编辑：建议代码应该与大多数浏览器兼容，而 IE 应该是 IE9+

Answer 1

您可以维护一个Set，它比使用对象属性更适合此目的：

var list = new Set(); // helper object to avoid duplicates
var items = []; // the real 2D array

$('#clickMe').click(function() {
    var item = [
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ];
    var key = JSON.stringify(item);
    if (list.has(key)) return; // skip
    list.add(key);
    items.push(item);
    return false; // to avoid that the form submits.
});

如果您有更多 input 元素，那么通过循环获取它们的值可能是值得的：

var item = $('form input[type=text]').map(function () { 
    return $(this).val(); 
}).get();

当需要支持旧版浏览器时

... 那么集合不是一个选项。改用普通对象：

var list = {}; // helper object to avoid duplicates
var items = []; // the real 2D array

$('#clickMe').click(function() {
    var item = [
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ];
    var key = JSON.stringify(item);
    if (list[key] === 1) return; // skip
    list[key] = 1;
    items.push(item);
    return false; // to avoid that the form submits.
});

Answer 2

您可以尝试为每个键值对（输入字段的属性）包装一个 JavaScript 对象，然后将 push 每个对象包装到一个数组中。以下示例可能会有所帮助：

var item = [];
$('#clickMe').click(function() {
    var val1 = $('#inp1').val();
    var val2 = $('#inp2').val();
    var val3 = $('#inp3').val();
    var obj = {
        inp1: val1,
        inp2: val2,
        inp3: val3
      };
item.push(obj);
});
//your code for AJAX goes here

我希望这会有所帮助。

Answer 3

在 JavaScript 中没有关联数组的概念。您应该对对象进行水合，然后通过表单编码或 JSON 编码对象将其作为 XMLHttpRequest 发送。

$('#clickMe').click(function() {
    var obj = {};
    obj[ $('#inp1').attr('name') ] = $('#inp1').val();
    obj[ $('#inp2').attr('name') ] = $('#inp2').val();
    obj[ $('#inp3').attr('name') ] = $('#inp3').val();
    console.log(obj) // see desired data-structure
    console.log(obj.inp1); // get inp1 val
    console.log(obj['inp1']); // get inp1 val again
});

如果您可以使用以下内容循环输入元素，则此示例也会更好：

var elms = $('form input');
var obj = {};
for ( var i = 0; i < elms.length; i++ )
{
    obj[ $(elms[i]).attr('name') ] = $(elms[i]).val();
}

Answer 4

要在 Javascript 中创建关联数组的等价物，您需要一个对象。对象属性的作用类似于 PHP 等语言中的数组键。例如：

var myObject = {
    a: [1,2,3],
    b: [4,5,6],
    c: {
        cat:"Fluffy",
        dog:"Fido"
    }
};

这里属性a和b包含数组，属性c包含另一个对象。

Answer 5

JSON.stringify(AssocArray);

创建 Json 字符串以通过 AJAX 请求发送。

或者做 $("form").serialize() 。要了解更多关于这种方法的信息，您可以查看http://api.jquery.com/serialize/