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
- for
- while
- do...while
//Array de imágenes definido anteriormente.
let i=0;
do{
images[i];
i++;
}i<7Ejemplo 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.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;
}
);
Thanks!