想通过使用 Javascripts 的 map,reduce,foreach,filter 方法来实现功能答案

【问题标题】：Want to achieve functionality by using Javascripts map,reduce,foreach,filter methods想通过使用 Javascripts 的 map,reduce,foreach,filter 方法来实现功能
【发布时间】：2017-06-07 16:14:23
【问题描述】：

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

假设我有一个如下的 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）获得分数

通过使用 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;
    }
}

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

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

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

谁能帮助/指导我编写正确的代码？

【问题讨论】：

您喜欢只使用一个循环还是更多？

标签： javascript arrays dictionary filter reduce

【解决方案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>';
});

&lt;div id="persons"&gt;&lt;/div&gt;

【讨论】：

嗨，Alexandru，我浏览了你的代码。过滤后的变量现在包含数组，我可以拆分这些数组并在屏幕上显示数据（学生姓名）。但是我再次必须正确拆分和for..loop。我可以以正确的方式格式化字符串（数据）并仅通过 map 方法返回 div 的 innerHtml 属性吗？请看下面的代码。 document.getElementById("demo").innerHTML = people.map(showData);函数 showData(item, index) { var sDiv = ""; var fullname = [item.firstname, item.lastname].join(" "); sDiv += String(全名) + "
";返回 sDiv; }
你想要你需要的forEach函数..我会在稍后更新我的代码。
请看我的回答。
谢谢亚历山德鲁！！你给出了答案，但仍然有几个问题。在您回答之前，我尝试的是： document.getElementById("demo1").innerHTML = students.forEach(showDataByForeach);函数 showDataByForeach(item) { var sDiv = ""; sDiv += item.firstname + "
";返回 sDiv;但这不起作用。即使我尝试将 item 传递给如下所示的函数 showDataByForeach ，但这也行不通。 .forEach(showDataByForeach(item)) 我可以知道我的错误/我做错了什么。谢谢
您的代码不起作用，因为forEach 函数为数组中的每个元素调用一次提供的函数。回调函数适用于数组中的每个元素，您必须在 iterating 所有元素期间创建字符串。使用此代码：var str=""; students.forEach(showDataByForeach); function showDataByForeach(item) { str+=item.firstname+"<br>"; } document.getElementById('persons').innerHTML=str;

【解决方案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);

【讨论】：