El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Arrays: Conceptos Básicos y Métodos

Siguiente ►
►

Introducción

Los arrays son una estructura de datos fundamental en JavaScript que permite almacenar múltiples valores en una sola variable. A diferencia de las variables simples que pueden contener un solo valor, los arrays pueden contener una colección de valores, que pueden ser de cualquier tipo de datos, incluidos otros arrays.

Conceptos Básicos

Definición de un Array

En JavaScript, un array se define utilizando corchetes [] y los elementos se separan por comas.

// Definición de un array vacío
let miArray = [];

// Definición de un array con elementos
let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "banana", "cereza"];
let mixto = [1, "dos", true, null];

Acceso a Elementos de un Array

Los elementos de un array se acceden mediante índices, que comienzan en 0.

let frutas = ["manzana", "banana", "cereza"];

console.log(frutas[0]); // "manzana"
console.log(frutas[1]); // "banana"
console.log(frutas[2]); // "cereza"

Modificación de Elementos

Puedes modificar los elementos de un array asignando un nuevo valor a un índice específico.

let frutas = ["manzana", "banana", "cereza"];

frutas[1] = "naranja";
console.log(frutas); // ["manzana", "naranja", "cereza"]

Longitud de un Array

La propiedad length de un array devuelve el número de elementos en el array.

let frutas = ["manzana", "banana", "cereza"];
console.log(frutas.length); // 3

Métodos Comunes de Arrays

push() y pop()

  • push(): Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
  • pop(): Elimina el último elemento de un array y lo devuelve.
let frutas = ["manzana", "banana"];

frutas.push("cereza");
console.log(frutas); // ["manzana", "banana", "cereza"]

let ultimaFruta = frutas.pop();
console.log(ultimaFruta); // "cereza"
console.log(frutas); // ["manzana", "banana"]

shift() y unshift()

  • shift(): Elimina el primer elemento de un array y lo devuelve.
  • unshift(): Añade uno o más elementos al inicio de un array y devuelve la nueva longitud del array.
let frutas = ["manzana", "banana"];

let primeraFruta = frutas.shift();
console.log(primeraFruta); // "manzana"
console.log(frutas); // ["banana"]

frutas.unshift("cereza");
console.log(frutas); // ["cereza", "banana"]

indexOf() y includes()

  • indexOf(): Devuelve el primer índice en el que un elemento dado se puede encontrar en el array, o -1 si el elemento no está presente.
  • includes(): Determina si un array contiene un elemento específico, devuelve true o false.
let frutas = ["manzana", "banana", "cereza"];

console.log(frutas.indexOf("banana")); // 1
console.log(frutas.indexOf("naranja")); // -1

console.log(frutas.includes("cereza")); // true
console.log(frutas.includes("naranja")); // false

slice() y splice()

  • slice(): Devuelve una copia superficial de una porción del array dentro de un nuevo array.
  • splice(): Cambia el contenido de un array eliminando, reemplazando o añadiendo nuevos elementos.
let frutas = ["manzana", "banana", "cereza", "naranja"];

// slice
let algunasFrutas = frutas.slice(1, 3);
console.log(algunasFrutas); // ["banana", "cereza"]

// splice
frutas.splice(2, 1, "kiwi");
console.log(frutas); // ["manzana", "banana", "kiwi", "naranja"]

join() y split()

  • join(): Une todos los elementos de un array en una cadena y devuelve esta cadena.
  • split(): Divide un objeto de tipo String en un array de cadenas mediante la separación de la cadena en subcadenas.
let frutas = ["manzana", "banana", "cereza"];
let cadenaFrutas = frutas.join(", ");
console.log(cadenaFrutas); // "manzana, banana, cereza"

let nuevaFrutas = cadenaFrutas.split(", ");
console.log(nuevaFrutas); // ["manzana", "banana", "cereza"]

Ejercicios Prácticos

Ejercicio 1: Manipulación Básica de Arrays

  1. Crea un array llamado colores que contenga los siguientes elementos: "rojo", "verde", "azul".
  2. Añade el color "amarillo" al final del array.
  3. Elimina el primer elemento del array.
  4. Añade el color "naranja" al inicio del array.
  5. Usa indexOf para encontrar la posición del color "azul".
let colores = ["rojo", "verde", "azul"];
colores.push("amarillo");
colores.shift();
colores.unshift("naranja");
let posicionAzul = colores.indexOf("azul");

console.log(colores); // ["naranja", "verde", "azul", "amarillo"]
console.log(posicionAzul); // 2

Ejercicio 2: Uso de Métodos de Arrays

  1. Crea un array llamado numeros con los números del 1 al 5.
  2. Usa slice para crear un nuevo array que contenga los números del 2 al 4.
  3. Usa splice para eliminar el número 3 del array original y reemplazarlo por el número 6.
  4. Usa join para convertir el array en una cadena de texto separada por guiones.
let numeros = [1, 2, 3, 4, 5];
let subNumeros = numeros.slice(1, 4);
numeros.splice(2, 1, 6);
let cadenaNumeros = numeros.join("-");

console.log(subNumeros); // [2, 3, 4]
console.log(numeros); // [1, 2, 6, 4, 5]
console.log(cadenaNumeros); // "1-2-6-4-5"

Conclusión

En esta sección, hemos cubierto los conceptos básicos de los arrays en JavaScript, incluyendo cómo definir, acceder y modificar elementos, así como varios métodos útiles para manipular arrays. Los arrays son una herramienta poderosa y versátil que te permitirá manejar colecciones de datos de manera eficiente. Asegúrate de practicar con los ejercicios proporcionados para consolidar tu comprensión antes de pasar al siguiente tema.

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados