javascript - 如何在 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();

何时需要支持旧版浏览器

...那么 Set 就不是一个选项。使用普通对象代替:

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