Mảng đa chiều JavaScript

Question

Đây không phải là câu hỏi mà tôi sẽ hỏi nhưng tôi đã bất ngờ gặp phải các mảng JavaScript. Tôi đến từ một nền tảng PHP và sau khi nhìn vào một vài trang web tôi không còn khôn ngoan hơn.

Tôi đang cố gắng tạo mảng đa chiều.

var photos = new Array; 
var a = 0; 
$("#photos img").each(function(i) { 
    photos[a]["url"] = this.src; 
    photos[a]["caption"] = this.alt; 
    photos[a]["background"] = this.css('background-color'); 
    a++; 
}); 

Thông báo lỗi: ảnh [a] không xác định. Làm thế nào để tôi làm điều này? Cảm ơn.

Answer 1

JavaScript không có mảng đa chiều, nhưng mảng mảng có thể được sử dụng theo cách tương tự.

Bạn có thể muốn thử như sau:

var photos = []; 
var a = 0; 
$("#photos img").each(function(i) { 
    photos[a] = []; 
    photos[a]["url"] = this.src; 
    photos[a]["caption"] = this.alt; 
    photos[a]["background"] = this.css('background-color'); 
    a++; 
}); 

Lưu ý rằng bạn có thể đã sử dụng new Array() thay vì [], nhưng sau này thường được khuyến khích. Cũng lưu ý rằng bạn đã thiếu dấu ngoặc đơn của new Array() trong dòng đầu tiên.

---

UPDATE: Tiếp theo từ các ý kiến ​​dưới đây, trong ví dụ trên không có nhu cầu sử dụng các mảng của mảng. Một mảng các đối tượng sẽ thích hợp hơn. Mã này vẫn còn hiệu lực vì mảng là đối tượng trong ngôn ngữ này, nhưng sau sẽ tốt hơn:

mảng

photos[a] = {}; 
photos[a]["url"] = this.src; 
photos[a]["caption"] = this.alt; 
photos[a]["background"] = this.css('background-color'); 

Answer 2

đa chiều là trong các cấu trúc:

var photos = new Array(); 
photos[0] = new Array(); 

sử dụng nó như:

photos[0][0] = this.src; 

nhiều hơn trên mảng JS here.

Answer 3

Douglas Crockford, của JSLint, sẽ có bạn tạo nó theo cách này ("Sử dụng mảng ký hiệu đen []"):

var photos = []; 

Bây giờ hãy nhớ rằng bạn muốn tạo mảng đa chiều, có nghĩa là một mảng bên trong một mảng. Điều này có nghĩa bạn cần để tạo ra các nội mảng:

$("#photos img").each(function(i) { 
    photos[a] = [] 
    //continue 

Answer 4

var photos = []; 
var imgs = document.getElementById("photos").getElementsByTagName("img"); 
for(var i=0;i<imgs.length;i++){ 
    photos.push({ 
     src:imgs[i].src, 
     alt:imgs[i].alt, 
     background:imgs[i].style.backgroundColor 
    }); 
} 

Điều đó sẽ cung cấp cho bạn một cái gì đó tương đương với điều này trong PHP (Tôi đã thực hiện lưu dữ liệu giả vờ):

Array(
    [0] => Array(
     "src" => "logo.png", 
     "alt" => "My Logo!", 
     "background" => "#ffffff" 
    ) 
) 

tôi hi vọng điêu nay co ich!

Answer 5

Bạn đang cố gán một thứ gì đó cho photos[a]["url"], photos[a]["caption"], v.v. nhưng photos[a] chưa tồn tại. photos là một mảng trống lúc đầu, vì vậy bạn phải đặt photos[a] thành thứ gì đó trước tiên. Vì bạn muốn sử dụng các khóa chuỗi ("url", "caption", v.v.), cái này phải là một đối tượng đơn giản (tương đương javascript với mảng associave php) (hoặc Hash nếu cơ sở mã của bạn cho phép nó).Sau đó, bạn có thể sử dụng một cấu trúc đối tượng theo nghĩa đen để đơn giản hóa chức năng của bạn, và Array#push để thoát khỏi sự không cần thiết a:

var photos = []; 
$("#photos img").each(function(img) { 
    photos.push({ 
     url: img.src, 
     caption: img.alt, 
     background: img.style.backgroundColor 
    }); 
}); 

Ngoài ra, hãy chắc chắn rằng this thực sự là yếu tố img của bạn. Một số triển khai each sẽ đặt this cho đối tượng chung trong trường hợp của bạn.

chỉnh sửa: ok, nó trông giống như jQuery.each tự động cài đặt this đến các yếu tố lặp, nhưng không quấn nó trong jQuery-tốt lành, vì vậy bạn phải hoặc là quấn this trong $() hoặc sử dụng DOM đồng bằng (tôi đã sử dụng sau này trong ví dụ của tôi).

edit2: anyway, sử dụng this là loại lạ vì hàm gọi lại được chuyển đến each nhận được đối số. Cũng có thể sử dụng đối số này (được đổi tên).

Answer 6

Khi tôi đọc chủ đề này, tôi đã cố gắng tìm hiểu về các mảng kết hợp đa chiều. Nó không rõ ràng vì vậy tôi tiếp tục nghiên cứu, đây là những gì tôi đã đưa ra:

var images = new Array; 
images['logo'] = { 'src': 'http://example.com/image1.png', 'caption': 'this is the logo', 'background': '#000'}; 
images['background'] = { 'src': 'http://example.com/image2.png', 'caption': 'this is the background', 'background': '#FFF'}; 
alert(images['logo']['src']); /* output: http://example.com/image1.png */ 
alert(images['background']['caption']); /* output: this is the background */ 

Hy vọng điều này sẽ giúp!