10 - Arrays

Trabajando con Arrays en JavaScript

Índice
 Array
 Declaración de array en JavaScript.
 Identificación de cada una de las posiciones.
 Error típico.
 Accediendo a las posiciones.
 Recorriendo un array.
 Inicializando un array.
 Funciones: paso del array como argumento.
 La clase Array.
 Arrays multidimensionales (matrices).

 Ejercicios

ALBERT BASSONS 2
Concepto de array
• Imaginemos que queremos guardar en la memoria del
ordenador 7 mediciones del nivel del agua de un depósito en
un tiempo determinado.

• Para guardar los 7 valores, necesitaríamos 7 variables.

ALBERT BASSONS 3
Concepto de array

• ¿Y si queremos guardar 1000 valores?¿y si queremos guardar

un número variable o indeterminado de valores?

• Es obvio que no podemos crear cientos y cientos de variables

diferentes en nuestro código, y más sin saber cuántas vamos a
necesitar.

• Los arrays son colecciones de valores de un mismo tipo

(aunque en JavaScript no tienen por qué ser del mismo tipo),
agrupados e identificados por un único nombre.

ALBERT BASSONS 4
Concepto de array

• Conceptualmente, un array (también conocido como vector

o arreglo) es una lista de valores relacionados.

15 3 18 25 4 2 6
var mediciones =

ALBERT BASSONS 5
Concepto de array
• Se puede acceder individualmente a cada una de las posiciones,
tanto para lectura como para escritura.

• Las posiciones de un vector de n elementos se identifican con

un índice que va desde 0 hasta n-1. Para un vector de 7
posiciones, éstas irán de 0 a 6.

ALBERT BASSONS 6
Creando un array
• Existen tres maneras básicas de crear arrays en JavaScript.

• Los arrays son objetos, así que se pueden crear usando el

operador new y la llamada a un constructor. Con un parámetro
se indica el tamaño (opcional) y si colocamos más de uno,
estos parámetros serán directamente los elementos del
array.

• También se pueden crear de la forma literal o “clásica”,

mediante el operador corchetes [].

• Los ejemplos los tenéis en la siguiente transparencia.

ALBERT BASSONS 7
Ejemplo

ALBERT BASSONS 8
Posiciones en un array
• La manera de acceder a cada una de las posiciones del vector del
ejemplo anterior es la siguiente:

Primera posición

Séptima y última
posición

ALBERT BASSONS 9
Posiciones en un array
[0] [1] [2] [3] [4] [5] [6]

Var mediciones=

ALBERT BASSONS 10
Errores habituales
• Los errores más habituales en el acceso al array son:
• Pensar que la primera posición la [1].
• Pensar que la última posición es la [n] para un array
tamaño n.

• Si tratamos de acceder al valor mediciones[7] para un

vector de 7 posiciones, estamos accediendo a una posición
que no pertenece al array.

15 3 18 25 4 2 6
?
mediciones[0] mediciones[7]

ALBERT BASSONS 11
Inicializando un array
• Si no inicializamos las posiciones de un vector en JS, éstas
contendrán undefined. A veces necesitamos vectores muy
grandes con sus posiciones inicializadas a un valor concreto:

ALBERT BASSONS 12
Array de textos
• Los arrays pueden ser colecciones de cualquier tipo de

elemento, en este ejemplo tenemos un array donde en cada

posición hay un texto:

• Como los textos pueden ser accedidos con índices, podemos

encontrar una letra concreta haciendo:

ALBERT BASSONS 13
Arrays de objetos
• Podremos crear arrays de objetos. Por ejemplo una lista de
personas, de coches, de cartas…

• Una lista de cartas es una baraja, como ejemplo os muestro el

juego Animal Cards:

ALBERT BASSONS 14
Arrays mixtos
• En JavaScript se permite que un Array contenga elementos
de diversos tipos. Esto se debe tratar con cuidado, puesto que
puede provocar errores en nuestras aplicaciones.

• ¿Qué pasa si intentamos sumar los valores? ¿y si intentamos

ordenar alfabéticamente? No tiene sentido ninguna de las dos
operaciones.

ALBERT BASSONS 15
Los arrays son objetos

• Ya vamos viendo poco a poco que todos los elementos en

JavaScript son objetos.

• Como los arrays también son objetos, tienen propiedades y

métodos:

http://www.w3schools.com/jsref/jsref_obj_array.asp

ALBERT BASSONS 16
Propiedades
• La propiedad length nos será muy útil para conocer el
tamaño de los vectores, por ejemplo para recorrerlos de
principio a fin.

• Las otras dos propiedades las trabajaremos en las

transparencias de objetos.

Propiedad Descripción
length Establece o devuelve el número de elementos del array.
constructor Retorna la función que creó el prototipo del objeto.
prototype Permite añadir propiedades y métodos al objeto.

ALBERT BASSONS 17
Recorriendo un array
• Vamos a ver cómo recorrer un array desde la posición inicial a
la posición final mediante un bucle:

ALBERT BASSONS 18
Recorriendo un array
• En el ejemplo anterior:

• mediciones: es el array, contiene todos los valores.

• i: variable entera usada como índice (posición en el array).
• mediciones[i]: valor de la posición actual del array.

mediciones[i]
i
[0] [1] [2] [3] [4] [5] [6]

Var mediciones=

ALBERT BASSONS 19
Ejemplo
• Recorrer un array numérico para encontrar la suma de sus
valores:

ALBERT BASSONS 20
El bucle for..in
• Existe un tipo de bucle en JS pensado para recorrer las
propiedades de los objetos: el bucle for…in, que también
podríamos usar para recorrer vectores.

• Sin embargo, no se recomienda usar este bucle para

recorrer arrays.

• Se recorren todas las propiedades del objeto, incluidas las de

usuario. Los resultados podrían ser incorrectos si el usuario ha
modificado las propiedades o métodos del array (lo veremos
en las transparencias de objetos, cuando veamos el sistema de
prototipado de JS).

ALBERT BASSONS 21
Ejemplo
• Este es un ejemplo que funciona:

• Este es un ejemplo que no funciona:

ALBERT BASSONS 22
El bucle for each..in
• JavaScript también incorpora otra variante del for, el for
each…in.

• Este tipo de bucle permite recorrer las propiedades de los

objetos de forma rápida y sencilla.

• Aunque en muchos lenguajes de programación es habitual el

uso del for each para recorrer arrays, en JS no se debe
usar nunca.

ALBERT BASSONS 23
El método foreach()

• Entonces… ¿no disponemos de ningún bucle tipo for…each

para recorrer vectores?.

• En JavaScript no existe el foreach para arrays, pero sí

existe un método foreach() para los objetos de tipo Array.

• Más info:
https://msdn.microsoft.com/es-es/library/ff679980%28v=vs.94%29.aspx

• Observa el ejemplo siguiente:

ALBERT BASSONS 24
Ejemplo

ALBERT BASSONS 25
Métodos

Método Descripción
slice() Selecciona una parte del array y lo retorna.
sort() Ordena los elementos de un array.
splice() Añade o quita elementos de un array.
toString() Convierte el array a String.
unshift() Añade elementos al inicio del array y retorna
el nuevo tamaño.
valueOf() Retorna el valor primitivo de un array.

ALBERT BASSONS 26
Métodos
Método Descripción
concat() Une dos o más arrays
indexOf() Busca un elemento en el array y retorna su posición.
join() Junta los elementos de un array en un String
lastIndexOf() Busca la última aparición de un elemento en el array y
retorna la posición.

ALBERT BASSONS 27
Métodos

Método Descripción
pop() Quita el último elemento del array y lo retorna.
push() Añade un nuevo elemento al final del array y retorna
su tamaño
reverse() Invierte el orden de los elementos.
shift() Quita el primer elemento del array y retorna dicho
array.

ALBERT BASSONS 28
Ejemplo

ALBERT BASSONS 29
Pasar un array a una función

• Podemos pasar un array como

argumento a una función, así como
devolverlo mediante un return.

• Los arrays siempre se pasan por

referencia, con lo que modificar el
array dentro de la función implica
modificar el original.

ALBERT BASSONS 30
Ejemplo (1 de 2)
• Función que invierte una lista:

• Prototipo de la función:
Array invertir(Array lista);

Esta función modifica el vector original usado en la llamada.

ALBERT BASSONS 31
Ejemplo (2 de 2)

ALBERT BASSONS 32
Otro ejemplo
• Función que nos da la lista de divisores de un número:

• Prototipo de la función:
Array<int> divisores(int numero);

ALBERT BASSONS 33
Colección de elementos HTML
• Como hemos dicho antes, se puede tener un array de
objetos.

• Por ejemplo podríamos tener un array o una colección de

imágenes, divs, spans u otros elementos HTML.

ALBERT BASSONS 34
Colección de elementos HTML

• Se pueden localizar elementos HTML del documento con:

• document.getElementsByClassName(): recupera una

colección de elementos con el nombre de clase indicado.

• document.getElementsByName(): lo hace mediante el

atributo “name”.

• document.getElementsByTagName(): recupera todos

los elementos de un tipo determinado.

ALBERT BASSONS 35
Colección de elementos HTML
• Prototipo de estos métodos:
HTMLCollection getElementsBy…(String);

• Estos métodos devuelven una colección de elementos HTML.

• Si bien una colección no es exactamente un array, en

muchos casos a la hora de trabajar se puede tratar como tal.

• La diferencia radicará en las propiedades y métodos de las

que dispongamos para dicha colección, aunque suelen tener
propiedades y métodos parecidos a los de array.

ALBERT BASSONS 36
Colección de elementos HTML

ALBERT BASSONS 37
Arrays asociativos
• Observa el siguiente ejemplo, en el que estamos usando
un array para guardar los datos de una persona:

ALBERT BASSONS 38
Arrays asociativos
• En lugar de usar números como índice, podríamos usar
cadenas de texto.

• En el ejemplo, la variable “i” contiene el String con el índice.

ALBERT BASSONS 39
Arrays asociativos

• Se pueden instanciar los arrays asociativos de forma

rápida:

ALBERT BASSONS 40
Matrices
• Se pueden crear arrays de dos dimensiones (matrices) o
incluso de más.

• La manera directa de crear este tipo de arrays es la

siguiente:

1 2
 
3 4

ALBERT BASSONS 41
Matrices
• Para acceder a cada una de las posiciones:

ALBERT BASSONS 42
Matrices
• Para recorrer una matriz de dos dimensiones podemos usar
un bucle dentro de otro bucle.

ALBERT BASSONS 43
Matrices
• Y podemos tener matrices donde una dimensión es numérica
y la otra asociativa:

ALBERT BASSONS 44
Ejemplo

ALBERT BASSONS 45
Ejercicios
Arrays
Ejercicios
1. Prueba al menos seis métodos de los que se mencionan en las
transparencias que hablan de los métodos disponibles para
trabajar con arrays (las tablas lila).

Asegúrate que entiendes cómo funcionan.

ALBERT BASSONS 47
Ejercicios
2. Crea las siguientes funciones:

a) sumar(): recibe un vector y devuelve la suma de todos sus valores.

b) maximo(): recibe un vector numérico y devuelve el valor máximo.
c) promedio(): recibe un vector numérico y devuelve el promedio.
d) escalar(): recibe un vector numérico y un float y multiplica todos los
elementos del vector por ese valor.
e) escalar2(): recibe un vector numérico y un float y devuelve un nuevo
vector resultado de multiplicar todos los elementos del vector por ese valor.
No se debe modificar el vector original.

ALBERT BASSONS 48
Ejercicios

3. Crea las siguientes funciones para trabajar con arrays:

a) positivos(): indica cuántos números positivos hay en una lista.

b) negativos(): devuelve cuántos números negativos hay.
c) pares(): devuelve el total de números pares.
d) impares(): devuelve el total de números impares.

Evidentemente, debemos comprobar que los resultados obtenidos

son correctos.

ALBERT BASSONS 49
Ejercicios
4. Crea las siguientes funciones sin usar los métodos que ya existen
para trabajar con arrays:
a. indiceDe(): recibe un elemento y un vector y devuelve la posición del
elemento en el vector (-1 si no lo encuentra).
b. ultimoIndiceDe(): recibe un elemento y un vector y devuelve la
posición de la última aparición del elemento en el vector (-1 si no lo
encuentra).
c. concatenar(): recibe dos vectores y devuelve un nuevo vector con la
unión del primero y el segundo.
d. invertir(): recibe un vector e invierte sus posiciones. Retorna también
el vector invertido.

No puedes usar los métodos concat(), indexOf(), lastIndexOf() ni

reverse(), debes recorrer los vectores mediante bucles.

ALBERT BASSONS 50
Ejercicios
5. Crea una web que reciba un número que represente el DNI de
una persona y devuelva la letra que le corresponde. Realiza
varias pruebas con DNIs conocidos para comprobar que
funciona correctamente.

En la transparencia siguiente se muestra el procedimiento.

ALBERT BASSONS 51
Ejercicios

ALBERT BASSONS 52
Ejercicios extras
Arrays y matrices
Ejercicios
6. EJERCICIO EXTRA: ENCIENDE vamos a crear el juego
LAS LUCES.

Necesitarás un tablero de 5x5 casillas, que representaremos en

la página web mediante divs. Al mostrar la página, se mostrarán
divs en color blanco y divs en color negro.

Al hacer clic sobre uno, se invierte su color, pero también el de

los divs que hay arriba, abajo, a la izquierda y a la derecha. El
juego acaba cuando todos los divs están de color blanco.

ALBERT BASSONS 54
Ejercicios
PISTAS:
Haz una representación del tablero
como una matriz 5x5 con valores 0/1 o
true/false.

Usa una función que actualice dicha

matriz, otra que traslade el resultado
al HTML y otra que compruebe si
hemos ganado.

Al hacer clic, llama a una función que

actualiza la matriz, luego a la que
traslada el resultado y finalmente a la
que comprueba si has ganado.

ALBERT BASSONS 55