Estructuras

definidas por el
programador
(II)

Desarrollo web en entorno cliente

 Índice Unidad Didáctica Nº2

• Introducción

• Programación con funciones

• Programación con colecciones

Estructuras definidas por el

progranador (II)
Los contenidos digitales de esta presentación son propiedad de la empresa
Educación Madrid 2016 S. L., y han sido desarrollados por su equipo
docente.
Así mismo, contiene citas y gráficos de la web del Institut Obert de
Catalunya.

2
 03
Programación con colecciones
Las colecciones son tipos de datos compuestos que nos permiten trabajar
con grupos de datos en lugar de trabajar con datos individuales. Por
ejemplo:

// datos individuales
let persona1 = {nombre: "Juan", población: "Barcelona"};
let persona2 = {nombre: "María", población: "Lérida"};
let persona3 = {nombre: "Pere", población: "Tarragona"};
let persona4 = {nombre: "Luisa", población: "Girona"};

// colección
let personas = [persona1, persona2, persona3, persona4];

Cuando se debe trabajar con grupos de datos no es viable trabajar con

variables, ya que esto requiere crear una nueva variable para cada valor y se
dificulta el procesamiento, ya que cada variable debe modificarse
individualmente.

En cambio, una colección consiste en un grupo de datos, lo que permite

añadir dinámicamente a una misma colección cualquier cantidad de datos y

3
Ampliando el ejemplo anterior, a partir de la variable persones, a la que let nota4 = 8;
se le ha asignado un array de objetos, podemos acceder a cualquiera let nota5 = 7;
de los elementos. Por ejemplo, se pueden recorrer todos los elementos: let nota6 = 4;
for (let persona of personas) { let nota7 = 9;
console.log(`${persona.nombre} vive en ${persona.poblacion}`); let nota8 = 8;
} let nota9 = 5;
En este caso, se recorren todos los elementos de la colección personas let nota10 = 6;
y se asigna el elemento actual a persona(este valor se actualiza en cada
let media = (nota1 + nota2 + nota3 + nota4 + nota5 + nota6 + nota7 +
iteración del bucle). Seguidamente se muestra por la consola el mensaje
nota8 + nota9 + nota10) / 10;
con el nombre y la población del elemento.
console.log(`Nota media: ${media} (variables)`)
// Utilizando una colección
Una alternativa utilizando variables individuales podría ser la siguiente:
let notas = [6, 4, 5, 8, 7, 4, 9, 8, 5, 6];
console.log(`${persona1.nombre} vive en ${persona1.poblacion}`);
let acumulado = 0;
console.log(`${persona2.nombre} vive en ${persona2.poblacion}`);
for (let nota of notas) {
console.log(`${persona3.nombre} vive en ${persona3.poblacion}`);
acumulado += nota;
console.log(`${persona4.nombre} vive en ${persona4.poblacion}`);
}
Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP-
console.log(`Nota media: ${acumulado/notes.length} (colección)`);
igroup/pen/ZEJrjLV?editors=1111
Puede ver este ejemplo en el siguiente enlace: https://codepen.io/EEP-
igroup/pen/jOLZpmp?editors=1111
Como puede apreciarse, de esta manera se duplica el código por cada
elemento. Es decir, si añadimos 10 personas más, también deberíamos
añadir 10 líneas más. Como puede apreciarse, cuando trabajamos con colecciones el código
es mucho más comprensible y se evitan repeticiones. Además, este
código es escalable, ya que si añadimos nuevos valores a la colección
Veamos otro ejemplo:
notes(por ejemplo, utilizando un formulario HTML ), el código seguiría
// Utilizando variables individuales procesando los datos correctamente; en cambio utilizando variables
let nota1 = 6; individuales esto no sería posible.
let nota2 = 4;
let nota3 = 5;

4
3.1 Colecciones ‣ Set : es una colección de valores únicos
d o n d e s e p u e d e i t e ra r s o b re l o s let ejemploArray = ["Verde", "Ambar", "Rojo",
elementos en orden de inserción, se "Rojo"];
Para trabajar con colecciones,
puede añadir elementos, se puede let ejemploSet = new Set();
JavaScript nos proporciona los
eliminar y se puede comprobar si existen;
objetos predefinidos Array, Map y ejemploSet.add("verde");
sin embargo, no se puede modificar su
Sets: ejemploSet.add("ambar");
posición ni acceder directamente, ya que
no existe ni un índice ni una clave: se ejemploSet.add("rojo");
refieren directamente los valores. ejemploSet.add("rojo");
Diccionarios y Map/Object
let ejemploMap = new Map();
Un diccionario es una colección
Adicionalmente, el comportamiento de los ejemploMap.set("verde", "Pasar");
desordenada que utiliza parejas de
objetos de JavaScript nos permite utilizarlos ejemploMap.set("ambar", "¡Cuidado!");
clave y valor para acceder a sus
de forma similar a un Map, ya que se puede ejemploMap.set("rojo", "Prohibido");
elementos. Por este motivo, puede
utilizar el nombre de la propiedad como
considerarse que tanto Map como ejemploMap.set("rojo", "No pasar!");
clave y el valor como valor del elemento.
Object (cuando se utiliza en este let ejemploObject = {
contexto) son diccionarios. verde: "Pasar",
ambar: "¡Cuidado!",
Otras colecciones
‣ Array : un array es una lista de rojo: "Prohibido",
Existen también los objetos WeakSet y
valores ordenados donde cada rojo: "No pasar!"
WeakMap que son variantes de Set y Map
valor es accesible mediante un };
con unos usos mucho más concretos, puede
índice . Este índice es siempre un
encontrar más información en el siguiente console.log(ejemploArray, ejemploArray.length);
número entero igual o superior a 0.
enlace: https://developer.mozilla.org/en-US/ console.log(ejemploSet, ejemploSet.size);
‣ Map : es una colección
docs/Web/JavaScript/Guide/ console.log(ejemploMap, ejemploMap.size);
desordenada que permite asociar
Keyed_collections?retiredLocale=ca
pares de clave y valor. La clave console.log(ejemploObject,
puede ser cualquier cosa Object.keys(ejemploObject).length);
(incluyendo funciones, objetos y Puede ver este ejemplo en el siguiente enlace:
tipos primitivos). https://codepen.io/EEP-igroup/pen/JjypBpY?
Vemos un ejemplo de cada tipo de editors=1111
colección:

5
Como puede apreciarse, la única colección que permite elementos
repetidos es el Array, todos los demás tipos se descartan los valores
duplicados conservando la última asignación.
Fíjese que en el caso del objeto no existe una propiedad o método para
obtener el tamaño directamente, hemos tenido que utilizar la función
estática Object.keys()para obtener un array con todas las propiedades y
entonces consultar el valor de la propiedad length del mismo array .
A continuación puede ver las diferentes maneras de iterar sobre estas
colecciones:
console.log("Iteración array: utilizando el índice");
for (let i = 0; i < ejemploArray.length; i++) {
console.log(ejemploArray[i]);
} bucle for se pueden recorrer los elementos en orden inverso.
console.log("Iteración array: accediendo directamente al valor");
for (let elemento of ejemploArray) {
console.log(elemento);
} (como Array, Map y Set) y por este motivo no se puede utilizar con
console.log("Iteración siete");
for (let elemento of ejemploMap) {
console.log(elemento);
}
console.log("Iteración map: desestructurado");
for (let [clave, valor] of ejemploMap) {
console.log(`Clave: ${clave}, valor: ${valor}`);
}
Para iterar sobre los valores de un array se puede utilizar un bucle for
que recorra los índices desde 0 hasta el último valor del array (tamaño
del array -1) o se puede utilizar un bucle for…of para recorrer
directamente los valores del array .
Utilizar un tipo de bucle u otro dependerá de si necesitamos utilizar el
índice o sólo el valor, o si el orden es importante. Por ejemplo, con un
Para iterar sobre los valores de un map o un set es necesario utilizar
for…of, este tipo de bucle funciona sólo con colecciones iterables
objetos, ya que los objetos no son iterables.

for (let elemento of ejemploSet) {

console.log(elemento); Como puede apreciarse, cuando se iteran los elementos de un mapa el
valor del elemento es el par clave y valor, por consiguiente se pueden
}
desestructurar y asignar a variables independientes (en este ejemplo
console.log("Iteración object");
llamadas claui valor).
for (let nombre in ejemploObject) {
console.log(ejemploObject[nombre]);
Finalmente, para iterar sobre las propiedades de un objeto es necesario
} utilizar for…in, el nombre de la propiedad se asigna a la variable y para
console.log("Iteración map"); acceder al valor debemos realizar la consulta utilizando corchetes, como
si se tratara de un array .

6
3.1.1 Arrays
En los arrays , a pesar de ser un tipo de datos que se utiliza con mucha
frecuencia en todos los lenguajes de programación, existen diferencias
en su utilización. Estas diferencias se muestran con claridad al comparar
JavaScript con Java.
En Java, los arrays deben inicializarse con su tamaño, en cambio, en
JavaScript el tamaño de un array puede variar en cualquier momento.
Otra diferencia es que los arrays de JavaScript pueden almacenar
elementos de cualquier tipo (Integet, Boolean, String, etc.) y pueden
estar almacenados en posiciones no consecutivas; de hecho, pueden
tener como índice de acceso un valor no numérico.
Un programador en JavaScript debe conocer todas las singularidades
que aporta este lenguaje cuando hace uso de este tipo de datos.
Conocer estas singularidades es básico para desarrollar programas
simples y eficientes, por eso, un buen programador debe conocer las
siguientes propiedades y métodos de los arrays (y uno que devuelven
un array : split()):
‣ length: número de elementos que contiene el array .
‣ concat(array1, array2, …): crea un nuevo array con los elementos de dos o más
arrays distintos.
‣ push(element1, element2, …): agrega uno o más elementos al final del array .
‣ unshift(element1, element2, …: añade uno o más elementos al inicio del array .
‣ pop(): elimina el último elemento del array y lo devuelve.
‣ shift(): elimina el primer elemento del array y lo devuelve.
‣ sort([función]): ordena alfabéticamente los elementos de un array . Se puede pasar
una función como argumento para realizar avanzadas ordenaciones.
‣ split(separador[, limit]): convierte una cadena de texto en un array de cadenas de
texto.
‣ join([separador]): une todos los elementos de un array en una cadena de texto
utilizando un carácter de unión.
‣ reverse(): modifica un array colocando sus elementos en el orden inverso a su
posición original.
‣ indexOf(ElementoABuscar[, posicionInicial]): devuelve la posición del array donde
se encuentra la primera ocurrencia del valor buscado.
‣ lastIndexOf(elementAcercar[, posicionInicial]: devuelve la posición del array
donde se encuentra la última ocurrencia del valor buscado.
‣ every(función): ejecuta la función pasada como argumento y comprueba que el
resultado de la función aplicada a todos los valores del array sea cierto.
‣ some(función): ejecuta la función pasada como argumento y comprueba que al
menos uno de los resultados de la función aplicada a los elementos del array sea
cierto.
‣ filter(función): ejecuta la función para todos los elementos del array y devuelve un
nuevo array con todos los elementos a los que la función haya devuelto cierto.
‣ slice(inicio, final): devuelve un nuevo array con los valores que se encuentran
desde el índice inicio hasta el índice final.
‣ splice(inicio, contadorEliminar[, element1, element2, …]: añade y elimina
elementos a partir de una posición del array .
‣ fill(valor [, posInicial, posFinal]): llena un array con el valor indicado;
opcionalmente puede indicarse una posición de inicio y una de final.
‣ includes(ElementoABuscar[, desdePosicion]): devuelve cierto si el array incluye el
valor pasado como argumento.
‣ forEach(función): itera sobre todos los elementos del array y ejecuta la función
pasada como argumento para todos los elementos del array .
‣ map(función): ejecuta la función sobre todos los elementos del array y devuelve un
nuevo array con los resultados.
Aparte de estos métodos, el objeto Array incluye también las siguientes funciones
estáticas:
‣ Array.from(arrayOIterable[, función]) : genera un nuevo array a partir de otro array
u objeto iterable (por ejemplo, un set ). Opcionalmente se puede añadir una
función para procesar cada elemento.
‣ Array.isArray(): devuelve cierto si el elemento pasado como argumento es un
array .
7
3.1.2 Maps Los mapas se pueden manipular utilizando las siguientes propiedades y
métodos:
Los mapas nos permiten crear colecciones desordenadas de elementos
de forma que podemos acceder a los valores directamente utilizando
‣ size: tamaño del mapa.
una clave.
‣ clear(): vacía el contenido del mapa.
‣ delete(clave): elimina el elemento del mapa.
Al contrario de lo que ocurre con los arrays o los objetos no se puede
‣ forEach(función): recorre el mapa y ejecuta la función para cada
acceder directamente a los elementos utilizando corchetes, ya que al
elemento.
utilizar la sintaxis de corchetes lo que se modifica o consulta son las
‣ get(clave): devuelve el valor asociado a la clave pasada como
propiedades del objeto y no el contenido del mapa. Es necesario utilizar
argumento.
los métodos set() y get() para asignar y recuperar los valores
respectivamente. ‣ has(clave): devuelve cierto si el mapa contiene la clave pasada como
argumento.
‣ set(clave, valor): asigna un valor a una clave.
let ejemploMap = new Map();
ejemploMap.set("verde", "Pasar");
Una diferencia importante con la utilización de objetos como
ejemploMap.set("ambar", "¡Cuidado!");
diccionarios es que las claves de un mapa pueden ser cualquier tipo de
ejemploMap.set("rojo", "Prohibido");
objeto incluyendo funciones y tipos primitivos, mientras que el nombre
ejemploMap["amarillo"] = "desconocido";
de las propiedades de un objeto sólo pueden ser cadenas de texto
// verde no es una propiedad del objeto, es un valor del mapa (aunque estos nombres no se encuentren entre comillas se siguen
console.log(ejemploMap["verde"]); considerando cadenas de texto).
// amarillo es una propiedad del objeto
console.log(ejemploMap["amarillo"]);
// verde es un elemento del mapa
console.log(ejemploMap.get("verde"));
// amarillo no es un elemento del mapa
console.log(ejemploMap.get("amarillo"));
Puede ver este ejemplo en el siguiente https://codepen.io/EEP-igroup/
pen/KKvQBxb?editors=1111

8
3.1.3 Sets

Cuando no es necesario que la colección sea ordenada y ésta no debe admitir elementos duplicados, debe considerarse utilizar un set en lugar de un
array .

Hay dos ventajas importantes cuando se utiliza un set en lugar de un array :

‣ Eliminar arrays por valor es muy lento: array.splice(array.indexOf(valor)), en cambio eliminarlos de un set es inmediato: set.delete(valor).
‣ No controlar que haya duplicados, ya que los valores de un set siempre son únicos.

Los sets se pueden manipular utilizando las siguientes propiedades y métodos:

‣ size: tamaño del set.

‣ clear(): vacía el contenido del set.
‣ delete(valor): elimina el elemento del set.
‣ forEach(función): recorre el set y ejecuta la función para cada elemento.
‣ has(valor): devuelve cierto si el mapa contiene la clave pasada como argumento.

Fíjese que al contrario de lo que ocurre con los mapas, no existe un método get(), ya que un set sólo contiene una lista de valores y sólo podemos
comprobar si el set contiene un valor o no mediante el método has().

9
10