Filtrar arrays de objetos basados en atributos en JavaScript

1. Función general de devolución de llamada para filtrar un array de objetos basada en atributos en JavaScript
2. Use la función de flecha para filtrar un array de objetos según los atributos en JavaScript

El método filter() es la forma más fácil de obtener un resultado de preferencia.

Aparte de eso, puede recorrer todal array de objetos y declarar condiciones explícitamente. Técnicamente, la técnica de menos código y fácil acceso es por el método filter.

Aquí, nos centraremos en dos formas de usar un filtro en un array de objetos. Dirigiremos una función de devolución de llamada a una variable u objeto para almacenar el resultado filtrado.

Esta función de devolución de llamada tendrá la estructura general de una función. Más tarde, también intentaremos resolver el caso con una función de flecha y verificar si el resultado es similar.

Función general de devolución de llamada para filtrar un array de objetos basada en atributos en JavaScript

Esta demostración inicializará un array con múltiples atributos, también conocidos como pares clave-valor. La estrategia es acceder primero al objeto y luego al array.

A continuación, tomaremos un atributo y le aplicaremos una condición. Cuando usamos el método filter, se filtrará la coincidencia exacta de las condiciones.

Saltemos a las líneas de código.

Fragmento de código:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(function(el) {
  return el.age < 25 && el.height >= 170;
});
console.log(extract);

Producción:

Aquí, el feature.models.filter accede al objeto y la matriz en consecuencia. Además, el método filter se activa para poner las restricciones dentro de él.

Como podemos ver, age<25 && height>170 extrae los posibles detalles de los modelos coincidentes.

Use la función de flecha para filtrar un array de objetos según los atributos en JavaScript

Una función de flecha es una forma abreviada de las convenciones de estructura de funciones normales. Veremos si podemos usar una función de flecha para filtrar un array de objetos.

Fragmento de código:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(x => x.age < 25 && x.hair == 'Black');
console.log(extract);

Producción:

De acuerdo con el código anterior, filtrar el resultado necesario con un método filter de función de flecha es más claro.

Este procedimiento solo requiere una variable (aquí x) para señalar los atributos. Además, este estilo de codificación se usa para acortar códigos y se emite mediante la última convención ES6.