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;
    }
);

By Xurxo González Tenreiro

Informático de mente inquieta con grandes ideas en el ámbito de la progamación. Especialista en el desarrollo web e interesado en el análisis SEO. Me encanta mi labor en el ámbito de la divulgación por lo cual he ampliado mis horizontes al ámbito de la educación y formación en el desarrollo de aplicaciones web. También como gestor de contenidos web soy muy puntilloso con la divulgación y la elaboración de publicaciones en la red.

One thought on “Ejemplo de uso de arrays en JavaScript”

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.