Cómo filtrar un objeto por clave en JavaScript

Los objetos de JavaScript no son iterables como matrices o cadenas, por lo que no podemos utilizar el método filter() directamente en un objeto. filter() nos permite iterar...

Introducción

Los Objetos de JavaScript no son iterables como matrices o cadenas, por lo que no podemos usar el método filter() directamente en un Objeto. filter () nos permite iterar a través de una matriz y devuelve solo los elementos de esa matriz que se ajustan a ciertos criterios, en una nueva matriz.

If you'd like to read more about the filter() method - read our Guía del método filter() de JavaScript!

En este artículo, exploraremos cómo filtrar un Objeto haciendo uso de su clave en JavaScript.

Un objeto es, esencialmente, un mapa de propiedades y sus valores. Este conjunto de pares clave-valor es lo que un objeto es. Naturalmente, podemos extraer las claves y los valores individualmente:

Las claves se extraen usando Object.keys(), mientras que los valores se extraen usando Object.values(). Para recuperar claves y valores, puede usar alternativamente Object.entries(). Nos preocupamos únicamente de las claves en este artículo, para filtrar claves según ciertos criterios.

Uso de Object.keys() para filtrar un objeto

El método Object.keys() se utiliza para generar una matriz cuyos elementos son cadenas que contienen los nombres (claves) de las propiedades de un objeto. El objeto se pasa como argumento a Object.keys():

1
Object.keys(objectName);

Por ejemplo, supongamos que tenemos un objeto de puntuaciones de usuarios en varias materias:

1
2
3
4
5
6
const userScores = {
    chemistry: 60,
    mathematics: 70,
    physics: 80,
    english: 98
};

Podemos recorrer el objeto y obtener las claves, que para este ejemplo serían los sujetos:

1
2
const names = Object.keys(userScores);
console.log(names); // ["chemistry","mathematics","physics","english"]

Una vez que haya generado las claves, puede usar filter() para recorrer los valores existentes y devolver solo aquellos que cumplan con los criterios especificados. Finalmente, puede usar reduce() para recopilar las claves filtradas y sus valores en un nuevo objeto, por ejemplo.

{.icon aria-hidden=“true”}

Nota: filter() es excelente para encadenar con otros métodos funcionales.

Supongamos que tenemos un objeto y queremos devolver solo pares clave-valor con la palabra "nombre" en las claves:

1
2
3
4
5
6
7
8
const user = {
    firstName: "John",
    lastName: "Doe",
    userName: "johndoe12",
    email: "[correo electrónico protegido]",
    age: 37,
    hobby: "Singing"
};

Podríamos filtrar haciendo uso de la tecla Objetos:

1
2
3
4
5
6
7
8
9
const names = Object.keys(user)
    .filter((key) => key.includes("Name"))
    .reduce((obj, key) => {
        return Object.assign(obj, {
          [key]: user[key]
        });
  }, {});

console.log(names);

Hicimos uso de Object.keys(user) para generar todas las claves como una matriz, lo que resultó en una matriz:

1
["firstName","lastName","userName","email","age","hobby"]

Luego usamos la función de matriz includes() como criterio, dentro del método filter(), para revisar cada elemento de la matriz y determinar si alguna clave incluía la palabra "Nombre":

1
["firstName","lastName","userName"]

Luego, usamos reduce() para reducir la matriz a un objeto.

{.icon aria-hidden=“true”}

Nota: La función reduce() acepta dos argumentos: un objeto como primer parámetro (identidad) y el valor de iteración actual como segundo.

Estamos utilizando Object.assign() para combinar objetos de origen en un objeto de destino en el nuevo objeto que se está generando. La función Object.assign() toma el Object que se está construyendo y agrega el par clave-valor actual que le estamos pasando.

Y al final de esto, tenemos un nuevo objeto, filtrado por las claves:

1
{ firstName: 'John', lastName: 'Doe', userName: 'johndoe12' }

Filtrar matriz de objetos por clave

A menudo, los objetos que estamos procesando se secuencian en una matriz. Filtrar cada uno es tan fácil como filtrar uno: solo iteramos a través de la matriz y aplicamos los mismos pasos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const users = {
    John: { username: 'johncam112', age:19 },
    Daniel: { key: 'Dandandel1', age:21 },
    Ruth: { key: 'rutie01', age:24 },
    Joe: { key: 'Joemathuel', age:28 }
};

const selectedUsers = ['Ruth', 'Daniel'];

const filteredUsers = Object.keys(users)
    .filter(key => selectedUsers.includes(key))
    .reduce((obj, key) => {
        obj[key] = users[key];
        return obj;
  }, {});

console.log(filteredUsers);

En el ejemplo anterior, filtramos el objeto Usuarios para que solo devuelva objetos de los usuarios seleccionados, filtrándolos por la clave:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    Daniel: {
        key:"Dandandel1",
        age:21
},
    Ruth: {
        key:"rutie01",
        age:24
    }
}

Conclusión

En este breve artículo, hemos echado un vistazo al filtrado de objetos por valor, usando el método Object.keys(), filtrado a través del método filter().