JavaScript 如何同时使用map和filter对数组进行操作

给定一个数组，任务是同时使用map和filter函数对给定的数组进行操作。首先，让我们简要介绍一下map和filter函数：

JavaScript的filter()方法： 该方法返回一个新的数组，其中包含原始数组上通过某个测试的元素。

语法：

let newArray = oldArray.filter((currentValue, index, array) {
    // Returns element to new Array
});

参数：

currentValue： 当前元素的值。
index： 当前元素的数组索引。
array： 当前元素所属的数组对象。
返回类型： 一个包含满足函数条件的过滤元素的新数组对象。

JavaScript map()方法： 该方法用于在数组的每个元素上应用一个函数，并返回一个与输入数组大小相同的新数组。

语法：

let newArray = oldArray.map((currentValue, index, array) {
    // Returns element to new Array
});

参数：

currentValue： 当前元素的值。
index： 当前元素在数组中的索引。
array： 当前元素所属的数组对象。

返回值： 返回一个新数组，其中的元素是回调函数的结果。

方法： 首先，使用filter()函数从数组中检索满足给定条件的元素。因为filter()方法会返回包含所需元素的数组。然后，我们将应用map()方法对filter()方法返回的数组中的所有元素执行指定操作。

示例： 在此示例中，我们将实现上述方法。

/* Printing the name of students who play 
basketball using filter and map method 
simultaneously. */
  
// Taking an array of Student object 
let students = [ 
    { id: "001", name: "Anish", sports: "Cricket" }, 
    { id: "002", name: "Smriti", sports: "Basketball" }, 
    { id: "003", name: "Rahul", sports: "Cricket" }, 
    { id: "004", name: "Bakul", sports: "Basketball" }, 
    { id: "005", name: "Nikita", sports: "Hockey" } 
] 
  
/* Applying filter function on students array to 
retrieve those students Objects who play 
basketball and then the new array returned by 
filter method is mapped in order to get the name 
of basketball players instead of whole object.*/
let basketballPlayers = students.filter(function (student) { 
    return student.sports === "Basketball"; 
}).map(function (student) { 
    return student.name; 
}) 
  
console.log("Basketball Players are:"); 
  
// Printing out the name of Basketball players 
basketballPlayers.forEach(function (players) { 
    console.log(players); 
});

输出：