¿Cómo usar map y filter simultáneamente en una array usando JavaScript?

Dada una array y la tarea es usar la función de filtro y mapa simultáneamente a la array dada. Primero veamos brevemente las funciones de mapa y filtro:

• método filter(): este método devuelve una nueva array que contiene los elementos que pasan una determinada prueba realizada
  en una array original.

  Sintaxis:

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

  Parámetros y variables utilizados:

  • newArray: la array que se devuelve.
  • oldArray: la función de filtro se ejecuta en cada elemento de esta array.
  • currentValue: el valor del elemento actual.
  • índice: el índice de la array del elemento actual.
  • array: el objeto de la array al que pertenece el elemento actual.
• Método map(): este método se usa para aplicar una función en cada elemento de una array y devuelve una nueva array del
  mismo tamaño que la array de entrada.

  Sintaxis:

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

  Parámetros y variables utilizados:

  • newArray: la array que se va a devolver.
  • oldArray: la función map se ejecuta en cada elemento de esta array.
  • currentValue: el valor del elemento actual.
  • índice: el índice de la array del elemento actual.
  • array: el objeto de la array al que pertenece el elemento actual.

Enfoque: en primer lugar, mediante el uso de la función filter() recuperaremos esos elementos de una array que satisfaga la condición dada. Como el método filter() devolverá la array con los elementos requeridos. Ahora aplicaremos el método map() para realizar las operaciones especificadas en todos los elementos de la array devuelta por el método filter().

Ejemplo:

<script>
    /* 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);
    });
</script>

Producción:

Basketball Players are:
Smriti
Bakul