使用变量属性名称建立和数组

Build up and array with variable property name

本文关键字：建立 数组 变量 属性      更新时间：2023-09-26

我的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() ... } ]

那么构建所需阵列的好方法是什么呢？

在 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 :)

为简单起见、可读性和执行速度，请使用 [] 而不是 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/

相关文章：