javascript - 如何将输入名称转换为 JavaScript 数组

Question

我有一个与将 html 输入名称转换为 javascript 对象有关的问题。例如我有一个输入：

<input type="checkbox" name="product[1]">
<input type="checkbox" name="product[2]">

我有javascript代码：

var data = {};
$('input').each(function(){
    // need to do something like 
    data[$(this).attr('name')] = $(this).attr('checked');
})

我希望得到这样的数据对象；

data = {
    product: {
        1: 'checked',
        2: 'checked'
    }
}

这可能不使用正则表达式吗？

Answer 1

用文字值替换你的变量，你得到这个：

data["product[1]"] = true;

方括号没有任何意义，因为它们在字符串中，所以你不会得到任何结果。

有办法解决这个问题。你可以使用评估：eval("data."+this.name+" = "+(this.checked?"true":"false"));

但是，由于eval最好避免，请尝试以下操作：

var m = this.name.match(/(.*)\[(\d+)\]/);
data[m[0]][m[1]] = this.checked;

Answer 2

是的，一般来说这是可能的。您可以执行以下操作：

var noregexp = $(this).attr('name').split("[");
if (noregexp.length==2) {
    //should be
    var the_name = noregexp[0];
    var the_index = noregexp[1].substr(0,noregexp[1].length-1); //this will get the index with removed ]
}

这是我从心里想出来的。这不是一个漂亮的解决方案，而是一个没有正则表达式的解决方案，如您所愿。

Answer 3

您可以使用以下方式获得所需的数据结构：

var data = {product: []};
$('input').each(function(){
    data.product[$(this).attr('name').match(/product\[([\d]*)\]/)[1]] = $(this).prop('checked');
})
console.log(data);

检查这个演示