Arrays y cadenas

En JavaScript, los arrays y las cadenas de texto (String) son estructuras que utilizamos constantemente para almacenar y trabajar con datos.

Un array nos permitirá guardar varios valores dentro de una misma variable, mientras que una cadena de texto nos permite trabajar con una secuencia de caracteres.

Por ejemplo:

let nombres = ["Ana", "Carlos", "Laura"]; // array
let mensaje = "Hola mundo"; // cadena de texto

En este tema aprenderemos a crear y modificar arrays, recorrer sus elementos y utilizar algunos de sus métodos más importantes. También veremos los principales métodos para trabajar con cadenas de texto.

---

Arrays

Un array es una colección de elementos almacenados en una única variable. Podemos imaginarlo como un listado.

Su sintaxis es:

let listado = [elemento1, elemento2, elemento3, elemento4, elemento5, ...];

Por ejemplo:

let frutas = ["manzana", "plátano", "naranja"];

En este caso tenemos un array que contiene tres elementos.

Cada elemento tiene una posición, llamada índice.

Los índices empiezan siempre a contar desde 0.

Índice	Valor
0	"manzana"
1	"plátano"
2	"naranja"

Vamos a ver qué podemos hacer con estos arrays.

Crear arrays

La forma más habitual de crear un array es utilizando corchetes [].

let numeros = [10, 20, 30, 40];

También podemos crear un array vacío para posteriormente añadir elementos.

let nombres = [];

Los arrays pueden contener diferentes tipos de datos:

let datos = ["María", 25, true];

Aunque JavaScript permite mezclar tipos, normalmente es recomendable que un array contenga elementos relacionados entre sí.

Por ejemplo:

let edades = [18, 25, 32, 41];

es más fácil de trabajar que:

let datos = [18, "María", true, 25];

---

Consultar valores

Hemos visto que cada elemento del array ocupa una posición. Esto nos ayuda a poder acceder a cierto valor del array utilizando su índice.

Por ejemplo, imaginemos que tenemos un listado de personas:

let listado = ["Maria", "Ona", "Noa", "Ernesto"];

Y queremos saber qué nombre está el primero, es decir, en la posición 0. Para ello la sintaxis siempre será listado[posición].

let listado = ["Maria", "Ona", "Noa", "Ernesto"];
console.log(listado[0]);

El resultado será:

Maria

Podemos poner entre los corchetes [] cualquier índice válido del array.

---

Añadir y eliminar elementos

JavaScript proporciona varios métodos para añadir y eliminar elementos de un array.

Los más importantes son:

• push()
• pop()
• shift()
• unshift()

---

push()

El método push() añade uno o varios elementos al final del array. La sintaxis es:

listado.push(elemento);

Por ejemplo, el siguiente código:

1. Crea un array de frutas.
2. Añade "naranja" a dicho array.
3. Muestra el array.

let frutas = ["manzana", "plátano"];

frutas.push("naranja");

console.log(frutas);

Resultado:

["manzana", "plátano", "naranja"]

También podemos añadir varios elementos a la vez:

frutas.push("pera", "kiwi");

Ahora tendremos:

["manzana", "plátano", "naranja", "pera", "kiwi"]

---

pop()

El método pop() elimina el último elemento del array.

let frutas = ["manzana", "plátano", "naranja"];

frutas.pop();

console.log(frutas);

Resultado:

["manzana", "plátano"]

Además, pop() devuelve el elemento que ha eliminado, por lo que aparte de eliminarlo podemos guardarnos su valor en una variable.

El siguiente código:

1. Crea un array de frutas.
2. Elimina el último elemento ("naranja") y guarda dicho valor ("naranja") en una variable frutaEliminada.

let frutas = ["manzana", "plátano", "naranja"];

let frutaEliminada = frutas.pop();

console.log(frutaEliminada);

Salida:

naranja

En este momento nuestro array frutas ya no contendría a "naranja", por lo que estaría como:

["manzana", "plátano"]

Y además tendríamos una variable frutaEliminada que guarda el valor que hemos eliminado:

naranja

---

shift()

El método shift() elimina el primer elemento del array.

let frutas = ["manzana", "plátano", "naranja"];

frutas.shift();

console.log(frutas);

Resultado:

["plátano", "naranja"]

Al igual que pop(), devuelve el elemento eliminado, por lo que lo podemos guardar en una variable.

let fruta = frutas.shift();

console.log(fruta);

---

unshift()

El método unshift() añade uno o varios elementos al principio del array.

let frutas = ["plátano", "naranja"];

frutas.unshift("manzana");

console.log(frutas);

Resultado:

["manzana", "plátano", "naranja"]

También podemos añadir varios elementos:

frutas.unshift("pera", "kiwi");

---

Resumen: push, pop, shift y unshift

Podemos resumirlos de la siguiente manera:

Método	Acción	Posición
push()	Añade	Final
pop()	Elimina	Final
unshift()	Añade	Principio
shift()	Elimina	Principio

---

Trocear un array - slice()

El método slice() permite obtener una parte de un array sin modificar el array original.

Su sintaxis es:

array.slice(inicio, fin);

El primer índice indica en qué posición comenzar a cortar.

El segundo indica dónde terminar, pero no se incluye.

Por ejemplo:

let numeros = [10, 20, 30, 40, 50];

let resultado = numeros.slice(1, 4);

console.log(resultado);

Resultado:

[20, 30, 40]

Se incluyen los índices 1, 2 y 3, pero no el 4.

Es importante recordar que slice() no modifica el array original.

console.log(numeros);

Resultado:

[10, 20, 30, 40, 50]

Simplemente crea un nuevo array con los elementos de las posiciones indicadas.

---

Modificar el array - splice()

El método splice() permite añadir, eliminar o sustituir elementos dentro de un array.

A diferencia de slice(), splice() sí modifica el array original.

Su sintaxis básica es:

array.splice(inicio, cantidad);

Por ejemplo:

let frutas = ["manzana", "plátano", "naranja", "pera"];

frutas.splice(1, 2);

console.log(frutas);

Comenzamos en el índice 1 y eliminamos 2 elementos.

Resultado:

["manzana", "pera"]

También podemos utilizar splice() para añadir elementos.

let frutas = ["manzana", "naranja"];

frutas.splice(1, 0, "plátano");

console.log(frutas);

Resultado:

["manzana", "plátano", "naranja"]

El 0 indica que no queremos eliminar ningún elemento.

También podemos sustituir elementos:

let frutas = ["manzana", "plátano", "naranja"];

frutas.splice(1, 1, "pera");

console.log(frutas);

Resultado:

["manzana", "pera", "naranja"]

El 1 indica que queremos modificar dicha posición.

---

Diferencia entre slice() y splice()

Es importante no confundirlos:

• slice() obtiene una parte del array y no modifica el original.
• splice() modifica el array original, pudiendo eliminar, añadir o sustituir elementos.

---

map()

El método map() permite crear un nuevo array transformando cada uno de los elementos del array original. Es decir, aplica un cambio a todos los elementos del array.

La sintaxis del map() es:

let nuevo_array = array.map(elemento => operación sobre el elemento);

Por ejemplo, imagina que queremos multiplicar todos los números del array por 2:

let numeros = [1, 2, 3, 4];

let dobles = numeros.map(numero => numero * 2);

console.log(dobles);

Resultado:

[2, 4, 6, 8]

map() recorre todos los elementos y aplica la función que indiquemos.

Podemos verlo como:

1 → 2
2 → 4
3 → 6
4 → 8

El array original no cambia, por lo que siempre guardaremos el resultado del map en otro variable.

Al principio puede resultar confusa su sintaxis (.map(elemento => elemento * 2)), pero es importante recordar:

1. elemento puedes llamarlo como quieras. Simplemente has de recordar que es una variable que simboliza un elemento del array.

Si el array es:

let numeros = [1, 2, 3, 4];

La variable elemento del map() hará referencia a: 1, 2, 3, 4.

Si el array es:

let nombres = ["Eric", "Pablo", "Pedro"];

La variable elemento del map() hará referencia a: "Eric", "Pablo", "Pedro".

2. A la derecha de la "flecha" (=>) irá alguna operación que queramos realizar sobre el elemento. Así que es muy importante que en dicha operación aparezca la variable elemento.

Si queremos dividir todos los números entre 2:

let numeros_divididos = numeros.map(elemento => elemento/2);

Si queremos pasar a minúscula todos los nombres del array:

let nombres = ["Eric", "Pablo", "Pedro"];
let nombres_minusculas = nombres.map(elemento => elemento.toLowerCase());

---

filter()

El método filter() permite crear un nuevo array que contiene únicamente los elementos que cumplen una condición.

La sintaxis será:

let filtro = array.filter(elemento => condición);

Por ejemplo:

let numeros = [1, 2, 3, 4, 5, 6];

let pares = numeros.filter(numero => numero % 2 === 0);

console.log(pares);

Resultado:

[2, 4, 6]

El método revisa cada elemento:

1 → No
2 → Sí
3 → No
4 → Sí
5 → No
6 → Sí

Solo los elementos que cumplen la condición pasan al nuevo array.

---

reduce()

El método reduce() permite recorrer un array y obtener un único resultado final.

Es especialmente útil para realizar operaciones como:

• Sumar números.
• Multiplicar valores.
• Calcular totales.
• Contar elementos.
• Construir un resultado a partir de varios elementos.

Por ejemplo, para sumar todos los números:

let numeros = [10, 20, 30, 40];

let suma = numeros.reduce((total, numero) => total + numero, 0);

console.log(suma);

Resultado:

100

El 0 es el valor inicial de total.

Podemos imaginar el proceso así:

total = 0

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
60 + 40 = 100

El resultado final es 100.

---

Strings

Una cadena de texto, o String, es una secuencia de caracteres.

Por ejemplo:

let nombre = "María";

También podemos utilizar comillas simples:

let nombre = 'María';

O backticks:

let nombre = `María`;

Las cadenas también tienen posiciones igual que los arrays.

let palabra = "Hola";

console.log(palabra[0]);
console.log(palabra[1]);

Salida:

H
o

Los índices también empiezan en 0.

Índice	Carácter
0	H
1	o
2	l
3	a

---

Métodos principales de String

JavaScript proporciona muchos métodos para trabajar con cadenas de texto.

Algunos de los más importantes son:

• length
• toUpperCase()
• toLowerCase()
• includes()
• startsWith()
• endsWith()
• indexOf()
• slice()
• replace()
• trim()
• split()

---

length

La propiedad length indica cuántos caracteres tiene una cadena.

let palabra = "JavaScript";

console.log(palabra.length);

Salida:

10

Los espacios también cuentan como caracteres.

let texto = "Hola mundo";

console.log(texto.length);

---

toUpperCase()

Convierte todos los caracteres a mayúsculas.

let nombre = "María";

console.log(nombre.toUpperCase());

Salida:

MARÍA

---

toLowerCase()

Convierte todos los caracteres a minúsculas.

let nombre = "MARÍA";

console.log(nombre.toLowerCase());

Salida:

maría

---

includes()

Permite comprobar si una cadena contiene un determinado texto.

Devuelve true o false.

let frase = "Estoy aprendiendo JavaScript";

console.log(frase.includes("JavaScript"));

Salida:

true

Si buscamos algo que no existe:

console.log(frase.includes("Python"));

Salida:

false

---

startsWith()

Comprueba si una cadena comienza con un determinado texto.

let nombre = "JavaScript";

console.log(nombre.startsWith("Java"));

Resultado:

true

---

endsWith()

Comprueba si una cadena termina con un determinado texto.

let archivo = "foto.png";

console.log(archivo.endsWith(".png"));

Resultado:

true

---

indexOf()

Devuelve la posición en la que aparece un determinado texto.

let palabra = "JavaScript";

console.log(palabra.indexOf("Script"));

Resultado:

4

Si el texto no existe, devuelve -1.

console.log(palabra.indexOf("Python"));

Resultado:

-1

---

slice()

También podemos utilizar slice() con Strings para obtener una parte del texto.

let palabra = "JavaScript";

let resultado = palabra.slice(0, 4);

console.log(resultado);

Resultado:

Java

Al igual que en los arrays, el índice final no se incluye.

---

replace()

Permite sustituir una parte de una cadena.

let mensaje = "Hola Juan";

let nuevoMensaje = mensaje.replace("Juan", "Ana");

console.log(nuevoMensaje);

Resultado:

Hola Ana

---

trim()

El método trim() elimina los espacios que aparecen al principio y al final de una cadena.

Es muy útil, por ejemplo, cuando trabajamos con datos introducidos por un usuario.

let nombre = "   María   ";

console.log(nombre.trim());

Resultado:

María

---

split()

El método split() permite convertir una cadena en un array, utilizando un separador.

Por ejemplo:

let frase = "Hola mundo";

let palabras = frase.split(" ");

console.log(palabras);

Resultado:

["Hola", "mundo"]

También podemos separar por comas:

let frutas = "manzana,plátano,naranja";

let resultado = frutas.split(",");

console.log(resultado);

Resultado:

["manzana", "plátano", "naranja"]

---

Resumen de métodos de String

Método	Función
length	Obtiene la longitud
toUpperCase()	Convierte a mayúsculas
toLowerCase()	Convierte a minúsculas
includes()	Comprueba si contiene un texto
startsWith()	Comprueba cómo comienza
endsWith()	Comprueba cómo termina
indexOf()	Busca la posición de un texto
slice()	Obtiene una parte
replace()	Sustituye texto
trim()	Elimina espacios exteriores
split()	Convierte el String en un array

---

Ejemplos resueltos

Ejercicio resuelto 1 - Filtrar y transformar números

Enunciado

Tenemos una lista de números.

1. Obtén los números pares.
2. Después crea un nuevo array donde cada número par esté multiplicado por 10.

let numeros = [1, 2, 3, 4, 5, 6];

Análisis

Primero necesitamos seleccionar los números pares, por lo que utilizaremos filter().

Después queremos transformar esos números, por lo que utilizaremos map().

Solución

let numeros = [1, 2, 3, 4, 5, 6];

let pares = numeros.filter(numero => numero % 2 === 0);

let resultado = pares.map(numero => numero * 10);

console.log(resultado);

Salida:

[20, 40, 60]

Explicación

filter() selecciona los números pares:

[2, 4, 6]

Después map() transforma cada uno multiplicándolo por 10:

[20, 40, 60]

---

Ejercicio resuelto 2 - Calcular el precio total

Enunciado

Una tienda tiene los siguientes precios:

[12, 25, 8, 15]

Calcula el precio total de todos los productos.

Solución

let precios = [12, 25, 8, 15];

let total = precios.reduce((total, precio) => total + precio, 0);

console.log(`Total: ${total} €`);

Salida:

Total: 60 €

Explicación

reduce() recorre todos los precios y los va acumulando en una única variable.

---

Ejercicio resuelto 3 - Limpiar y transformar nombres

Enunciado

Tenemos varios nombres que contienen espacios innecesarios y están escritos de diferentes formas.

let nombres = ["  ana", "LUIS  ", "  Marta  "];

Elimina los espacios y convierte todos los nombres a minúsculas.

Solución

let nombres = ["  ana", "LUIS  ", "  Marta  "];

let resultado = nombres.map(nombre => nombre.trim().toLowerCase());

console.log(resultado);

Salida:

["ana", "luis", "marta"]

Explicación

Utilizamos map() porque queremos transformar todos los elementos.

Para cada nombre:

1. trim() elimina los espacios exteriores.
2. toLowerCase() convierte el texto a minúsculas.