如何使用 JavaScript 在数组上同时使用 map 和 filter？

给定一个数组，任务是同时对给定数组使用过滤器和映射函数。首先让我们简要地看一下 map 和 filter 函数：

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

  句法：

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

  使用的参数和变量：

  • newArray：返回的数组。
  • oldArray：过滤器函数运行在这个数组的每个元素上。
  • currentValue：当前元素的值。
  • index：当前元素的数组索引。
  • array：当前元素所属的数组对象。
• map() 方法：该方法用于对数组中的每个元素应用一个函数，并返回一个新的数组
  与输入数组大小相同。

  句法：

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

  使用的参数和变量：

  • newArray：要返回的数组。
  • oldArray： map函数在这个数组的每个元素上运行。
  • 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);
    });

输出：

Basketball Players are:
Smriti
Bakul