想通过Javascripts map,reduce,foreach,filter方法实现功能
Want to achieve functionality by using Javascripts map,reduce,foreach,filter methods
请帮我写出更好的代码。
假设我有一个如下所示的 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 方法并尝试显示数据,但每个 object/array.
末尾都有一个尾随 ,
任何人都可以 help/guide 我编写正确的代码吗?
这是使用 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>
您可以使用单个循环并添加以 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);
请帮我写出更好的代码。
假设我有一个如下所示的 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 方法并尝试显示数据,但每个 object/array.
末尾都有一个尾随 ,任何人都可以 help/guide 我编写正确的代码吗?
这是使用 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>
您可以使用单个循环并添加以 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);