如何在 JavaScript 中访问数组中的数据

Question

  var lotsData = [
    {
        index: 0,
        data: 'I want to be in HTML',

    },
    {
        index: 1,
        data: 'I dont' want to be in HTML',
    }]

可以说我更喜欢一个带有数组的变量。如何访问索引 0，假设它连接到单击事件并且我想使用数据：

    $('.tab').live('click', function() {
          console.log("I was clicked");
                      $('#fancy').text(WHAT GOES HERE TO ACCESS data from index 0?);
        });

Answer 1

jQuery 是用 Javascript 编写的，Javascript 本身提供了 Array 对象。

因此，访问数组的第 0 个元素是 array_name[0]

在您的示例中，您将对象存储为数组的元素。您的对象包含“index”属性，但是请注意，您的“index”属性与数组中的元素索引无关。您不应该包含“索引”属性...例如：

 var lotsData = [
{ // this is the first array element, index value in the array is 0
    index: 1,
    data: 'I want to be in HTML',

},
{  // this is the second array element, index value in the array is 1
    index: 0,
    data: "I don't want to be in HTML",
}]

lotsData[0].data // value: 'I want to be in HTML' 

更好的示例是：

 var lotsData = [
{  // this is the first array element, index value in the array is 0
    category: 'shoe',
    detail: 'red'

},
{  // this is the second array element, index value in the array is 1
    category: 'fruit',
    detail: 'apple'
}]

lotsData[0].detail // value: 'red'

添加：尾随逗号

请注意，虽然 Javascript 是一种功能强大的语言，但它确实有其怪癖。
一个重要的就是尾随逗号，例如

...
    index: 0,
    data: "I don't want to be in HTML",  // Trailing comma. DON'T DO THIS!
}]

问题是尾随逗号不是 Javascript 语言的正式部分。大多数 JS 引擎都支持它，但有一个非常重要的引擎不支持：Internet Explorer 浏览器不支持尾随逗号，遇到逗号就会悲惨地死去。

由于 IE 的独特工作方式，您的测试应始终包括 IE。

我在 IE 7 下测试。

Answer 2

 $('.tab').live('click', function() {
          console.log("I was clicked");
                      $('#fancy').text(lotsData[0].data);
        });

当然，这是假设您的索引顺序正确（因为它们似乎来自您的示例数据）。

在这种情况下，没有理由保留数组对象的 index 属性。使用简单的字符串数组会更容易使用。

例如

var lotsData = ["I want to be in HTML","I don't want to be in HTML"];

，您只需引用 lotsData[0]

Answer 3

首先不要使用 .live() 除非你真的需要（ http://jupiterjs.com/news/why-you-should-never-use-jquery-live ）

但是如果你查看 .live() 文档（ http://api.jquery.com/live/ ）您将看到您可以将数据传递给.live()，它将在回调中可用。

.live（事件类型，事件数据，处理程序）

那么：

$('.tab').live('click',lotsData,function(event){
    console.log('I was clicked');
    $('#fancy').text(event.data[0].data);
});

这就是您要问的吗？

或者您是否正在寻找一种方法来迭代lotsdata并找出数组中的哪个项目具有.index = 0？

Answer 4

你可以尝试这个，不是最好的解决方案：

$('.tab').live('click', function() {
    console.log("I was clicked");
    var realIndex;
    for (var i = 0; i < lotsData.length; i++ )
    {
        if (lotsData[i].index == 0) {
            realIndex = i;
            break;
        }
    }
    $('#fancy').text(lotsData[realIndex].index);
});