希望通过使用Javascript map，reduce，foreach，filter方法来实现功能

Question

Please help me to write better code.

Suppose I have a JavaScript array like below:

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" },
];

On page I want to show data in two parts, 1)Students who got marks >= 40 2)Students who got marks < 40

By using for loop I done this functionality easily as below.

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;
    }
}

I want to achieve same functionality by using JavaScript methods like map, reduce, foreach, filter etc. (want to improve my JavaScript knowledge)

Don't know exactly which method is useful for such functionality.

Used map method and tried to display data, but there is a trailing , at the end of each object/array.

Can anyone please help/guide me to write proper code?

Answer 1

Here is solution using filter and forEach methods, using callback functions.

See references here :

• 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> 

Answer 2

You could use a single loop and add the information with predicate as index. Later join the elements for getting a sting for each element.

 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);