如何创建动态命名的JavaScript对象属性？

Question

这就是我所拥有的

<form>
  <input type="text" name="item1" class="grab" value="userInput" />
  <input type="text" name="somethingelse1" class="grab" value="differentUserInput" />
  ... (any number of inputs)
</form>

使用JQuery/Javascript我想构建一个具有名称值对的对象数组,如下所示:

output = [ {item1: userInput}, {somethingelse1: differentUserInput} ... etc.];

我试过这个没有成功:

var output = new Array();
$('.grab').each( function(index) { 
    output.push({$(this).attr('name'): $(this).val()} );
});

我尝试了几种变体,包括试验eval(),但无济于事.如果我删除$(this).attr('name'),并给它一个静态名称它可以工作......那么如何创建动态命名对象？

Answer 1

文字对象语法不能用于非文字键.要将非文字键与对象一起使用,需要使用object[keyExpression]符号,如下所示.(这相当于object.key何时keyExpression = "key",但请注意前一种情况采用表达式作为密钥,后者采用标识符.)

var output = []
$('.grab').each(function(index) { 
    var obj = {}
    obj[$(this).attr('name')] = $(this).val()
    output.push(obj)
})

快乐的编码.

另外,考虑使用.map():

var output = $('.grab').map(function() { 
    var obj = {}
    obj[$(this).attr('name')] = $(this).val()
    return obj
})