HTML5

Ejemplo de uso de arrays en JavaScript

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

Comments

One response to “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.