Buscar objeto en matriz por valor de propiedad en JavaScript

Migel Hewage Nimesha 15 febrero 2024
  1. Buscar objeto en matriz por valor de propiedad utilizando el método find()
  2. Buscar objeto en matriz por valor de propiedad utilizando el método filtro ()
  3. Buscar objeto en matriz por valor de propiedad usando JavaScript for Loop
  4. Buscar objeto en matriz por valor de propiedad usando JavaScript for...in Loop
Buscar objeto en matriz por valor de propiedad en JavaScript

Una matriz se refiere a una lista ordenada de valores, cada uno conocido como un elemento especificado por un índice. Una matriz de JavaScript puede contener diferentes valores de tipos mixtos, como cadena, nulo o booleano, y el tamaño de la matriz no es necesario para especificar dónde crece automáticamente y es dinámico.

Al considerar el objeto de matriz, almacena múltiples valores en una sola variable y una colección secuencial de elementos de tamaño fijo con el mismo tipo de datos. Al especificar un solo parámetro numérico con un constructor de matriz, el usuario debe establecer la longitud inicial de la matriz.

La longitud máxima permitida para una matriz es 4.294.967.295. Aunque una matriz contiene la recopilación de datos, con frecuencia es más útil pensar en una matriz como una colección de variables de un tipo similar.

Además, la matriz de JavaScript consta de diferentes métodos y propiedades que ayudarán a que un programa se ejecute de manera eficiente sin mucha codificación.

Se pueden usar diferentes implementaciones en JavaScript al encontrar un objeto en una matriz por su valor de propiedad.

Buscar objeto en matriz por valor de propiedad utilizando el método find()

Podemos usar el método find() para encontrar un objeto en una matriz de objetos en JavaScript por su valor de propiedad. Aquí, el método find() devuelve el primer elemento de la matriz siempre que satisfaga la función de prueba dada.

Cualquier valor que no cumpla con la función de prueba devolverá indefinido. Los siguientes códigos indican cómo encontrar un objeto por id en una matriz de objetos de JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Object In Array By Property Value</title>
</head>

<body>
    <script>
    var sampleArray = [
        {"id": 1, "animal": "Dog"},
        {"id": 2, "animal": "Cat"},
        {"id": 3, "animal": "Bird"},
        {"id": 4, "animal": "Fish"}
    ];

    //getting the object by its id
    var output = sampleArray.find(object => object.id === 3);

    //outputs the animal to be found
    document.write(output.animal);

    </script>
</body>
</html>

La palabra clave const a veces se usa como una práctica común para declarar arreglos en lugar de var.

Aquí, el usuario necesita encontrar el animal con la identificación proporcionada y, como resultado, el animal era “Pájaro” que coincide con la identificación (3) proporcionada por el usuario.

Producción:

JavaScript Buscar objeto en matriz por valor de propiedad - Salida 1

Si es necesario, el método findIndex() se puede usar en el siguiente código para encontrar el índice del objeto coincidente en la matriz.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript Find Object In Array By Property Value</title>
</head>

<body>
    <script>
    var sampleArray = [
        {"id": 1, "animal": "Dog"},
        {"id": 2, "animal": "Cat"},
        {"id": 3, "animal": "Bird"},
        {"id": 4, "animal": "Fish"}
    ];

   //getting the index of the object that matches the id
    var objectIndex = sampleArray.findIndex(object => object.id === 3);

    //getting the output as the index and the animal to be found
    document.write(objectIndex + "<br>");
    document.write(sampleArray[objectIndex].animal);

    </script>
</body>
</html>

Aquí el usuario necesita encontrar el animal con la identificación dada y el índice. Como resultado, el animal encontrado fue Bird con su índice 2, que coincide con el id (3) proporcionado por el usuario.

Producción:

JavaScript Buscar objeto en matriz por valor de propiedad - Salida 2

Buscar objeto en matriz por valor de propiedad utilizando el método filtro ()

También podemos utilizar el método filter() para crear una nueva matriz llena de elementos que pasan por la función de prueba. El método filter() no ejecuta la función si los elementos son nulos y no realiza ningún cambio en la matriz original.

Los siguientes códigos indican cómo encontrar un objeto por id en una matriz de objetos de JavaScript.

var animals = [
  {animalName: 'Dog', ability: 'Bark'}, {animalName: 'Cat', ability: 'Meow'},
  {animalName: 'Bird', ability: 'Fly'}, {animalName: 'Fish', ability: 'Swim'}
];

var animalAbility = animals.filter(function(animal) {
  return animal.ability == 'Bark';
});

console.log(animalAbility);

Aquí el usuario puede obtener la salida requerida ingresando la “capacidad” relevante que se necesita para obtener de la matriz.

Producción:

JavaScript Buscar objeto en matriz por valor de propiedad - Salida 3

Buscar objeto en matriz por valor de propiedad usando JavaScript for Loop

Primero, declare una matriz de objetos, cada objeto con una identificación y propiedades de nombre. Cuando se trata de la ejecución del programa, se crea una función con una matriz, una clave de objeto y un valor.

El bucle for se usa para iterar a través de los objetos en una matriz. Cada objeto se comprueba con la clave asignada y el valor mediante el operador de igualdad (===).

Si coincide, el programa devuelve un objeto. De lo contrario, devuelve null como salida.

Los códigos a continuación indican cómo encontrar un objeto por la clave en una matriz de objetos de JavaScript. Este código no utiliza ningún método de matriz para encontrar un objeto de matriz.

let animals =
    [
      {'id': 1, 'animal': 'Dog'}, {'id': 2, 'animal': 'Cat'},
      {'id': 3, 'animal': 'Bird'}, {'id': 4, 'animal': 'Fish'}
    ]

    // declaration of the function and iteration through the objects
    function getObjectByKey(array, key, value) {
      for (var c = 0; c < array.length; c++) {
        if (array[c][key] === value) {
          return array[c];
        }
      }
      return null;
    } console.log(getObjectByKey(animals, 'animal', 'Fish'))

El usuario puede obtener la salida requerida proporcionando la clave correspondiente.

Producción:

JavaScript Buscar objeto en matriz por valor de propiedad - Salida 4

Buscar objeto en matriz por valor de propiedad usando JavaScript for...in Loop

Si es necesario, el ciclo for...in se puede usar para encontrar un objeto de matriz por valor de propiedad a medida que itera a través de todos los valores de propiedad de un objeto.

El siguiente código muestra cómo se puede usar el bucle for...in para encontrar un objeto.

var animals = [
  {'id': 1, 'animal': 'Dog'}, {'id': 2, 'animal': 'Cat'},
  {'id': 3, 'animal': 'Bird'}, {'id': 4, 'animal': 'Fish'}

];

for (const c in animals) {
  if (animals[c].id == 2) {
    console.log(animals[c]);
  }
}

Aquí, el usuario puede obtener la salida al proporcionar la identificación relevante según sea necesario.

Producción:

JavaScript Buscar objeto en matriz por valor de propiedad - Salida 5

Con más implementaciones, existen otros métodos para obtener un objeto JavaScript de una matriz de objetos por el valor de la propiedad.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Artículo relacionado - JavaScript Object