MÓDULO 3.

ESTRUCTURA DE DATOS

Hasta ahora hemos visto cómo trabajar con 3 tipos de datos: las cadenas, los números y los
booleanos. Con estos datos podemos hacer muchas cosas, pero sería interesante poder trabajar
con colecciones de datos.

Ejemplos de situaciones que requieren el uso de colecciones de datos: cuando trabajamos con los
meses del año, los contactos de la agenda del móvil, o, en nuestro ejemplo de la baraja, el listado
de palos de la baraja.

Array
Según la Mozilla Developer Network un array es un constructor para matrices unidimensionales
(también llamadas vectores o arreglos), que son objetos tipo lista de alto nivel.

En el siguiente vídeo, veremos en detalle qué es un array y cómo podemos trabajar con ellos.

Ubicación: D:\Aduy\Conecta - Empleo\Fundamentos de Programación\003 - MÓDULO 3.

ESTRUCTURA DE DATOS

Video: 003 - 01 - Arrays

Mozilla Developer Network {

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array

Array
El objeto Array de JavaScript es un objeto global que es usado en la construcción de arrays, que
son objetos tipo lista de alto nivel.

Descripción
Los arrays son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar
operaciones de recorrido y de mutación. Tanto la longitud como el tipo de los elementos de un
array son variables. Dado que la longitud de un array puede cambiar en cualquier momento, y los
datos se pueden almacenar en ubicaciones no contiguas, no hay garantía de que los arrays de
JavaScript sean densos; esto depende de cómo el programador elija usarlos. En general estas
características son cómodas, pero si, en su caso particular, no resultan deseables, puede
considerar el uso de arrays con tipo.

Operaciones habituales

Crear un Array
let frutas = ["Manzana", "Banana"]

console.log(frutas.length)
// 2

Acceder a un elemento de Array mediante su índice

let primero = frutas[0]
// Manzana

let ultimo = frutas[frutas.length - 1]

// Banana

Recorrer un Array
frutas.forEach(function(elemento, indice, array) {
console.log(elemento, indice);
})
// Manzana 0
// Banana 1

Añadir un elemento al final de un Array

let nuevaLongitud = frutas.push('Naranja') // Añade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]

Eliminar el último elemento de un Array

let ultimo = frutas.pop() // Elimina "Naranja" del final
// ["Manzana", "Banana"]

Añadir un elemento al principio de un Array

let nuevaLongitud = frutas.unshift('Fresa') // Añade "Fresa" al inicio
// ["Fresa" ,"Manzana", "Banana"]

Eliminar el primer elemento de un Array

let primero = frutas.shift() // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]

Encontrar el índice de un elemento del Array

frutas.push('Fresa')
// ["Manzana", "Banana", "Fresa"]

let pos = frutas.indexOf('Banana') // (pos) es la posición para abreviar

// 1
Eliminar un único elemento mediante su posición
Ejemplo:

Eliminamos "Banana" del array pasándole dos parámetros: la posición del primer elemento que se
elimina y el número de elementos que queremos eliminar. De esta forma, .splice(pos, 1) empieza
en la posición que nos indica el valor de la variable pos y elimina 1 elemento. En este caso, como
pos vale 1, elimina un elemento comenzando en la posición 1 del array, es decir "Banana".

let elementoEliminado = frutas.splice(pos, 1)

// ["Manzana", "Fresa"]

Eliminar varios elementos a partir de una posición

Nota:

Con .splice() no solo se puede eliminar elementos del array, si no que también podemos extraerlos
guardándolo en un nuevo array. ¡Ojo! que al hacer esto estaríamos modificando el array de origen.

let vegetales = ['Repollo', 'Nabo', 'Rábano', 'Zanahoria']

console.log(vegetales)
// ["Repollo", "Nabo", "Rábano", "Zanahoria"]

let pos = 1, numElementos = 2

let elementosEliminados = vegetales.splice(pos, numElementos)

// ["Nabo", "Rábano"] ==> Lo que se ha guardado en "elementosEliminados"

console.log(vegetales)
// ["Repollo", "Zanahoria"] ==> Lo que actualmente tiene "vegetales"

Copiar un Array
let copiaArray = vegetales.slice();
// ["Repollo", "Zanahoria"]; ==> Copiado en "copiaArray"

Acceso a elementos de un arreglo (array)

Los índices de los arrays de JavaScript comienzan en cero, es decir, el índice del primer elemento
de un array es 0, y el del último elemento es igual al valor de la propiedad length del array
restándole 1.

Si se utiliza un número de índice no válido, se obtendrá undefined.

let arr = ['este es el primer elemento', 'este es el segundo elemento', 'este es el último elemento']
console.log(arr[0]) // escribe en consola 'este es el primer elemento'
console.log(arr[1]) // escribe en consola 'este es el segundo elemento'
console.log(arr[arr.length - 1]) // escribe en consola 'este es el último elemento'
Los elementos de un array pueden considerarse propiedades del objeto tanto como toString (sin
embargo, para ser precisos, toString() es un método). Sin embargo, se obtendrá un error de
sintaxis si se intenta acceder a un elemento de un array de la forma siguiente, ya que el nombre de
la propiedad no sería válido:
console.log(arr.0) // error de sintaxis

No hay nada especial ni en los arrays de JavaScript ni en sus propiedades que ocasione esto. En
JavaScript, las propiedades cuyo nombre comienza con un dígito no pueden referenciarse con la
notación punto y debe accederse a ellas mediante la notación corchete.

Por ejemplo, dado un objeto con una propiedad de nombre '3d', sólo podría accederse a dicha
propiedad con la notación corchete.
let decadas = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
console.log(decadas.0) // error de sintaxis
console.log(decadas[0]) // funciona correctamente
Copy to Clipboard
renderizador.3d.usarTextura(modelo, 'personaje.png')
renderizador['3d'].usarTextura(modelo, 'personaje.png')

Obsérvese que, en el último ejemplo, ha sido necesario poner '3d' entre comillas. Es posible usar
también comillas con los índices del los arrays de JavaScript (p. ej., decadas['2'] en vez de
decadas[2]), aunque no es necesario.

El motor de JavaScript transforma en un string el 2 de decadas[2] a través de una conversión

implícita mediante toString. Por tanto, '2' y '02' harían referencia a dos posiciones diferentes en el
objeto decadas, y el siguiente ejemplo podría dar true como resultado:
console.log(decadas['2'] != decadas['02'])

Relación entre length y las propiedades numéricas

La propiedad length de un array de JavaScript está conectada con otras de sus propiedades
numéricas.

Varios de los métodos propios de un array (p. ej., join(), slice(), indexOf(), etc.) tienen en cuenta el
valor de la propiedad length de un array cuando se les llama.

Otros métodos (p. ej., push(), splice(), etc.) modifican la propiedad length de un array.
const frutas = []
frutas.push('banana', 'manzana', 'pera')

console.log(frutas.length) // 3
Cuando se le da a una propiedad de un array JavaScript un valor que corresponde a un índice
válido para el array pero que se encuentra fuera de sus límites, el motor actualizará el valor de la
propiedad length como corresponde:
frutas[5] = 'fresa'
console.log(frutas[5]) // 'fresa'
console.log(Object.keys(frutas)) // ['0', '1', '2', '5']
console.log(frutas.length) // 6

Si se aumenta el valor de length:

frutas.length = 10
console.log(frutas) // ['banana', 'manzana', 'pera', <2 empty items>, 'fresa', <4 empty items>]
console.log(Object.keys(frutas)) // ['0', '1', '2', '5']
console.log(frutas.length) // 10
console.log(frutas[8]) // undefined

Si se disminuye el valor de la propiedad length pueden eliminarse elementos:

frutas.length = 2
console.log(Object.keys(frutas)) // ['0', '1']
console.log(frutas.length) // 2

Hay más información sobre este tema en la página sobre Array. length.

Creación de un array a partir de una expresión regular

El resultado de una búsqueda con una RegExpcadena puede crear una matriz de JavaScript. Este
array tendrá propiedades y elementos que proporcionarán información sobre la correspondencia
encontrada. Para obtener una matriz de esta forma se puede utilizar

RegExp.exec(), String.match() o String.replace().

El siguiente ejemplo, y la tabla que le sigue, pueden ayudar a comprender mejor las propiedades y
elementos a los que nos referimos:
// Buscar una d seguida de una o más b y, al final, de otra d
// Recordar las b y la d final
// No distinguir mayúsculas y minúsculas

const miRe = /d(b+)(d)/i

const miArray = miRe.exec('cdbBdbsbz')

Las propiedades y elementos que se obtienen de esta búsqueda son los siguientes:
Constructor
Array()

Crea un nuevo objeto Array.

Propiedades estáticas
get Array[@@species]

La función del constructor se utiliza para crear objetos derivados.

Métodos estáticos
Array.from()

Crea una nueva instancia de Arraya partir de similarAUnArray, un objeto iterable o similar a una
matriz.

Array.isArray()

Devuelve truesi valores un arreglo , y falseen caso contrario.

Array.of()

Crea una nueva instancia de Arraycon un número variable de parámetros, independientemente

del número y del tipo de dichos parámetros.

Propiedades de instancia
rray.prototype.length

Indica el número de elementos de una matriz .

Array.prototype[@@unscopables]

Símbolo que contiene todos los nombres de las propiedades que se excluyen de un ámbito de
enlace with.

Métodos de instancia
Array.prototype.concat()

Devuelve un nuevo arreglo que es la concatenación de aquél sobre el que se invoca, seguido de
otros arreglo(s) o valor(es).

Array.prototype.copyWithin()

Copia una secuencia de elementos de un array dentro del propio array .

Array.prototype.entries()

Devuelve un nuevo objeto Array Iteratorque contiene los pares clave/valor para cada índice del
array .

Array.prototype.every()

Devuelve truesi todos los elementos del array cumplen el predicado que recibe como parámetro.

Array.prototype.fill()

Asigna un valorestático a todos los elementos del arreglo entre las posiciones inicioy fin.

Array.prototype.filter()

Devuelve un nuevo array que contiene todos los elementos de aquél para el cual se llama que
cumple el predicado que se le pasa como parámetro.

Array.prototype.find()
Devuelve el primer elementodel array que cumpla el predicado que se pasa como parámetro, o
undefinedsi ninguno lo cumple.

Array.prototype.findIndex()

Devuelve el índice del primer elemento del arreglo que cumpla el predicado que se pasa como
parámetro, o -1si nunguno lo cumple.

Array.prototype.forEach()

Llama a la función pasada como parámetro para todos los elementos del arreglo.

Array.prototype.includes()

Determina si el array contiene el valorBuscadoy devuelve trueo falsesegún sea el caso.

Array.prototype.indexOf()

Devuelve el índice del primer elemento del array que sea igual a elementoBuscado, o -1si no
existe.

Array.prototype.join()

Concatena en una cadena todos los elementos de una matriz.

Array.prototype.keys()

Devuelve un nuevo Array Iteratorque contiene las claves de cada índice del array.

Array.prototype.lastIndexOf()

Devuelve el índice del último elemento del array que sea igual a elementoBuscado, o -1si no
existe.

Array.prototype.map()

Devuelve un nuevo array que contiene el resultado de llamar a la función pasada como parámetro
a todos los elementos del array sobre el que se invoca.
Array.prototype.pop()

Elimina el último elemento de un arreglo , y devuelve dicho elemento.

Array.prototype.push()

agregue uno o más elementos al final de una matriz y devuelva el nuevo valor de su propiedad
length.

Array.prototype.reduce()

Aplique la función pasada como parámetro a un acumuladorya cada valor del array , que se
recorre de izquierda a derecha, para reducirlo a un único valor.

Array.prototype.reduceRight()

Aplique la función pasada como parámetro a un acumuladorya cada valor del array , que se
recorre de derecha a izquierda, para reducirlo a un único valor.

Array.prototype.reverse()

Invierte el orden de los elementos de un array (el primero pasa a ser el último y el último a ser el
primero) en el propio array. Este método modifica el arreglo.

Array.prototype.shift()

Elimina el primer elemento de un arreglo , y devuelve dicho elemento.

Array.prototype.slice()

Extrae una porción del arreglo sobre el que se llama y devuelve un nuevo arreglo .

Array.prototype.some()

Devuelve truesi al menos un elemento del arreglo cumple con el predicado que se pasa como
parámetro.

Array.prototype.sort()

Ordena los elementos de un array , modificando éste, y devuelve el array ordenado.

Array.prototype.splice()

agregue, borre o modifique elementos de una matriz .

Array.prototype.toLocaleString()

Devuelve una cadena adaptada a la configuración regional que representa el arreglo y sus
elementos. Redefine el método Object.prototype.toLocaleString().

Array.prototype.toString()

Devuelve un string que representa el array y sus elementos. Redefine el método

Object.prototype.toString().

Array.prototype.unshift()

Añada uno o más elementos al inicio de un array y devuelve el nuevo valor de lengthpara el array
resultante.

Array.prototype.values()

Devuelve un nuevo objeto Array Iteratorque contiene los valores para cada índice del array .

Array.prototype[@@iterator]()

Devuelve un nuevo objeto Array Iteratorque contiene los valores para cada índice del array .

Ejemplos

Creación de una matriz unidimensional

El siguiente ejemplo crea un arreglo mensajes con una longitud de 0, y luego asigna valores a
mensajes[0] ya mensajes[99], con lo que la longitud del arreglo pasa a ser 100.
let mensajes = [];
mensajes[0] = "Hola";
mensajes[99] = "mundo";

if (mensajes.length === 100) {

console.log("La longitud es de 100.");
}
Creación de una matriz de dos dimensiones

El siguiente ejemplo crea una matriz bidimensional que representa un tablero de ajedrez. El
primer movimiento se realiza copiando la 'p' de tablero[6][4] en tablero[4][4]. La posición [6][4]se
limpia.
let tablero = [
['T','C','A','D','R','A','C','T'],
['P','P','P','P','P','P','P','P'],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
['p','p','p','p','p','p','p','p'],
['t','c','a','d','r','a','c','t'] ]

console.log(tablero.join('\n') + '\n\n')

// Adelantar dos posiciones el peón de rey

tablero[4][4] = tablero[6][4]
tablero[6][4] = ' '
console.log(tablero.join('\n'))

Este es el resultado:
T,C,A,D,R,A,C,T
P,P,P,P,P,P,P,P
,,,,,,,
,,,,,,,
,,,,,,,
,,,,,,,
p,p,p,p,p,p,p,p
t,c,a,d,r,a,c,t

P,P,P,P,P,P,P,P
,,,,,,,
,,,,,,,
, , , ,p, , ,
,,,,,,,
p,p,p,p, ,p,p,p
t,c,a,d,r,a,c,t

Uso de un arreglo para tabular un conjunto de valores

valores = []
for (let x = 0; x < 10; x++){
valores.push([
2 ** x,
2 * x ** 2
])
}
console.table(valores)
da como resultado:
0 1 0
1 2 2
2 4 8
3 8 18
4 16 32
5 32 50
6 64 72
7 128 98
8 256 128
9 512 162

(La primera columna es el índice).

UBICACIÓN:

Aritmética de Arrays

Durante esta actividad del módulo "Estructuras de datos" vamos a trabajar las operaciones con
arrays, ¿qué tipo de operaciones?:

 Búsqueda
 Inserción
 Filtrado

En el siguiente vídeo, veremos en detalle cada una de ellas. ¡Adelante!

Ubicación: D:\Aduy\Conecta - Empleo\Fundamentos de Programación\003 - MÓDULO 3.

ESTRUCTURA DE DATOS

Video: 003 - 02 - Aritmética de Arrays

Diccionarios

Los diccionarios son estructuras que nos permiten almacenar datos estructurados. También se les
llama hash en inglés. En los diccionarios la información se almacena con una clave y un valor. Por
ejemplo, para almacenar una dirección postal tendríamos la información de una calle, una
población, un código postal y un país. Veamos como trabajar con los diccionarios

Video: 003 - 03 - Diccionarios

Combinaciones de estructuras de datos

En esta actividad vamos a ver como trabajar de forma combinada con arrays y diccionarios. Para
combinar estos dos tipos de datos, vamos a realizar dos estructuras muy comunes a la hora de
programar:

 Array de Hashes: Donde cada elemento del array es un diccionario.

  Diccionario con diferentes arrays: Donde cada elemento del diccionario es un array o
colección.

En el enlace de más abajo, puedes descargarte material de ampliación del módulo "Estructura de
datos".

¡Vamos a ello!

Video: 003 - 04 - Combinaciones de estructuras de datos