javascript - 如何定义多维混合数组（包括键和关联值）JavaScript

Question

我创建了一个 javaScript 库，文档可以在其中处理可变数量的<div class="gallery">元素。我想定义一个多维数组来存储每个现有画廊的信息。

JavaScript + jQuery 1.9.1

var gallery = new Array;
gallery = ['images','imageActive','width'];

for (var i=0;i<$('.gallery').length;i++) {
    gallery[i]['images'] = $('.gallery:eq['+i+'] img').index();
    gallery[i]['imageActive'] = 0;
    gallery[i]['width'] = $('.gallery:eq['+i+'] li').css('width');
}

控制台输出

我的方法完全错误吗？数组不适合这种情况吗？

Answer 1

分配给对象{}

for (var i=0;i<$('.gallery').length;i++) {
   gallery[i] = {};
   gallery[i]['images'] = $('.gallery:eq['+i+'] img').index();

Answer 2

gallery = new Array将创建一个空数组。在访问任何属性之前，您需要先用对象填充数组：

var gallery = [];
gallery = ['images','imageActive','width'];

for (var i=0;i<$('.gallery').length;i++) {
    gallery.push({}); // increase length and add empty object

    gallery[i]['images'] = $('.gallery:eq['+i+'] img').index();
    gallery[i]['imageActive'] = 0;
    gallery[i]['width'] = $('.gallery:eq['+i+'] li').css('width');
}

Answer 3

首先，您的第一个赋值 ( = new Array) 是完全没有必要的，您将用下一行覆盖它，在这里您将使用文字语法创建一个数组。

我想你的意思是：

var gallery = [];
for (var i=0;i<$('.gallery').length;i++) {
    gallery[i] = {
        images:      $('.gallery:eq['+i+'] img').index(),
        imageActive: 0,
        width:       $('.gallery:eq['+i+'] li').css('width')
    };
}

这会创建一个空白数组，然后将条目放入其中，其中每个条目都是一个对象（或“映射”或“字典”，我们在 JavaScript 中不使用术语“关联数组”以避免与数组混淆） . 每个对象都有images、imageActive和width属性。

顺便说一句，可能有一种更有效的方法来编写：

var gallery = $(".gallery").map(function() {
    var entry = $(this);
    return {
        images:      entry.find('img').index(),
        imageActive: 0,
        width:       entry.find('li').css('width')
    };
}).get();

它map用于循环遍历元素并构建数组，该数组最初作为 jQuery 对象返回，因此我们用于get获取底层的实际数组。