Crear y manipular arrays en JavaScript

Introducción

En este laboratorio, los estudiantes explorarán los conceptos fundamentales de creación y manipulación de arrays en JavaScript. El laboratorio ofrece una introducción exhaustiva a la inicialización de arrays, el acceso a los elementos de un array y la realización de operaciones básicas de arrays a través de ejercicios de codificación prácticos. Los participantes aprenderán a crear arrays utilizando diferentes métodos, incluyendo la notación de corchetes cuadrados y el constructor Array, y entenderán cómo trabajar con arrays que contienen varios tipos de datos.

El laboratorio cubre habilidades clave como la definición de arrays con números, cadenas y elementos mixtos, el acceso a elementos individuales de un array utilizando índices y la demostración de técnicas básicas de manipulación de arrays. Al trabajar con ejemplos prácticos, los aprendices adquirirán experiencia práctica en la creación, acceso e interacción con arrays, que son estructuras de datos esenciales en la programación de JavaScript.

Comprender la definición e inicialización de arrays

En este paso, aprenderás sobre los arrays en JavaScript, que son estructuras de datos fundamentales utilizadas para almacenar múltiples valores en una sola variable. Los arrays te permiten recopilar y organizar datos relacionados de manera eficiente.

Comencemos creando un array simple en JavaScript. Abra el WebIDE y cree un nuevo archivo llamado arrays.js en el directorio ~/project.

// Creando un array de números
let numbers = [1, 2, 3, 4, 5];

// Creando un array de cadenas
let fruits = ["apple", "banana", "orange"];

// Creando un array vacío
let emptyArray = [];

// Creando un array con tipos de datos mixtos
let mixedArray = [42, "hello", true, null];

console.log("Array de números:", numbers);
console.log("Array de frutas:", fruits);
console.log("Array vacío:", emptyArray);
console.log("Array mixto:", mixedArray);

Cuando ejecute este código, verá la siguiente salida de ejemplo:

Array de números: [1, 2, 3, 4, 5]
Array de frutas: ['apple', 'banana', 'orange']
Array vacío: []
Array mixto: [42, 'hello', true, null]

Puntos claves sobre la inicialización de arrays:

Los arrays se crean utilizando corchetes []
Los arrays pueden contener elementos de diferentes tipos
Los arrays pueden estar vacíos o prellenados
El primer elemento de un array siempre está en el índice 0

También puede crear arrays utilizando el constructor Array:

// Usando el constructor Array
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array usando el constructor:", numbersConstructor);

Acceder a los elementos de un array utilizando índices

En este paso, aprenderás cómo acceder a elementos individuales en un array utilizando su índice. En JavaScript, los índices de array empiezan en 0, lo que significa que el primer elemento está en el índice 0, el segundo en el índice 1, y así sucesivamente.

Abra el archivo arrays.js en el directorio ~/project y agregue el siguiente código:

// Crear un array de colores
let colors = ["red", "green", "blue", "yellow", "purple"];

// Acceder a los elementos de un array por índice
console.log("Primer color:", colors[0]); // Primer elemento
console.log("Tercer color:", colors[2]); // Tercer elemento
console.log("Último color:", colors[colors.length - 1]); // Último elemento

// Modificar elementos de un array
colors[1] = "orange"; // Cambiar el segundo elemento
console.log("Array de colores modificado:", colors);

// Demostrar el rango de índices
console.log("Longitud del array:", colors.length);

Cuando ejecute este código, verá la siguiente salida de ejemplo:

Primer color: red
Tercer color: blue
Último color: purple
Array de colores modificado: ['red', 'orange', 'blue', 'yellow', 'purple']
Longitud del array: 5

Puntos claves sobre la indexación de arrays:

Los índices empiezan en 0
Utilice corchetes [] para acceder a los elementos
array.length devuelve el número total de elementos
Puede modificar los elementos asignando un nuevo valor a un índice específico
Para acceder al último elemento, use array[array.length - 1]

Intente acceder a elementos fuera del rango del array para ver qué sucede:

console.log("Accediendo a un índice fuera de rango:", colors[10]); // Devuelve undefined

Crear un array de frutas

En este paso, crearás un array de frutas y aprenderás a trabajar con él. Abre el archivo arrays.js en el directorio ~/project y agrega el siguiente código:

// Crear un array de frutas
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// Mostrar el array completo de frutas
console.log("Array de frutas:", fruits);

// Agregar una nueva fruta al final del array
fruits.push("grape");
console.log("Frutas después de agregar uva:", fruits);

// Crear un array con diferentes tipos de frutas
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// Combinar dos arrays de frutas
let allFruits = fruits.concat(tropicalFruits);
console.log("Todas las frutas:", allFruits);

// Verificar el número de frutas
console.log("Número total de frutas:", allFruits.length);

Cuando ejecutes este código, verás la siguiente salida de ejemplo:

Array de frutas: ['apple', 'banana', 'orange','mango','strawberry']
Frutas después de agregar uva: ['apple', 'banana', 'orange','mango','strawberry', 'grape']
Todas las frutas: ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Número total de frutas: 9

Puntos claves sobre la creación y manipulación de arrays de frutas:

Los arrays se pueden crear con múltiples elementos
Puedes agregar nuevos elementos usando push()
Los arrays se pueden combinar usando concat()
La propiedad length muestra el número total de elementos

Imprimir los elementos de un array en una página web

En este paso, aprenderás a mostrar los elementos de un array en una página web utilizando HTML y JavaScript. Primero, crea un archivo HTML llamado fruits.html en el directorio ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mostrar array de frutas</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Mi colección de frutas</h1>
    <div id="fruits-list"></div>

    <script>
      // Crear un array de frutas
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // Obtener el contenedor de la lista de frutas
      let fruitsList = document.getElementById("fruits-list");

      // Crear una lista no ordenada para mostrar las frutas
      let ul = document.createElement("ul");

      // Recorrer el array de frutas y crear elementos de lista
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // Agregar la lista a la página
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

Este ejemplo demuestra varios conceptos claves:

Crear una estructura HTML
Utilizar JavaScript para manipular el DOM
Mostrar los elementos de un array en una página web
Utilizar forEach() para iterar a través de los elementos de un array

Cuando abres este archivo HTML en un navegador web, verás una lista de frutas mostrada en la página.

Método alternativo utilizando innerHTML:

// Método alternativo para mostrar frutas
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

Explorar operaciones básicas de arrays

En este paso, aprenderás sobre las operaciones comunes de arrays en JavaScript. Abra el archivo arrays.js en el directorio ~/project y agregue el siguiente código:

// Crear un array de números
let numbers = [5, 2, 8, 1, 9, 3];

// Agregar elementos
numbers.push(10); // Agregar elemento al final
numbers.unshift(0); // Agregar elemento al principio
console.log("Después de agregar elementos:", numbers);

// Eliminar elementos
let lastNumber = numbers.pop(); // Eliminar el último elemento
let firstNumber = numbers.shift(); // Eliminar el primer elemento
console.log("Después de eliminar elementos:", numbers);

// Ordenar el array
numbers.sort((a, b) => a - b); // Orden ascendente
console.log("Array ordenado:", numbers);

// Invertir el array
numbers.reverse();
console.log("Array invertido:", numbers);

// Encontrar elementos
let index = numbers.indexOf(8);
console.log("Índice de 8:", index);

// Cortar el array
let slicedNumbers = numbers.slice(1, 4);
console.log("Array cortado:", slicedNumbers);

// Filtrar el array
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Números pares:", evenNumbers);

// Mapear el array
let squaredNumbers = numbers.map((num) => num * num);
console.log("Números al cuadrado:", squaredNumbers);

Cuando ejecute este código, verá la siguiente salida de ejemplo:

Después de agregar elementos: [0, 5, 2, 8, 1, 9, 3, 10]
Después de eliminar elementos: [5, 2, 8, 1, 9, 3, 10]
Array ordenado: [1, 2, 3, 5, 8, 9, 10]
Array invertido: [10, 9, 8, 5, 3, 2, 1]
Índice de 8: 2
Array cortado: [9, 8, 5]
Números pares: [10, 8, 2]
Números al cuadrado: [100, 81, 64, 25, 9, 4, 1]

Operaciones clave de arrays demostradas:

push() y unshift() para agregar elementos
pop() y shift() para eliminar elementos
sort() para ordenar elementos
reverse() para invertir el orden del array
indexOf() para encontrar la posición de un elemento
slice() para extraer una porción de un array
filter() para crear un nuevo array con elementos específicos
map() para transformar los elementos de un array

Resumen

En este laboratorio, los participantes exploraron los fundamentos del trabajo con arrays en JavaScript, aprendiendo cómo crear, inicializar y manipular estructuras de datos de arrays. El laboratorio cubrió conceptos claves como la definición de arrays utilizando corchetes y el constructor Array, demostrando la capacidad de crear arrays con diferentes tipos de elementos, incluyendo números, cadenas y tipos de datos mixtos.

Los participantes adquirieron habilidades prácticas en el acceso a los elementos de un array a través de la indexación, comprendiendo que los índices de array empiezan en 0, y aprendieron cómo realizar operaciones básicas de arrays. El enfoque práctico permitió a los aprendices practicar la creación de arrays, registrar su contenido y explorar la flexibilidad de los arrays de JavaScript para almacenar y organizar datos de manera eficiente.