Хотите добиться функциональности с помощью карт Javascripts, уменьшения, foreach, методов фильтрации

Пожалуйста, помогите мне написать лучший код.

Предположим, у меня есть массив 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)

Не знаю точно, какой метод полезен для такой функциональности.

Использовал метод карты и пытался отобразить данные, но в конце каждого объекта/массива есть трейлинг.

Может ли кто-нибудь помочь/направить меня, чтобы написать правильный код?


javascript dictionary arrays filter reduce
person user3172224    schedule 23.01.2017    source источник
comment
вам нравится использовать только одну петлю или больше?   -  person Nina Scholz    schedule 23.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вот решение с использованием методов 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>

person Mihai Alexandru-Ionut    schedule 23.01.2017
comment
Привет, Александру, я просмотрел твой код. отфильтрованная переменная теперь содержит массив, и я могу разделить этот массив и отобразить данные (имя студента) на экране. Но снова мне нужно правильно разделить и for..loop. Могу ли я правильно отформатировать строку (данные) и вернуть свойство div innerHtml только с помощью метода карты? Пожалуйста, посмотрите ниже код. document.getElementById(demo).innerHTML = person.map(showData); function showData(item, index) { var sDiv = ; var fullname = [item.firstname, item.lastname].join(); sDiv += String(полное имя) + ‹br /›; вернуть сДив; } - person user3172224; 23.01.2017
comment
для того, что вы хотите, вам нужна функция forEach. Я обновлю свой код через несколько минут. - person Mihai Alexandru-Ionut; 23.01.2017
comment
Пожалуйста, взгляните на мой ответ. - person Mihai Alexandru-Ionut; 23.01.2017
comment
Спасибо Александру!! Вы дали ответ, но осталось несколько вопросов. Перед вашим ответом я пробовал: document.getElementById(demo1).innerHTML = student.forEach(showDataByForeach); функция showDataByForeach (элемент) { var sDiv =; sDiv += item.firstname + ‹br /›; вернуть сДив; } но это не сработает. даже я пытался передать элемент функции showDataByForeach, как показано ниже, но это также не сработает. .forEach(showDataByForeach(item)) Могу ли я узнать свою ошибку/что я сделал не так. Спасибо - person user3172224; 23.01.2017
comment
Ваш код не работал, потому что функция forEach вызывает предоставленную функцию один раз для каждого элемента в вашем массиве. Функция обратного вызова применяется для каждого элемента из вашего массива, и вы должны создать свою строку в течение iterating всех элементов. Используйте этот код: var str=""; students.forEach(showDataByForeach); function showDataByForeach(item) { str+=item.firstname+"<br>"; } document.getElementById('persons').innerHTML=str; - person Mihai Alexandru-Ionut; 23.01.2017
comment
Спасибо Александру!! Спасибо за вашу помощь. Узнайте много нового сегодня. Буду учиться дальше, чтобы понять это правильно. Еще раз спасибо. - person user3172224; 23.01.2017

arrow_upward
0
arrow_downward

Вы можете использовать один цикл и добавить информацию с 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);

person Nina Scholz    schedule 23.01.2017