JavaScript 多维数组 [重复]答案

【问题标题】：JavaScript Multidimensional Arrays [duplicate]JavaScript 多维数组 [重复]
【发布时间】：2011-02-18 00:45:30
【问题描述】：

这不是我要问的问题，但我意外地遇到了 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++;
});

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

【问题讨论】：

this.css 不起作用，您必须将 this 包装在 jQuery 对象中：$(this).css。
虽然标题表示重复，但提问者真正想要的是对象数组，而不是数组数组。

标签： javascript jquery arrays

【解决方案1】：

当我阅读此主题时，我试图了解多维关联数组。不清楚所以我一直在研究，这就是我想出的：

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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"
    )
)

我希望这会有所帮助！

【讨论】：

+1 尽可能用纯 js 编码
感谢您使它更具可读性。

【解决方案3】：

您正在尝试将某些内容分配给 photos[a]["url"]、photos[a]["caption"] 等，但 photos[a] 尚不存在。 photos 起初是一个空数组，因此您必须先将 photos[a] 设置为某个值。由于您想使用字符串键（"url"、"caption" 等），因此这应该是一个普通对象（相当于 php 关联数组的 javascript）（如果您的代码库允许，则为 Hash）。然后你可以使用文字对象构造来简化你的函数，并使用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-goodness 中，因此您必须将this 包装在$() 中或使用普通元素DOM（我在示例中使用了后者）。

edit2：无论如何，使用this 有点奇怪，因为传递给each 的回调函数接收一个参数。不妨使用这个论点（重命名）。

【讨论】：

this 的唯一问题是它没有css 方法。它必须首先被包裹在一个 jQuery 对象中。
我不太了解 jQuery。我会采纳你的建议。

【解决方案4】：

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() 的括号。

更新： 根据下面的 cmets，在上面的示例中，不需要使用数组的数组。对象数组会更合适。该代码仍然有效，因为数组是该语言中的对象，但以下代码会更好：

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

【讨论】：

一个数组包含数字键，而不是字符串。
@Alsciende：该代码有效。数组是 JavaScript 中的对象，对象和哈希表在 JavaScript 中是一回事。因此photos[0]["url"] 将url 属性分配给photos[0]。
有效，但不正确。在这种情况下使用数组是没有意义的，它只会让新手感到困惑。
最好使用photos[a] = {};
你是对的，正确的方法是photos[a]={}; 而不是[]，因为var x=[]; x['foo']='bar'; alert(x.length) //0 你可以看到你没有填充数组，但实际上是对象属性。

【解决方案5】：

JSLint 的 Douglas Crockford 会让您以这种方式创建它（“使用数组文字符号 []”）：

var photos = [];

现在请记住，您要创建多维数组，这意味着数组中的数组。这意味着您需要创建内部数组：

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

【讨论】：

【解决方案6】：

多维数组的结构如下：

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

将其用作：

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

更多关于 JS 数组 here.

【讨论】：