将 for in 循环更改为 for 循环答案

【问题标题】：Changing for in loop to for loop将 for in 循环更改为 for 循环
【发布时间】：2017-01-02 15:44:28
【问题描述】：

假设我有一个名为项目的对象。 projects 对象有一个名为 projects 的键，它是 2 个其他对象的 array。其他 2 个对象中的每个对象都有一组图像。我能够使用 for in 循环遍历每个对象的数组中的每个图像，但我想使用 for 循环或 forEach 代替。我能做些什么？这是我的代码：

var projects = {};

projects.projects = [
{
"title": "mycode",
"dates": "mycode",
"description": "mycode",
"images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
},

{
"title": "mycode",
"dates": "mycode",
"description": "mycode",
"images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
}

];

projects.display = function() {

    for (var i = 0; i < projects.projects.length; i++) {
        
        var formattedProjectTitle = HTMLprojectTitle.replace("%data%", projects.projects[i].title);
        $(".project-entry:last").append(formattedProjectTitle);

        var formattedProjectDates = HTMLprojectDates.replace("%data%", projects.projects[i].dates);
        $(".project-entry:last").append(formattedProjectDates);

        var formattedProjectDescription = HTMLprojectDescription.replace("%data%", projects.projects[i].description);
        $(".project-entry:last").append(formattedProjectDescription);
        
        //Iterate through each image in the projects objects.

        for (image in projects.projects[i].images) {
            var formattedProjectImages = HTMLprojectImage.replace("%data%", projects.projects[i].images[image]);
            $(".project-entry:last").append(formattedProjectImages);
        }

    }

}

【问题讨论】：

projects.projects.forEach(function(project, index, projects) { console.log(project.title); project.images.forEach(function(image, index, images) { console.log(image) }) })??
谢谢，但我需要更改循环迭代图像，而不是外部循环。
喜欢for (var i = 0; i < projects.projects.length; i++) { projects.projects[i].images.forEach(function(image) { console.log(image) }) } ?
是的，但你能用我的代码代替 console.log(image) 吗？当我在函数范围内添加代码时，它会破坏图像并指向未定义。这是我写的：projects.projects[i].images.forEach(function(image) { var formattedProjectImages = HTMLprojectImage.replace("%data%", projects.projects[i].images[image]); $ (".project-entry:last").append(formattedProjectImages);
我把它放在一个答案中

标签： javascript arrays object for-loop for-in-loop

【解决方案1】：

您可以使用嵌套的 for 循环来做到这一点

for (var i = 0; i < projects.projects.length; i++) {
    for (var j = 0; j < projects.projects[i].images.length; j++) {
       var x = projects.projects[i].images[j];
       console.log(x);
    }
}

【讨论】：

谢谢。看来您也忘记添加 j

【解决方案2】：

这是循环的forEach 版本，我希望减少使用的名称长度。

projects.projects.forEach(function(project) {
    var formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);
    $(".project-entry:last").append(formattedProjectTitle);

    var formattedProjectDates = HTMLprojectDates.replace("%data%", project.dates);
    $(".project-entry:last").append(formattedProjectDates);

    var formattedProjectDescription = HTMLprojectDescription.replace("%data%", project.description);
    $(".project-entry:last").append(formattedProjectDescription);

    project.images.forEach(function(image) {
        var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
        $(".project-entry:last").append(formattedProjectImages);
    });
});

// Alternatively, if you have the browser support, for..of will work as well. 
// I use let instead of var as let is block scoped rather than function scoped (Again, check browser support)

for (let project of projects.projects) {
    let formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);
    $(".project-entry:last").append(formattedProjectTitle);

    let formattedProjectDates = HTMLprojectDates.replace("%data%", project.dates);
    $(".project-entry:last").append(formattedProjectDates);

    let formattedProjectDescription = HTMLprojectDescription.replace("%data%", project.description);
    $(".project-entry:last").append(formattedProjectDescription);

    for (let image of project.images) {
        let formattedProjectImages = HTMLprojectImage.replace("%data%", image);
        $(".project-entry:last").append(formattedProjectImages);
    }
}

【讨论】：

【解决方案3】：

您可以嵌套两个forEach 循环，而不是使用for 循环并担心索引和off-by-1 错误：

projects.projects.forEach(project => {
  var formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);

  // ...

  project.images.forEach(image => {
    var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
    $(".project-entry:last").append(formattedProjectImages);
  });

});

【讨论】：

非常感谢，但是 => 是什么？我还是这门语言的新手。
这是一个arrow function。 project => { return 'stuff'; } 与 function (project) { return 'stuff'; } 相同

【解决方案4】：

var projects = {};

projects.projects = [{
  "title": "mycode",
  "dates": "mycode",
  "description": "mycode",
  "images": ["http://lorempixel.com/400/200/",     "http://lorempixel.com/350/150/",     "http://lorempixel.com/500/300/"]
}, {
  "title": "mycode",
  "dates": "mycode",
  "description": "mycode",
  "images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
}];

projects.display = function() {
    for (var i = 0; i < projects.projects.length; i++) {
        var formattedProjectTitle = HTMLprojectTitle.replace("%data%", projects.projects[i].title);
        $(".project-entry:last").append(formattedProjectTitle);

        var formattedProjectDates = HTMLprojectDates.replace("%data%", projects.projects[i].dates);
        $(".project-entry:last").append(formattedProjectDates);

        var formattedProjectDescription = HTMLprojectDescription.replace("%data%", projects.projects[i].description);
        $(".project-entry:last").append(formattedProjectDescription);
        
        //Iterate through each image in the projects objects.

        projects.projects[i].images.forEach(function(image) {
          var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
          $(".project-entry:last").append(formattedProjectImages);
        });
    }
}

【讨论】：