How to Access Properties from an Array of Objects in JavaScript

 Cómo acceder a propiedades desde una matriz de objetos en JavaScript

Cuando trabaja con aplicaciones JavaScript, es común trabajar con matrices, matrices anidadas y una matriz de objetos. Pero muchos principiantes a veces tienen dificultades para saber cómo acceder a las propiedades desde estas diferentes estructuras de datos.

En este artículo, analizaremos cómo acceder a propiedades desde una variedad de matrices y veremos algunos ejemplos de código.

¿Qué es una matriz en JavaScript?

Una matriz es un tipo de estructura de datos en JavaScript que se utiliza para almacenar una colección de elementos que pueden ser de diferentes tipos.

Puedes tener una serie de cadenas, como esta:

const fruits = ["apple", "banana", "mango", "orange"];

Puede tener una variedad de números:

const numbers = [1, 2, 3, 4, 5];

Puede tener una matriz anidada de matrices como esta:

const nestedArray = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9],

];

También puede tener una variedad de tipos de datos mixtos:

const mixedArray = ["apple", 1, "banana", 2, "mango", 3];

Cómo acceder a elementos desde una matriz en JavaScript

Para acceder a un elemento desde una matriz, haga referencia al nombre de la matriz, seguido de un par de corchetes que contienen el índice del elemento al que desea acceder.

A continuación se muestra un ejemplo de cómo acceder al primer elemento de la fruitsmatriz:

const fruits = ["apple", "banana", "mango", "orange"];

console.log(fruits[0]); // apple

Las matrices tienen un índice cero, lo que significa que el primer elemento de la matriz tiene un índice de 0, el segundo elemento tiene un índice de 1, y así sucesivamente.

Si desea acceder al último elemento de una matriz, puede utilizar la longitud de la matriz menos 1.

const fruits = ["apple", "banana", "mango", "orange"];

console.log(fruits[fruits.length - 1]); // orange

A veces puede resultar confuso cuando se trata de una matriz anidada de matrices. Pero la sintaxis sigue siendo la misma cuando desea acceder a un elemento de una matriz anidada.

A continuación se muestra un ejemplo de cómo acceder al primer elemento de la primera matriz en nestedArray:

const nestedNumberArray = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9],

];

console.log(nestedNumberArray[0][0]); // 1

nestedNumberArray[0]apunta a esta matriz aquí:

[1, 2, 3];

Para acceder al primer elemento de esta matriz, utilice otro par de corchetes con el índice del elemento al que desea acceder.

nestedNumberArray[0][0];

Cómo acceder a propiedades desde una matriz de objetos en JavaScript

Muchas veces encontrarás una serie de objetos en JavaScript.

A continuación se muestra un ejemplo con una variedad de desarrolladores. Cada desarrollador tiene un nombre, una edad y una variedad de lenguajes de programación que conoce.

const developers = [

  { name: "John", age: 25, languages: ["JavaScript", "Python"] },

  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },

  { name: "Zack", age: 45, languages: ["Go", "C#"] },

];

Si quisieras acceder al nombre del primer desarrollador, puedes utilizar la siguiente sintaxis:

console.log(developers[0].name); // John

Aquí utilizamos una combinación de notación de puntos y corchetes para acceder a la propiedad de nombre del primer objeto de desarrollador de la developersmatriz.

developers[0]es el primer objeto desarrollador

{ name: "John", age: 25, languages: ["JavaScript", "Python"] }

Luego usamos la notación de puntos ( developers[0].name) para acceder a la namepropiedad de este objeto.

Cómo encontrar un valor específico de una matriz de objetos en JavaScript

Si buscamos un objeto específico entre una serie de objetos, podemos usar el findmétodo. El findmétodo devuelve el primer elemento de la matriz que satisface la función de prueba proporcionada. Si ningún elemento pasa la prueba, undefinedse devuelve.

A continuación se muestra un ejemplo del uso del findmétodo para una matriz de números:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((number) => number > 3); // 4

El siguiente ejemplo examina la matriz de números y devuelve el primer número mayor que 3. En este caso, el findmétodo devuelve el número 4.

Podemos aplicar el mismo concepto para encontrar un objeto específico entre una matriz de objetos.

En el siguiente ejemplo, buscamos el objeto de desarrollador con el nombre "Kelly".

const developers = [

  { name: "John", age: 25, languages: ["JavaScript", "Python"] },

  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },

  { name: "Zack", age: 45, languages: ["Go", "C#"] },

];

developers.find((developer) => developer.name === "Kelly");

En este ejemplo, developerrepresenta cada objeto de la matriz. El findmétodo recorrerá la developersmatriz y devolverá el primer objeto de desarrollador que tiene el nombre "Kelly".

{ name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] }

Conclusión

Espero que este artículo le haya resultado útil a la hora de aprender sobre matrices y cómo acceder a sus propiedades.

Analizamos algunos ejemplos de matrices y también cómo acceder a elementos de matrices anidadas y una matriz de objetos.

También aprendimos sobre el findmétodo y cómo usarlo para encontrar un objeto específico entre una serie de objetos.

Ahora debería comprender mejor cómo trabajar con matrices y objetos en JavaScript.