后端开发教程 - Java、Spring Boot 实战 - msg200.com
Map()、Filter()、reduce() 及重要面试问题
地图
筛选
减少
Map、Reduce 和 Filter 都是 JavaScript 中的数组方法。它们会遍历数组并执行转换或计算。每个方法都会根据函数的结果返回一个新数组。
本文将介绍如何使用 Map、Reduce 和 Filter。
地图
map() 方法用于从现有数组创建新数组，并将函数应用于第一个数组的每个元素。
句法：
var new_array = arr.map(function callback(element, index, array) {
// Return value for new_array
}[, thisArg])
因此，原始 arr.map 函数将回调函数作为参数，并且该回调函数可以传递三个参数：
a. 当前值
b. 当前值的索引 [可选]
c. 数组 [可选]
Map() 的实现
回调函数将迭代数组 arr 的所有值，修改数组并将值存储在新数组中。
使用 map 函数，我们不需要初始化新数组。
假设我们有一个数组，我们想要另一个数组，其所有值都是前一个数组的两倍。
const arr=[1,2,3,4,5];
function double(x)
{
return x*2;
}
const output=arr.map(double);
console.log(arr);
使用箭头函数编写相同的代码
const output=arr.map((x)=>{
return x*2;
});
console.log(arr);
筛选
该filter()方法获取数组中的每个元素，并对其应用一个条件语句。如果条件返回 true，则该元素将被推送到输出数组。如果条件返回 false，则该元素不会被推送到输出数组。
因此，原始 Array.filter 函数接受一个回调函数作为参数，该回调函数可以传入三个参数：
a. 当前值
b. 当前值的索引 [可选]
c. 数组 [可选]
var new_array = arr.filter(function callback(element, index, array) {
// Return true or false
}[, thisArg])
假设我们想从数组中滤除奇数。
const arr=[1,2,3,4,5]
function isOdd(x)
{
return x%2;
}
const output=arr.filter(isOdd);
console.log(output);
我们可以举的另一个例子是，在数组中查找大于 4 的数字。
const arr=[1,2,3,4,5]
const output=arr.filter((x)=>{
return x>4
});
console.log(output);
减少
回调参数是一个函数，它会对数组中的每个元素调用一次。该函数接受四个参数，但通常只使用前两个。
accumulator - 上一次迭代的返回值
currentValue - 数组中的当前项
index - 当前项的索引 [可选]
array - 调用 reduce 的原始数组 [可选]
initialValue 参数是可选的。如果提供，它将在第一次调用回调函数时用作累加器的初始值。
句法
arr.reduce(callback[, initialValue])
让我们以求所有数组元素之和为例
const arr=[1,2,3,4,5];
const output=arr.reduce(function(accumulator,currentIdx){
acc+=curr;
return acc;
});
console.log(output);
让我们通过尝试有关这些数组方法的一些重要问题来理清我们的概念。
Q1. 给定一个用户对象数组，打印全名。
const users=[
{firstName:"john",lastName:"Biden",age:26},
{firstName:"jimmy",lastName:"cob",age:75},
{firstName:"sam",lastName:"lewis",age:50},
{firstName:"Ronald",lastName:"Mathew",age:26},
];
//List of fullname
const output=users.map((x)=>{
return x.firstName+" "+x.lastName;
})
console.log(output);
Q2. 给定一个用户对象数组，打印特定年龄的用户及其频率。
const users=[
{firstName:"john",lastName:"Biden",age:26},
{firstName:"jimmy",lastName:"cob",age:75},
{firstName:"sam",lastName:"lewis",age:50},
{firstName:"Ronald",lastName:"Mathew",age:26},
];
在继续之前，先想想🤔我们可以在这里使用哪种数组方法！
类比->因为我们想将列表缩减为一个表示所有年龄的对象，并找到每个值对应的不同值，所以我们可以在这里使用“reduce”。
const users=[
{firstName:"john",lastName:"Biden",age:26},
{firstName:"jimmy",lastName:"cob",age:75},
{firstName:"sam",lastName:"lewis",age:50},
{firstName:"Ronald",lastName:"Mathew",age:26},
];
//using reduce array method
const output=users.reduce(function(acc,curr){
if(acc[curr.age])
//if present in array object
{
acc[curr.age]++;
}else{
//if not present in array object
acc[curr.age]=1;
}
return acc;
},{})
console.log(output);
Q3.打印标记大于 60 且卷号大于 15 的对象。
let student =[
{name:"Smith",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"John",rollNumber:16,marks:35},
{name:"Tiger",rollNumber:7,marks:55}
];
const details= student.filter((x)=>x.marks>60 && x.rollNumber>15);
console.log(details);
Q4.打印所有学生的成绩总和
let student =[
{name:"Smith",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"John",rollNumber:16,marks:35},
{name:"Tiger",rollNumber:7,marks:55}
];
const details = student.reduce((acc,curr)=>{
return acc+=curr.marks;
},0);
console.log(details);
数组方法的链接是 map()、filter()、reduce() 的特色之一。
Q5. 列出数组中所有年龄大于 30 的 firstName
const users=[
{firstName:"john",lastName:"Biden",age:26},
{firstName:"jimmy",lastName:"Cob",age:75},
{firstName:"Sam",lastName:"Lewis",age:50},
{firstName:"Ronald",lastName:"Mathew",age:26},
];
//Chaining
const output=users.filter((x)=>x.age>30).map((x)=>x.firstName);
console.log(output);
Q6. 打印得分超过 60 分的学生姓名
let student =[
{name:"Smith",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"John",rollNumber:16,marks:35},
{name:"Tiger",rollNumber:7,marks:55}
];
const ans=student.filter((x)=> {
return x.marks>60}).map((x)=>{return x.name});
console.log(ans);
Q7. 打印成绩高于 60 分的学生的总成绩，其中低于 60 分的学生加 20 分
let student =[
{name:"Smith",rollNumber:31,marks:80},
{name:"Jenny",rollNumber:15,marks:69},
{name:"John",rollNumber:16,marks:35},
{name:"Tiger",rollNumber:7,marks:55}
];
const totalMarks=student.map((stu)=>{
if(stu.marks<60){
stu.marks+=20;
}
return stu;
}).filter((stu)=>stu.marks>60).reduce((acc,curr)=>acc+curr.marks,0);
console.log(totalMarks);
希望这篇博客能对你有所帮助。我已尽力用合适的示例解释每个数组方法，并涵盖了一些关键问题，帮助你在面试中脱颖而出，加深理解。
如有任何疑问，请在评论区留言，我会尽力解答。
如果你觉得这篇博客对你有帮助，请点赞❤️并关注我，以便阅读更多类似的博客。