JavaScript多维数组

Question

这并不是我原本想问的问题，但是我在处理JavaScript数组时遇到了困难。我来自PHP背景，在查看了一些网站后仍然云里雾里。

我正在尝试创建一个多维数组。

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++;
});

错误信息：photos[a]未定义。我该怎么做？谢谢。

- ComputerUser

---

this.css 不起作用，你必须将 this 包装在 jQuery 对象中：$(this).css。 - Ionuț G. Stan

虽然标题显示为重复，但提问者真正想要的是一个对象数组，而不是一个数组的数组。 - Ben Flynn

Answer 1

JavaScript没有多维数组，但可以使用数组的数组来实现类似的效果。

您可以尝试以下方法：

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++;
});

请注意，你本可以使用new Array()代替[]，但后者通常更受推荐。同时请注意，在第一行中你遗漏了new Array()的括号。

---

更新: 根据下面的评论，上面的示例中没有必要使用数组的数组。一个对象数组会更合适。这段代码仍然有效，因为在该语言中数组也是对象，但以下方式会更好：

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

- Daniel Vassallo

---

一个数组保存的是数字键，而不是字符串。 - Alsciende

@Alsciende：这段代码是有效的。在JavaScript中，数组是一个对象，而对象和哈希表在这种语言中是相同的。因此，photos[0]["url"]将一个url属性分配给photos[0]。 - Daniel Vassallo

这是一个有效的方法，但不太恰当。在这种情况下使用数组没有意义，只会令新手感到困惑。 - Alsciende

最好使用 photos[a] = {};。 - Ionuț G. Stan

你说得对，正确的方式是 photos[a]={}; 而不是 []。因为 var x=[]; x['foo']='bar'; alert(x.length) //0，你可以看到你没有填充数组，而是在填充对象的属性。 - Vitim.us

Answer 2

你试图给 photos[a]["url"], photos[a]["caption"]等赋值，但是photos[a]还不存在。一开始，photos是一个空数组，因此你首先需要设置 photos[a] 为某个值。由于你想使用字符串键（例如"url"、"caption"等），这个值应该是一个普通对象（JavaScript 相当于 PHP 关联数组）（如果您的代码库允许，则可以使用哈希）。然后，您可以使用字面对象构造来简化函数，并使用 Array#push 来摆脱不必要的 a：

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

此外，确保this实际上是你的img元素。在某些each实现中，会将this设置为全局对象。

编辑：好的，看起来jQuery.each自动将this设置为迭代的元素，但不会将其包装在jQuery好处里面，所以你要么将this包装在$()中，要么使用普通DOM（我在我的示例中使用了后者）。

编辑2：无论如何，使用this有点奇怪，因为传递给each的回调函数接收一个参数。最好使用这个参数（改名）。

- Alsciende

---

this 的唯一问题是它没有 css 方法。它必须先被包装在 jQuery 对象中。 - Ionuț G. Stan

我不太了解jQuery。我会采纳你的建议。 - Alsciende

Answer 3

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
    });
}

这应该会给你一个与PHP中大致相当的东西（我编造了假数据）：

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

我希望这可以帮到您！

- tau

---

尽可能使用纯JS编码，+1。 - Alsciende

感谢您使其更易读。 - tau

Answer 4

当我阅读这篇文章时，我试图理解多维关联数组。但这个概念并不清晰，所以我继续进行了研究，以下是我得出的结论：

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 */

希望这能帮到你！

- Paul Mason

Answer 5

Douglas Crockford, JSLint 的创始人，建议您使用数组字面量符号([])来创建它：

var photos = [];

现在请记住您要创建多维数组，也就是一个数组内部还包含另一个数组。这意味着您需要创建内部数组：

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

- GlenCrawford

Answer 6

多维数组是以这些结构体表示的：

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

将其用作：

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

更多关于JS数组的内容在这里。

- Reigel Gallarde