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

Question

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

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 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来获取底层的实际数组。