forEach 与 for in

Posted 2023-05-09

【中文标题】forEach 与 for in

【英文标题】：forEach versus for in

【发布时间】：2016-11-09 08:44:39

【问题描述】：

我想用 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);
        )
    

【问题讨论】：

因为i在forEach中不存在

Don't use for…in enumerations on arrays!

【参考方案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] 来获取当前项目。

【讨论】：

为什么不直接使用当前值而不是education.schools[i]？

@Andreas 虽然这样可行，但 OP 的问题似乎源于对如何在 forEach 回调中获取索引缺乏明确性。

这不应该被视为投诉^^ 但是我们为什么不向 OP 展示下一步，这使得 forEach 构造更容易处理:)

@Andreas 我在答案中添加了一个编辑以包含您的建议。

【参考方案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);
)

【参考方案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]。