Cómo filtrar un objeto en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Cómo filtrar un objeto en JavaScript
Moataz Farid 12 octubre 2023
JavaScript JavaScript Filter JavaScript Object
  1. Usar reduce para filtrar un objeto en JavaScript
  2. Usa la función map para filtrar los objetos de JavaScript
Cómo filtrar un objeto en JavaScript

Este tutorial introducirá cómo filtrar un objeto en JavaScript. Aprenderemos a implementar un método de filter similar al del tipo de datos del Object en JavaScript.

Usar reduce para filtrar un objeto en JavaScript

Ahora vamos a implementar la función de filtrar objetos usando la función reduce.

Supongamos que tenemos el siguiente objeto:

var grades = {linearAlgebra: 90, chemistry: 95
biology: 90
    languages : 96
}

El objeto anterior representa las calificaciones de un estudiante; necesitamos filtrar ese objeto y sólo obtenemos las materias con una calificación de 95 o más.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(function(ObjectKey) {
        return filterFunction(mainObject[ObjectKey])
      })
      .reduce(function(result, ObjectKey) {
        result[ObjectKey] = mainObject[ObjectKey];
        return result;
      }, {});
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, function(grade) {
  return grade >= 95;
});

console.log('Target Subjects are ', targetSubjects);

Resultado:

"The grades are ", {
  biology: 90,
  chemistry: 95,
  languages: 96,
  linearAlgebra: 90
}
"Target Subjects are ", {
  chemistry: 95,
  languages: 96
}

Implementamos la función Object.filter como Object.filter = function(mainObject, filterFunction) en el ejemplo anterior. Podemos simplificar ese código de ejemplo como se muestra a continuación.

Object.filter = function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(innerFilterFunction)
      .reduce(reduceFunction, {});
}

Tiene 3 pasos principales para implementar esa función Object.filter:

  1. Object.keys() devuelve un conjunto de claves de los pares clave-valor del objeto. En nuestro ejemplo, es linearAlgebra, chemistry, biology, languages.
  2. El resultado del Object.keys() se envía a la función de devolución innerFilterFunction, que también es un argumento de la función de filtro, y la salida de esa función innerFilterFunction serán las claves filtradas. La salida es chemistry, languages en nuestro ejemplo.
  3. El resultado del filtro se pasa ahora a nuestra función reduce(), que añade cada valor a su clave, y devuelve un nuevo objeto que contiene todos esos pares. Así que el resultado en nuestro ejemplo es {chemistry: 95, languages: 96}.

Si queremos recrear el ejemplo anterior con la sintaxis arrow de ES6, podríamos reescribirlo como sigue.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                (result[ObjectKey] = mainObject[ObjectKey], result),
            {});

console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Resultado:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Utiliza el operador coma para devolver el objeto result, y también puede ser sustituido por Object.assign, que devuelve el resultado también. Así que el código puede ser reescrito como sigue.

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                Object.assign(result, {[ObjectKey]: mainObject[ObjectKey]}),
            {});

Usa la función map para filtrar los objetos de JavaScript

Como usamos la función reduce en la solución anterior, también podemos usar la función map para filtrar los objetos de JavaScript.

Object.filter = function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

Reemplazamos la función reduce por la función map como se muestra arriba, y también usamos el Object.assign y le enviamos usando la sintaxis spread todas las operaciones que comienzan desde Object.keys() hasta map, así que la implementación completa debería ser como la siguiente:

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Resultado:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Artículo relacionado - JavaScript Filter

Artículo relacionado - JavaScript Object