希望通过使用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函数的解决方案。

在这里查看参考：

• 过滤方式

 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> 

Answer 2

您可以使用单个循环，并以predicate为索引添加信息。 稍后加入元素以获取每个元素的刺痛。

 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" }], predicate = function (o) { return o.marks >= 40; }, result = [[], []]; students.forEach(function (a) { result[+predicate(a)].push(a.firstname + ' ' + a.lastname); }); result = result.map(function (a) { return a.join(', '); }); console.log(result);