Question

在下面的演示中，单击其中一个无序列表（#Foo或#Biz）应附加三个li，其中包含来自相应数组的文本，arrayFoo或arrayBiz。我在动态引用正确的数组时遇到了麻烦，我想避免在我的实际项目中使用冗长的if / else语句集，其中我可能有5到30个元素/数组。

Fiddle

我希望通过像listArray = (array + listName)那样构建名称空间来动态选择该数组，但这并不起作用。有没有办法连接原始变量名称，即使它不像语法那样简洁？

理想情况下，我希望将数组保持原样，我不想将它们组合成更大的数组，或者将它们转换为字典，但如果这是唯一的解决方案我当然会接受它。

<ul id="Foo">Foo</ul>
<ul id="Biz">Biz</ul>

arrayFoo = [
    "first foo item",
    "second foo item",
    "third foo item"];

arrayBiz = [
    "first biz item",
    "second biz item",
    "third biz item"];

$('ul').click(function () {
    listName = $(this).attr('id');

    // hardcoding this var so demo works...    
    listArray = arrayBiz;
    // I want to set listArray equal to (array + listName)
    // but I'm not sure how. When working correctly,
    // clicking #Foo should append the arrayFoo items,
    // and clicking #Biz should append arrayBiz items.

    listArray.forEach(function (listItem) {
        $('#' + listName).append('<li>' + listItem + '</li>');
    });
});

Answer 1

如果修改数组以包含在对象中，则可以使用括号表示法通过字符串变量访问它们。像这样：

var data = {
    Foo: [
        "first foo item",
        "second foo item",
        "third foo item"
    ],
    Biz: [
        "first biz item",
        "second biz item",
        "third biz item"
    ]
}

$('ul').click(function () {
    var $ul = $(this);
    data[this.id].forEach(function (listItem) {
        $ul.append('<li>' + listItem + '</li>');
    });
});

Updated fiddle

Answer 2

一种肮脏的方式是通过窗口元素访问。

var a = "Foo";
window["array" + a];

但我建议不要这样做，正确的方法是将数组填充到一个对象中并使用键值获取它。

Answer 3

你可以尝试这样但是它有点像@Rory实现：

＆＃13;

var arrayFoo = [
    "first foo item",
    "second foo item",
    "third foo item"];

var arrayBiz = [
    "first biz item",
    "second biz item",
    "third biz item"];
var arr=[];
arr['arrayFoo']=arrayFoo;
arr['arrayBiz']=arrayBiz;
$('ul').click(function () {
    listName = $(this).attr('id');  
    listArray = "array"+listName;// it will not refer to the declared array.it will be merely a string so can be used as key.
console.log(listArray);
    arr[listArray].forEach(function (listItem) {
        $('#' + listName).append('<li>' + listItem + '</li>');
    });
});

＆＃13;

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <ul id="Foo">Foo</ul>
<ul id="Biz">Biz</ul>

＆＃13;

使用连接的命名空间动态引用JS数组

3 个答案: