¿Cómo filtrar una array de objetos en ES6?

En este artículo, intentaremos comprender cómo podemos filtrar o separar ciertos datos de la array de objetos en ES6.

Primero, comprendamos cómo podemos crear una array de objetos siguiendo cierta sintaxis proporcionada por JavaScript.

Array de objetos:

• La array de objetos ayuda a cualquier usuario a almacenar múltiples valores en una sola variable.
• En realidad, almacena una colección de tamaño fijo de acceso secuencial y también del mismo tipo.
• Al usar la siguiente sintaxis, podríamos crear fácilmente una array de múltiples objetos.

Sintaxis:

Usando la siguiente sintaxis, podríamos crear una array de objetos con facilidad.

let array_of_objects = [
{ property-name: value},
{ property-name: value},
.........
]

Veamos el siguiente ejemplo para una mejor comprensión de cómo crear una array de objetos.

Ejemplo:

<script>
  let people_details = [
    {name: "ABC", age: 18},
    {name: "GeeksforGeeks", age: 30},
    {name: "DEF", age: 50},
  ];
  console.log(people_details);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[
  { name: 'ABC', age: 18 },
  { name: 'GeeksforGeeks', age: 30 },
  { name: 'DEF', age: 50 }
]

Ahora que hemos entendido el concepto de crear una array de objetos, veamos cómo podemos filtrar algunos datos según los requisitos del usuario de la array de objetos.

método de filtro():

Los siguientes puntos ordenados secuencialmente representarán nuestra tarea ilustrada anteriormente:

• Para filtrar los contenidos de la array de objetos, usaríamos al principio el método filter() que aplicaríamos en nuestra parte más externa de la array.
• Dentro de ese método, estaríamos pasando una función que se ejecutaría en todos los objetos presentes dentro de una array, y para acceder a cada uno de esos objetos estaríamos usando un elemento de cualquier nombre con el propósito de acceder a esos objetos presentes dentro de esa array. .
• Luego, según los requisitos del usuario, los datos de esa array de objetos se filtrarán y se podrán mostrar si es necesario.

Ejemplo 1:

<script>
  let people_details = [
    {name: "ABC", age: 18},
    {name: "GeeksforGeeks", age: 30},
    {name: "DEF", age: 50},
  ];
  console.log(people_details);
 
  let data = people_details.filter(
    element => element.age >= 30);
  console.log(data);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[
  { name: 'ABC', age: 18 },
  { name: 'GeeksforGeeks', age: 30 },
  { name: 'DEF', age: 50 }
]

[ 
    { name: 'GeeksforGeeks', age: 30 }, 
    { name: 'DEF', age: 50 } 
]

Complejidad temporal: O(n) 

Espacio Auxiliar: O(1)

Ejemplo 2:

• En este ejemplo, utilizaremos el método filter() para filtrar los datos del grupo sanguíneo que el usuario requiere como resultado final.
• Allí también usaremos el operador lógico && proporcionando ambas condiciones, la edad debe ser mayor de 18 años y el grupo sanguíneo requerido es B+.

</script>
  let blood_groups_data = [
    { name: "ABC", age: 19, blood_group: "B+" },
    { name: "DEF", age: 20, blood_group: "AB+" },
    { name: "JOHN", age: 25, blood_group: "A+" },
    { name: "APPLE", age: 45, blood_group: "B+" },
    { name: "PETER", age: 48, blood_group: "AB-" },
    { name: "JAMES", age: 53, blood_group: "B+" },
  ];
 
  console.log(blood_groups_data);
 
  let blood_group_required_data = blood_groups_data.filter(
    (person) => person.age > 18 && person.blood_group === "B+"
  );
  console.log(blood_group_required_data);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[
  { name: 'ABC', age: 19, blood_group: 'B+' },
  { name: 'DEF', age: 20, blood_group: 'AB+' },
  { name: 'JOHN', age: 25, blood_group: 'A+' },
  { name: 'APPLE', age: 45, blood_group: 'B+' },
  { name: 'PETER', age: 48, blood_group: 'AB-' },
  { name: 'JAMES', age: 53, blood_group: 'B+' }
]

[
  { name: 'ABC', age: 19, blood_group: 'B+' },
  { name: 'APPLE', age: 45, blood_group: 'B+' },
  { name: 'JAMES', age: 53, blood_group: 'B+' }
]

Complejidad temporal: O(n) 

Espacio Auxiliar: O(1)