如何定義多維混合數組（包括鍵和關聯值）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來獲取底層的實際數組。