Aprende Iteración Sobre Arreglos con el Bucle For

¡La manipulación adecuada de arreglos comienza con los bucles!

Ya conoces qué son los arreglos y que la indexación en ellos comienza desde cero. También sabes que en un bucle for, podemos asignar cualquier valor a la variable i. Por ejemplo, ¡cero! Pero, ¿qué sucede si nos resulta conveniente usar un bucle for junto con un arreglo? Pensemos en ello:

Si necesitamos recuperar un elemento del arreglo, usamos array[index];;
Tenemos la variable i, que efectivamente reemplaza nuestro índice;
Combinando los dos puntos anteriores, podemos concluir que podemos usar la sintaxis array[i] dentro de un bucle for para trabajar rápidamente con un arreglo. Veamos un ejemplo:


              12345
            
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0];

for (let i: number = 0; i < 10; i++) {
    console.log(`The ${i} element in the array is ${array[i]}`)
}

Analicemos lo que sucede en el código anterior:

Creamos un arreglo de tipo number con 10 elementos;
El objetivo es inspeccionar cada elemento del arreglo y determinar en qué índice se encuentra;
Dado que la indexación en el arreglo comienza desde 0, nuestra variable i inicialmente tiene un valor de 0. También establecemos el límite igual a la longitud del arreglo, que es 10;
Sabiendo que i es el índice del elemento, recuperamos los elementos del arreglo y los mostramos en pantalla usando array[i];;
Como i es el índice del elemento en el arreglo, mostramos inmediatamente con qué índice se encuentra un elemento en particular.

De esta manera, podemos interactuar con el arreglo. Planteémonos una tarea diferente: recuperar cada elemento que se encuentra en un índice par de este arreglo:


              12345
            
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0];

for (let i: number = 0; i < 10; i+=2) {
    console.log(`The ${i} element in the array is ${array[i]}`)
}

Al utilizar i+=2, que es equivalente a i = i + 2, se obtiene cada elemento del arreglo que se encuentra en un índice par. En otras palabras, el índice del elemento debe ser divisible por 2. Dichos índices son 0, 2, 4, 6, y así sucesivamente. Además, con i es posible mostrar el índice del elemento, como se hizo en el ejemplo anterior.

Por cierto, no es necesario contar manualmente el tamaño del arreglo. Se puede utilizar la propiedad del arreglo array.length. Veamos un ejemplo y, al mismo tiempo, observemos cómo iterar por el arreglo desde el final hasta el principio (en caso de que sea necesario recorrer el arreglo en orden inverso).


              12345
            
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0];

for (let i: number = array.length - 1; i >= 0; i--) {
    console.log(`The ${i} element in the array is ${array[i]}`)
}

En el ejemplo anterior, se inicializó i como array.length - 1 porque array.length es 10, y el último elemento del arreglo tiene un índice de 9. Esto se debe al indexado basado en cero.

Además, se puede utilizar array.length no solo para la inicialización sino también dentro de la condición. Existen numerosos ejemplos posibles para todo esto; solo se requiere algo de imaginación y casos de uso específicos. Por ejemplo:


              123456789
            
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0];

for (let i: number = 0; i < array.length; i++) {
    if ((array.length - i) % 2 == 0) {
        console.log(`The ${i} element in the array is ${array[i]}`)
    } else {
        console.log("[DELETED DATA]")
    }
}

Si el valor de la longitud del array menos el índice es divisible por 2, se muestra ese elemento. De lo contrario, se muestra 'DELETED DATA' - son órdenes del jefe.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how the last code example works in more detail?

What are some other ways to loop through an array in TypeScript?

Can you show how to use a for...of loop with arrays?

Awesome!

Completion rate improved to 2.94

Desliza para mostrar el menú