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中，但我找不到任何明确的内容，而且我懒得启动我的VM：）

Answer 2

为简单起见，可读性和执行速度，请使用[]代替new Array();。

您可以使用temporary object，将其推入命令（Works on Chrome, Firefox and IE）：

var commands = [];
$('label').each(function(k,v) {
    var category = $(v).data('plural');
    var id = $(v).data('id');
    var temp = {};
    temp['show ' + category] = function() { window.alert(id + " " + category); exploreId(id, category); };
    commands.push(temp);
});
console.log(commands);
console.log(commands[0]['show foos']());//run function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label data-plural="foos" data-id="1">Foo</label>
<label data-plural="bars" data-id="2">Bar</label>

小提琴：https://jsfiddle.net/ghorg12110/h0ekmreu/

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

2 个答案: