javascript - 使用可变属性名称构建和数组

Question

我的 HTML 看起来像这样:

<label data-plural="foos" data-id="1">Foo</label>
<label data-plural="bars" data-id="2">Bar</label>

我有这个代码:

var commands = new Array();

$('label.ptype').each(function(k,v) {
    var category = $(v).data('plural');
    var cmd = 'show ' + category;
    var id = $(v).data('id');
    commands.push({cmd : function() { window.alert(id + " " + category); exploreId(id, category); }});
});

console.log(commands);

我想在命令数组中包含:

[   
 { 'show foos': function() { window.alert('1 foos'); exploreId(1, 'foos'); },
 { 'show bars': function() { window.alert('2 bars'); exploreId(2, 'bars'); }
]

但是我得到的是字面上的

[ { cmd: function() ... }, { cmd: function() ... } ]

那么构建所需数组的好方法是什么？

Answer 1

在 ES5 中，你必须拆开对象构造:

var command = {};
command[cmd] = function() { window.alert(id + " " + category); exploreId(id, category); };
commands.push(command);

在 ES2015 中，您可以在对象初始值设定项中使用 [ ] 表示法:

commands.push({ [cmd] : function() { window.alert(id + " " + category); exploreId(id, category); }});

Firefox、Chrome 和 Safari 支持该新功能(“计算属性名称”)，但 Internet Explorer 不支持。 (它可能在 Edge 中，但我找不到任何明确的内容，而且我懒得启动我的虚拟机:)