javascript - 想要通过使用Javascript的map、reduce、foreach、filter方法来实现功能

Question

请帮助我编写更好的代码。

假设我有一个如下所示的 JavaScript 数组:

var students = [
    { firstname: "stud1", lastname: "stud2", marks: "60" },
    { firstname: "stud3", lastname: "stud4", marks: "30" },
    { firstname: "stud5", lastname: "stud6", marks: "70" },
    { firstname: "stud7", lastname: "stud8", marks: "55" },
    { firstname: "stud9", lastname: "stud10", marks: "20" },
];

在页面上我想分两部分显示数据，1)得分 >= 40 的学生 2)得分 < 40 的学生

通过使用 for 循环，我可以轻松地完成此功能，如下所示。

var data = "";var data1 = "";
for (var i = 0; i < students.length; i++ )
{
    if(students.marks >= 40){
        data += = students.firstname + " " + students.lastname; //actual data in html div tag
        ....
    }else{
            data1 += = students.firstname + " " + students.lastname;
    }
}

我想通过使用 JavaScript 方法(如 map、reduce、foreach、filter 等)来实现相同的功能(想提高我的 JavaScript 知识)

不确切知道哪种方法对于此类功能有用。

使用map方法并尝试显示数据，但每个对象/数组末尾有一个尾随 , 。

有人可以帮助/指导我编写正确的代码吗？

Answer 1

这是使用filter和forEach方法以及callback函数的解决方案。

请参阅此处的引用资料:

• filter method

var students = [
    { firstname: "stud1", lastname: "stud2", marks: "60" },
    { firstname: "stud3", lastname: "stud4", marks: "30" },
    { firstname: "stud5", lastname: "stud6", marks: "70" },
    { firstname: "stud7", lastname: "stud8", marks: "55" },
    { firstname: "stud9", lastname: "stud10", marks: "20" },
];
students.filter(function(item){
    return item.marks>=40;  
}).forEach(function(item){
    div=document.getElementById('persons');
    div.innerHTML+=item.firstname+' '+item.lastname+'<br>';
});

<div id="persons"></div>