Question

我正在尝试创建一个图像对象数组，但正在努力。每个对象都将保存图像和图像的标题。

以下代码可以正常工作，我将其粘贴到Firebug中进行检查：

示例1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

...等

然而，我认为以下内容更有意义，但它不断抛出错误，我无法理解为什么。

示例2

var imageArray = new Array();

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    imageCaption: "An image caption"
    };

imageArray[1] = {
    image02: new Image().
    image02.src: "my-image-02.png",
    imageCaption: "Another image caption"
    }

任何人都可以解释上面的代码有什么问题吗？这是我发布的第一个例子，我应该使用哪种方法？非常感谢

Answer 1

您最好的选择是对图像数组使用factory和.push。

尝试这样的事情

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

输出

[
  <img src="foo.jpg" title="foo title" alt="foo title">, 
  <img src="bar.jpg" title="bar title" alt="bar title">
]

Answer 2

在你的第一个例子中，你有

var imageArray = new Array();
imageArray[0] = new Image(); // an image object
imageArray[0].src = "my-image-01.png"; // src set in image object

// Here you are completely destroying the image object and creating a new object
imageArray[0] = { imageCaption: "A caption for the image" };  //an object
console.log(imageArray[0]); // Object {imageCaption: "A caption for the image"}

在你的第二个例子中，你有

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  // <-- this is wrong
    imageCaption: "An image caption"
};

此处image01只是一个键/字符串而不是object而image01.src由于其中包含.而导致错误，键名称可以包含_ 1}}和空格（如果引用，ir 'key one'）。所以，您可以这样使用它，但我认为您可以删除image01 : new Image()，只需在使用此对象like this fiddle时创建新图像。

var imageArray = [];
imageArray[0] = {
    image01 : new Image(),
    src : "my-image-01.png",
    imageCaption : "Image caption for image-01"
};
imageArray[1] = {
    image01 : new Image(),
    src : "my-image-02.png",
    imageCaption : "Image caption for image-02"
};

for(x = 0; x < imageArray.length; x++) {
    console.log(imageArray[x].src);
}

因此，console.log(imageArray[0].src);将输出my-image-01.png。如果您想在图片对象本身中使用caption，那么图片对象没有caption属性，相反，您可以使用data-caption或alt稍后以某种方式使用，但是使用HTML5你可以使用像这样的标题

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>

example here。另外，作为替代方案，您可以通过示例查看this answer。

Answer 3

回到第一个。改变第三行

imageArray[0] = new Image();
imageArray[0].src = "my-image-01.png";
imageArray[0].imageCaption = "A caption for the image";

Answer 4

两个问题：

有一个。而不是a，在imageArray [1]
您不能使用.作为对象的属性名称

所以代码看起来应该是这样的：

imageArray[0]= {
    image: new Image(),
    src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    caption: "An image caption"
};

imageArray[1] = {
    image: new Image().
    src: "my-image-02.png",
    caption: "Another image caption"
}

Answer 5

第一个：System.Array类是抽象的，你不能把它弄清楚。 [您可以使用集合中的ArrayList]

第二：要在对象初始化中分配值，您必须使用“=”而不是“：” 接下来是“，”就像这样：新图片{src =“my-image-01.png”，imageCaption =“图片标题”}

您的代码：

var imageList = new ArrayList（）;

        imageList.Add(new Image { src = "my-image-01.png", imageCaption = "An image caption" });
        imageList.Add(new Image { src = "my-image-02.png", imageCaption = "Another image caption" });

创建图像对象数组

5 个答案: