forEach 与 for in

Question

我想用 forEach 替换几件东西（这是我正在上的一门课的要求），但其中一件都不起作用：

我的原始 For in 代码（这可以正常工作并显示内容）：

for (var i in education.schools) {
        $('#education').append(HTMLschoolStart);

        var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url);
        var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location);
        var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree);
        var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors);
        var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates);
        var formattedNameDegree = formattedName + formattedDegree;


        $('.education-entry:last').append(formattedNameDegree);
        $('.education-entry:last').append(formattedDates);
        $('.education-entry:last').append(formattedLocation);
        $('.education-entry:last').append(formattedMajors);
    }

我的 forEach 变体（什么都不显示，所有内容都消失了）：

education.schools.forEach(function() {
        $('#education').append(HTMLschoolStart);

        var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url);
        var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location);
        var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree);
        var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors);
        var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates);
        var formattedNameDegree = formattedName + formattedDegree;


        $('.education-entry:last').append(formattedNameDegree);
        $('.education-entry:last').append(formattedDates);
        $('.education-entry:last').append(formattedLocation);
        $('.education-entry:last').append(formattedMajors);
    })

第二个是 if 语句，我应该用 forEach 替换其中的一部分。

if 语句可以正常工作，唯一的问题是它只适用于正好 7 个项目，如果我要再添加到数组中，我还必须更新这个：

if (bio.skills.length > 0) {
        $('#header').append(HTMLskillsStart);

        var formattedSkill = HTMLskills.replace('%data%', bio.skills[0]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[1]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[2]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[3]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[4]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[5]);
        $('#skills').append(formattedSkill);
        var formattedSkill = HTMLskills.replace('%data%', bio.skills[6]);
        $('#skills').append(formattedSkill);
    }

forEach 循环代码（不是显示数组中的每个项目，而是显示数组中的所有项目七次，基本上它似乎确实迭代了正确的次数，但每次迭代都输出所有 7 个项目）：

if (bio.skills.length > 0) {
        $('#header').append(HTMLskillsStart);

        bio.skills.forEach(function(){
            var formattedSkill = HTMLskills.replace('%data%', bio.skills);
            $('#skills').append(formattedSkill);
        })
    }

Answer 1

尝试在forEach回调函数中声明索引：

education.schools.forEach(function(val, i) {
    $('#education').append(HTMLschoolStart);

    var formattedName = HTMLschoolName.replace('%data%', education.schools[i].name).replace('#', education.schools[i].url);
    var formattedLocation = HTMLschoolLocation.replace('%data%', education.schools[i].location);
    var formattedDegree = HTMLschoolDegree.replace('%data%', education.schools[i].degree);
    var formattedMajors = HTMLschoolMajor.replace('%data%', education.schools[i].majors);
    var formattedDates = HTMLschoolDates.replace('%data%', education.schools[i].dates);
    var formattedNameDegree = formattedName + formattedDegree;


    $('.education-entry:last').append(formattedNameDegree);
    $('.education-entry:last').append(formattedDates);
    $('.education-entry:last').append(formattedLocation);
    $('.education-entry:last').append(formattedMajors);
});

每Mozilla:

使用三个参数调用回调：

• 元素值

• 元素索引

• 被遍历的数组

编辑：

正如 Andreas 在 cmets 中提到的，如果 forEach 超出 education.schools 数组，那么您可以在回调中使用第一个参数 (val) 而不是 education.schools[i] 来获取当前项目。

Answer 2

for 每个回调获取三个传递的参数：

• currentValue - 数组中的当前元素
• index - ucrrent 值的索引
• 数组 - 数组本身

所以你应该使用currentValue.url 而不是education.schools[i].name。

education.schools.forEach(function(currentValue) {
    $('#education').append(HTMLschoolStart);

    var formattedName = HTMLschoolName.replace('%data%', currentValue.name).replace('#', currentValue.url);
    var formattedLocation = HTMLschoolLocation.replace('%data%', currentValue.location);
    var formattedDegree = HTMLschoolDegree.replace('%data%', currentValue.degree);
    var formattedMajors = HTMLschoolMajor.replace('%data%', currentValue.majors);
    var formattedDates = HTMLschoolDates.replace('%data%', currentValue.dates);
    var formattedNameDegree = formattedName + formattedDegree;


    $('.education-entry:last').append(formattedNameDegree);
    $('.education-entry:last').append(formattedDates);
    $('.education-entry:last').append(formattedLocation);
    $('.education-entry:last').append(formattedMajors);
})

Answer 3

你的 forEach 中的问题是你没有定义i。要解决这个问题，您应该将i 替换为现有变量，或定义i。

你的代码可能是这样的：

education.schools.forEach(function() {
    $('#education').append(HTMLschoolStart);

    var formattedName = HTMLschoolName.replace('%data%', this.name).replace('#', this.url);
    var formattedLocation = HTMLschoolLocation.replace('%data%', this.location);
    var formattedDegree = HTMLschoolDegree.replace('%data%', this.degree);
    var formattedMajors = HTMLschoolMajor.replace('%data%', this.majors);
    var formattedDates = HTMLschoolDates.replace('%data%', this.dates);
    var formattedNameDegree = formattedName + formattedDegree;


    $('.education-entry:last').append(formattedNameDegree);
    $('.education-entry:last').append(formattedDates);
    $('.education-entry:last').append(formattedLocation);
    $('.education-entry:last').append(formattedMajors);
})

请注意，主要变化是使用this 而不是education.schools[i]。