Guía del método filter() de JavaScript

Introducción

¡El filtrado de información es una de las tareas más importantes para las que usamos la automatización/computadoras! Las computadoras y el software no serían tan útiles si tuviéramos que revisar todo manualmente. Por extensión, filtrar datos para usuarios finales es una tarea común, lo que permite a los usuarios reducir el espacio de búsqueda a un nivel manejable. JavaScript es el primer lenguaje de front-end del mundo y el primero que ven los usuarios de front-end. No hace falta decir que no se puede exagerar la importancia de filtrar usando JavaScript.

En JavaScript, el filter() nos permite filtrar a través de una matriz, iterando sobre los valores existentes y devolviendo solo aquellos que coinciden con ciertos criterios, en una nueva matriz.

los filter() La función ejecuta una expresión condicional en cada entrada de una matriz. Si esta condición se cumple true, el elemento se agrega a la matriz de salida. Si la condición falla, el elemento no se agrega a la matriz de salida.

En esta guía, veremos cómo trabajar con JavaScript. filter() método. Primero, familiaricémonos con el método, su sintaxis y sus argumentos. A continuación, repasaremos varios ejemplos prácticos de tareas que se pueden realizar fácilmente con el método. Finalmente, lo compararemos con un método alternativo. find() y evaluar su desempeño.

Sintaxis y valores de parámetros

La sintaxis es simple:

const filteredArray = oldArray.filter(callbackFn(element, index, array), context)

los callbackFn realmente puede ser cualquier función/predicado/criterio arbitrario, siempre que devuelva un valor booleano, basado en el valor de element. Técnicamenteno es necesario usar el element en su cálculo en absoluto, pero eso probablemente no sería una función de filtrado muy útil.

los index y array son opcionales y probablemente no necesitará usar array en la práctica. index es el índice del elemento actual, y array es un puntero a la matriz original.

Notar: La función de filtro construye una nueva matriz y devuelve todos los objetos que cumplen los criterios proporcionados en la devolución de llamada. No cambia la matriz original subyacente.

Cómo es JavaScript filtrado() obras

Echemos un vistazo a la filter() método en acción. En versiones anteriores de JS, antes de ES6, se usaría una función de devolución de llamada como:

const numbers = [20, 40, 17, 99, 59, 77];
const filteredNumbers = numbers.filter(function (number) {
    return number > 20;
});
  
console.log(filteredNumbers); 

Desde ES6 podemos simplificar esto como un función de flecha:

const numbers = [20, 40, 17, 99, 59, 77];
const filteredNumbers = numbers.filter((number) => {
    return number > 20;
});
  
console.log(filteredNumbers); 

O bien, puede reducir la función a solo:

const numbers = [20, 40, 17, 99, 59, 77];
const filteredNumbers = numbers.filter((number) => number > 20);
console.log(filteredNumbers); 

Cómo usar el El contexto objeto con filtrado()

los filter() puede aceptar un método adicional, opcional, context objeto:

filter(callbackfn, contextobj);

El objeto puede ser referenciado usando el this palabra clave dentro de la devolución de llamada, y la context representa, bueno, todo lo que pasamos como El contexto para el filtro ¡Tomemos un ejemplo!

Ordenaremos un menu lista, eliminando todos los artículos cuyos precios no están entre 15 y 25. El rango de precios es un objeto separado, que pasamos en el filter() como el El contexto. En cierto sentido, generalmente se usa para definir un objeto de "configuración", que contiene valores a los que podemos acceder de forma genérica, sin codificarlos:

const menu = [
    {
        name: "buttermilk pancakes",
        price: 15.99
    },
    {
        name: "diner double",
        price: 13.99
    },
    {
        name: "godzilla milkshake",
        price: 6.99
    },
    {
        name: "country delight",
        price: 20.99
    },
    {
        name: "egg attack",
        price: 22.99
    }
];
  
let priceRange = {
    lower: 15,
    upper: 25
};

Ahora vámonos filter() los menu lista, pasando por el priceRange como el context:

let filteredMenu = menu.filter(function (menu) {
    return menu.price >= this.lower && menu.price <= this.upper;
}, priceRange);
  
console.log(filteredMenu);

Esto se explica por:

[
    {
        name:"buttermilk pancakes",
        price:15.99
    },
    {
        name:"country delight",
        price:20.99
    },
    {
        name:"egg attack",
        price:22.99
    }
]

Cómo usar el pista Ajuste

los index se puede utilizar para evaluar la posición de un elemento en la matriz original. Por ejemplo, podríamos filtrar por la posición de los elementos:

const users = ["John", "Doe", "Stephen", "Matt", "Abigail", "Susu"];
  
const topThree = users.filter((element, index) => {
    return index <= 2;
});

console.log(topThree); 

Aunque esto también se puede conseguir accediendo a la N últimos elementos de una matriz, el índice puede desempeñar otros roles y no ser el único criterio de filtrado.

Cómo usar el desplegar Ajuste

los array El parámetro se refiere a la matriz original que estamos filtrando. Dado que de todos modos está iterando a través de la matriz, generalmente estará satisfecho sin usar el array parámetro , pero puede ser útil si la lógica depende de algún estado o propiedad de la propia matriz:

const competitors = ["John", "Doe", "Stephen", "Matt", "Abigail", "Susu"];
  
function selectWinners(name, index, array) {
   
    if (array.length > 3 && name.includes('a')) {
        return true;
    } else {
      return false;
    }
}
  
let lselectLoosers = competitors.filter((name, index, array) =>
    selectWinners(name, index, array)
);

console.log(lselectLoosers); 

Otro ejemplo podría ser si queremos obtener la mitad de los elementos de una matriz. En este caso, podemos usar la matriz original para obtener el número total de elementos para filtrar los elementos según el valor del índice:

const halfArray = function (element, index, array) {
    const half = Math.floor(array.length / 2);
    return index < half;
};

Ahora podemos filtrar usando halfArray:

const names = ["John", "Doe", "Stephen", "Matt", "Abigail", "Susu"];
const halfNames = names.filter(halfArray);
console.log(halfNames); 

En resumen - el filter() El método acepta una función de predicado, que se ejecuta en cada elemento de la matriz. Dependiendo del valor de retorno booleano, el element se coloca o no en una nueva matriz de salida.

Al final de la iteración, solo se devuelve la nueva matriz resultante, filtrada por los criterios definidos en la función de predicado. A context El objeto se puede pasar y, a menudo, se usa para definir un objeto de "configuración" que almacena valores dinámicos que se usan al filtrar. los index se refiere a la posición del elemento actual en la matriz original, y la array es una referencia a la matriz original.

JavaScript filtrado() Ejemplos

Dejando la introducción a un lado, profundicemos en algunos ejemplos prácticos de la filter() método.

Filtrar una matriz de objetos por valor

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

Filtrar una matriz de objetos por un valor que contienen es una de las aplicaciones más comunes de la filter() método.

¡Manejar objetos no es muy diferente de trabajar con otros tipos de datos!

Por ejemplo, supongamos que tenemos una matriz de elevado objetos, con algunos campos. Suponga que también desea filtrar a los estudiantes por aquellos que se graduaron en el año actual: el que se graduó por new Date().getFullYear().

Fácilmente podrías comparar el graduationYear de cada element al año en curso:

const students = [
    { firstName: "John", lastName: "Doe", graduationYear : 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear : 2023 },
    { firstName: "Abigail", lastName: "Susu", graduationYear : 2022 }
];

const currentYear = new Date().getFullYear();

let graduatingStudents = students.filter((element) => {
    if (element.graduationYear === currentYear) {
        return element;
    }
});
  
console.log(graduatingStudents);

Esto se explica por:

[
    {
        firstName:"John",
        lastName:"Doe",
        graduationYear:2022
    },
    {
        firstName:"Abigail",
        lastName:"Susu",
        graduationYear:2022
    }
]

Continuemos con un ejercicio simple: ¡filtrar números primos! Definamos una lista con un número definido de enteros, entonces filter() esta:

const myArray = [-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97];
      
const primeNumbers = myArray.filter((element) => {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
});
  
console.log(primeNumbers); 

Por supuesto, también puede definir un primeNumbers() función, que acepta un elemento y devuelve true Donde false dependiendo de si el elemento es primo o no, utilice este método en el filter() llamar, si lo llama varias veces:

const numbers = [-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97];

function findPrimeNumbers(element) {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
}

console.log(numbers.filter(findPrimeNumbers)); 
Cómo filtrar números de una matriz

Filtrar números en una matriz, entre otros elementos, es tan simple como comprobar si una variable es un número y devolver un valor booleano:

const isNumber = function (element) {
    return Number.isFinite(element);
};

Ahora podemos llamar a nuestro método de filtro con la función reutilizable:

const random = ['1', 'blue', 2, '-4', 0, true, -3.4 ];
const numbers = random.filter(isNumber);
console.log(numbers); 

El método anterior no es útil para los números representados por cadenas, por lo que otro método podría ser convertir primero el elemento en un número, si corresponde (parseFloat()) y verifique el valor convertido con Number.isFinite():

const isNumber = function (element) {
    return Number.isFinite(parseFloat(element));
};

const random = ['1', 'blue', 2, '-4', 0, true, -3.4 ];
const numbers = random.filter(isNumber);        
console.log(numbers); 

filtrado() contra encontrar() métodos de matriz

Vale la pena tomarse un momento para apreciar esto. filter() se utiliza y para qué no se utiliza. filtrar una lista basado en uno o más criterios generalmente incluye la devolución de un sublista, cumpliendo los criterios - y más raramente, un solo elemento, si los criterios son muy estrictos. Cuando estás buscando un artículo en una lista - filtrarías todo excepto el elemento de destino, devuelto en una lista. Un ajuste más natural para este último es find() el elemento, en lugar de filter() una lista.

  • filter() devuelve una lista de todos los elementos que "pasan" el predicado
  • find() devuelve el primer objeto que "pasa" el predicado

Suponga que tiene un tablero de menú con diferentes categorías:

  const menu = [
    {
      name: "buttermilk pancakes",
      category: "breakfast",
      price: 15.99,
      status: "available"
    },
    {
      name: "diner double",
      category: "lunch",
      price: 13.99,
      status: "available"
    },
    {
      name: "godzilla milkshake",
      category: "shakes",
      price: 6.99,
      status: "available"
    },
    {
      name: "country delight",
      category: "breakfast",
      price: 20.99,
      status: "86"
    },
    {
      name: "egg attack",
      category: "lunch",
      price: 22.99,
      status: "available"
    }
  ];

Son las 8:00 am y el restaurante solo sirve productos para el desayuno hasta las 10:00 am. Querrás filtrar los artículos que no son para el desayuno:

let breakfastMenu = menu.filter((menu) => menu.category === "breakfast");  
console.log(breakfastMenu);

Esto se explica por:

[
    {
        name:"buttermilk pancakes",
        category:"breakfast",
        price:15.99,
        status:"available"
    },
    {
        name:"country delight",
        category:"breakfast",
        price:20.99,
        status:"86"
    }
]

Ahora digamos que alguien está buscando ordenar "placer del campo". La sublista es lo suficientemente corta como para notar que es 86d, pero con listas más largas, es posible que deseemos verificar si este elemento, cuando lo encontramos, está disponible o no:

const delight = menu.find((menu) => menu.name === "country delight");

if (delight.status !== "86") {
    console.log('Available!');
} else {
    console.log('Sorry, the item is not available :(');
}

Esto se explica por:

Sorry, the item is not available :(

Utilizando filtrado() con mapa()

los map() El método se usa para recorrer una matriz y aplicar una función a cada elemento, devolviendo el resultado a una nueva matriz. Este es un método muy común, y cadenas con filter() ¡bien! Por ejemplo, filtremos algunos estudiantes y luego asignemos los elementos a su nombre y apellido:

const students = [
    { firstName: "John", lastName: "Doe", grduationYear: 2022 },
    { firstName: "Stephen", lastName: "Matt", grduationYear: 2023 },
    { firstName: "Abigail", lastName: "Susu", grduationYear: 2022 }
];
  
let graduatingStudents = students
    .filter((element) => element.grduationYear === new Date().getFullYear())
    .map((item) => {
      return `${item.firstName} ${item.lastName}`;
});
  
console.log(graduatingStudents); 

Utilizando filtrado() con Índice de()

los indexOf() El método se puede usar para verificar si una cadena comienza con una subcadena y devolver elementos condicionalmente en función de si lo hacen o no. Por ejemplo, podríamos filtrar una lista de cursos de ciencias, en función de si comienzan con "mes"lo que significa que estos son curso de matemáticas:

let sciCourses = ["Mth101", "Chm201", "Bio301", "Mth203", "Mth205"];
function checkCourses(courseArray, searchText) {
    return courseArray.filter(function (item) {
        return item.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
    });
}
console.log(checkCourses(sciCourses, "mth")); 

Notar: De nuevo, desde el filter() no modifica la matriz original, debemos guardar la matriz filtrada para su uso posterior.

Conclusión

En esta guía, vimos cómo JavaScript filter() funciona, y cómo podemos usarlo para filtrar elementos de una matriz, dado un predicado/algunos criterios de filtro. Hemos considerado los argumentos adjuntos, tales como context, index y array que le permiten modificar la lógica del predicado.

Finalmente, vimos varios ejemplos y cubrimos find() como alternativa cuando solo busca un único artículo, y cómo filter() se puede utilizar con otros métodos en una cadena.

Si quieres conocer otros artículos parecidos a Guía del método filter() de JavaScript puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas