Question

这很可能是一个愚蠢的错误，但我无法看到这个问题。我试图在Angularjs应用程序中为图像库创建一个对象数组。每个照片对象都有thumb和img属性。 for循环正在创建对象，并且我将每个对象都记录到控制台以检查它们：

{thumb: "/10000/0_t.jpg", img: "/10000/0_l.jpg"}
{thumb: "/10000/1_t.jpg", img: "/10000/1_l.jpg"}
{thumb: "/10000/2_t.jpg", img: "/10000/2_l.jpg"}
...

但是，运行此代码后：

var images = [];
var image = {};
for (var i = 0; i < property.images.length; i++) {
    image.thumb = "/" + property.id + "/" + i + "_t.jpg";
    image.img = "/" + property.id + "/" + i + "_l.jpg";
    console.log(image); //this gives expected output
    images.push(image);
};
console.log(images); //this gives all entries as the same

最终console.log给了我：

{thumb: "/10000/27_t.jpg", img: "/10000/27_l.jpg"} //X28

每张图片。 27这是因为有28张图片，但我不明白为什么他们都有相同的路径？

Answer 1

您需要在每次迭代时创建一个新对象：

var image;
for (var i = 0; i < property.images.length; i++) {
    image = {};
    image.thumb = "/" + property.id + "/" + i + "_t.jpg";
    image.img = "/" + property.id + "/" + i + "_l.jpg";
    console.log(image); //this gives expected output
    images.push(image);
};

如果不这样做，那么每次迭代都将重用相同的原始对象。将对象传递给.push()不会复制。

Answer 2

怎么样：

var path = "/" + property.id + "/";
var images = property.images.map((img,i)=>{
    return {
        thumb: path + i + "_t.jpg",
        img: path + i + "_l.jpg"
    }
});
console.log(images);

Answer 3

对我来说效果很好。请在JavaScript中尽可能限制范围。

请参阅本书第16章 Introducing a New Scope via an IIFE ; 朗读JavaScript 。

注意： IIFE是一个＆＃34;立即调用的函数表达式。＆＃34;

＆＃13;

var property = {
  id : 10000,
  images: [{ id: 1 }, { id: 2 }, { id: 3 }]
};

var images = [];

for (var i = 0; i < property.images.length; i++) {
  (function(){
    var image = {}; // This should be inside the loop.
                    // This way the scope does not leak.
    image.thumb = "/" + property.id + "/" + i + "_t.jpg";
    image.img = "/" + property.id + "/" + i + "_l.jpg";
    
    images.push(image);
  }());
};

document.body.innerHTML = '<pre>' + JSON.stringify(images, null, 4) + '</pre>';

＆＃13;

Angular app中FOR循环的意外行为

3 个答案: