Iterar sobre una matriz de objetos en TypeScript

1. Matrices en TypeScript
2. Iterar sobre una matriz de objetos usando el método forEach en TypeScript
3. Iterar sobre una matriz de objetos utilizando la instrucción for...of en TypeScript
4. Iterar sobre una matriz de objetos utilizando la instrucción for...in en TypeScript
5. Iterar sobre una matriz de objetos usando el bucle for en TypeScript

Este artículo explicará cómo podemos iterar sobre una matriz de objetos en TypeScript.

Matrices en TypeScript

Las matrices de TypeScript están definidas por el usuario. Es un tipo de datos especial que puede almacenar múltiples valores de varios tipos de datos, como cadenas, números, etc.

Una matriz es una estructura de datos de tamaño fijo. La matriz de elementos se almacena en un almacenamiento basado en índices.

El primer elemento se almacena en el índice 0 y se incrementa en uno por cada elemento agregado.

TypeScript usa la siguiente sintaxis para declarar e inicializar una matriz.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

Acceder a los elementos de la matriz

Se puede acceder a la matriz de elementos como se muestra a continuación utilizando el índice de un elemento.

Código de ejemplo:

console.log(carBrands[0]);
console.log(carBrands[1]);
console.log(carBrands[2]);
console.log(carBrands[3]);

Producción :

Audi
BMW
Toyota
Mercedes

Hay varias formas de iterar sobre una matriz de elementos en TypeScript.

1. El método forEach
2. El bucle for
3. La declaración for...of
4. La declaración for...in

Iterar sobre una matriz de objetos usando el método forEach en TypeScript

Este método ejecuta una función en cada elemento u objeto en la matriz de TypeScript. El método forEach se puede declarar como se muestra a continuación.

Sintaxis:

your_array.forEach(callback function);

Declaremos una matriz de cadenas.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

Copiaremos todos los elementos de la matriz de carBrands a otra matriz utilizando el método forEach. Declaremos una matriz vacía llamada copyOfCarBrands.

let copyOfCarBrands: string[] = [];

Usemos el método forEach para iterar sobre cada elemento en la matriz carBrands y empujarlo a la nueva matriz copyOfCarBrands.

carBrands.forEach(function(brand){
    copyOfCarBrands.push(brand);
});

Finalmente, imprimamos la matriz copyOfCarBrands.

console.log(copyOfCarBrands);

Producción :

[ 'Audi', 'BMW', 'Toyota', 'Mercedes' ]

También podemos usar el método forEach con matrices de varios tipos. Definamos una matriz de varios tipos llamada multiValues y registremos cada elemento en la consola.

let multiValues: (string | number)[] = ['Asia', 1000, 'Europe', 340, 20];
multiValues.forEach(function(value){
    console.log(value);
});

Producción :

Asia
1000
Europe
340
20

Hay un par de inconvenientes en el método forEach.

1. Este método solo se puede usar con arreglos.
2. No hay forma de romper el bucle.

Iterar sobre una matriz de objetos utilizando la instrucción for...of en TypeScript

La instrucción de bucle for...of puede acceder a los elementos de una matriz y devolverlos. Se puede utilizar como se muestra a continuación.

Sintaxis:

for (let variable of givenArray ) {
    statement;
}

En cada iteración, se asignará variable a un elemento de matriz de givenArray.

Declaremos una matriz.

let fruits: string[] = ["Apple", "Grapes", "Mangoe", "Banana"];

El bucle for...of se puede utilizar a continuación para acceder a cada elemento de la matriz fruits.

for (let fruitElement of fruits) {
  console.log(fruitElement);
}

Producción :

Apple
Grapes
Mangoe
Banana

Iterar sobre una matriz de objetos utilizando la instrucción for...in en TypeScript

La sintaxis del bucle for...in es casi similar a for...of. Pero devuelve el índice de los elementos de la matriz en cada iteración.

Este bucle se puede utilizar como se muestra a continuación.

Sintaxis:

for (let variable in givenArray ) {
    statement;
}

La variable se asignará al índice de cada elemento en cada iteración. givenArray es la matriz iterable.

Definamos una matriz de números.

let numberArr: number[] = [100,560,300,20];

Podemos usar el valor de índice devuelto para acceder a cada elemento de numberArr.

for (let variable in numberArr ) {
    console.log(numberArr[variable]);
}

En cada iteración, la variable se asigna al índice de cada elemento en numberArr. Por lo tanto, podemos acceder al valor del elemento por numberArr[index].

En este caso, el valor del índice sería variable en cada iteración.

Producción :

100
560
300
20

Iterar sobre una matriz de objetos usando el bucle for en TypeScript

El bucle for es la forma más común de iterar sobre elementos de matriz. Se puede usar como se muestra a continuación.

Sintaxis:

for (let index; index<arraySize; index++) {
    statement;
}

El valor del índice se incrementa en cada iteración y el bucle continúa hasta que se cumple la condición índice < tamaño de la matriz.

Vamos a crear una matriz de cadenas.

let oceanArr: string[] = ['Atlantic', 'Indian', 'Pacific'];

Podemos iterar sobre cada elemento en oceanArr e imprimir como se muestra a continuación.

for (let index=0; index<oceanArr.length; index++) {
    console.log(oceanArr[index]);
}

Producción :

Atlantic
Indian
Pacific