Ejemplo de uso de arrays en JavaScript

HTML5

Un array, arreglo, vector o tabla unidimensional es un tipo de dato estructurado que permite almacenar un conjunto de datos. Como JavaScript es un lenguaje débilmente tipado estos datos pueden ser datos heterogéneos al mismo tiempo.

Inicialización de un array

No es este un artículo donde quiera exponer cómo se crea un Array para eso tenemos amplia información en JavaScript | MDN. A modo de ejemplo definiremos el siguiente array.

let images = [
'http://placekitten.com/300/600',
'http://placekitten.com/800/300',
'http://placekitten.com/400/600',
'http://placekitten.com/320/400',
'http://placekitten.com/350/400',
'http://placekitten.com/420/600',
'http://placekitten.com/320/710'];

Como observamos hemos creado un vector de siete elementos que contienen enlaces al dominio placekitten.
Utilizaremos este array en un ejemplo práctico para cargar un elemento selector y asignar las rutas a un elemento imagen

Para recorrer un arreglo nos hace falta utilizar unas estructuras repetitivas conocidas como bucles o ciclos:
  • for
  • while
  • do…while
Por ejemplo, imaginemos un vector de N elementos:
//Array de imágenes definido anteriormente.
let i=0;
do{
  images[i];           
  i++;
}i<7

Ejemplo de arreglo

A continuación sobre un elemento img cargaremos las rutas de imágenes de un array para después selecionarlos de un combo o elemento select.
Gatitos
let i=0;
let images = [
'http://placekitten.com/300/600',
'http://placekitten.com/800/300',
'http://placekitten.com/400/600',
'http://placekitten.com/320/400',
'http://placekitten.com/350/400',
'http://placekitten.com/420/600',
'http://placekitten.com/320/710'];
let imagenEl = document.querySelector('#imagen');
let selectorEl = window.document.querySelector('#selector');
do{
    let optionEl = window.document.createElement('option');
    optionEl.text = `Imagen ${i+1}`;
    optionEl.value = images[i];
    selectorEl.appendChild(optionEl);            
    i++;
}while(i<images.length)

selectorEl.addEventListener(
    'change',
    (e)=>{
        imagenEl.src=selectorEl.options[selectorEl.selectedIndex].value;
    }
);

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *