Manipular arrays con métodos de arrays de JavaScript

Introducción

En este laboratorio, los estudiantes explorarán técnicas esenciales de manipulación de arrays de JavaScript a través de una experiencia de aprendizaje práctica integral. El laboratorio cubre métodos clave de arrays como slice(), unshift(), shift(), clasificación y transformación de arrays, proporcionando habilidades prácticas para la gestión y modificación de estructuras de datos de arrays.

Los participantes aprenderán a extraer elementos de un array utilizando slice(), agregar elementos al principio de un array con unshift(), eliminar el primer elemento con shift() y realizar la clasificación y el reverso de un array. Al trabajar a través de ejemplos de código prácticos, los aprendices adquirirán una comprensión sólida de cómo manipular efectivamente arrays en JavaScript, mejorando sus capacidades de programación y habilidades para resolver problemas.

Rebanar elementos de un array

En este paso, aprenderás a usar el método slice() para extraer una porción de un array en JavaScript. El método slice() te permite crear un nuevo array al seleccionar elementos de un array existente sin modificar el array original.

Comencemos creando un array de ejemplo y practicando cómo cortar sus elementos. Abra el WebIDE y cree un nuevo archivo llamado array-slice.js en el directorio ~/project.

// Crea un array de frutas
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// Corta los primeros tres elementos
const slicedFruits1 = fruits.slice(0, 3);
console.log("Las primeras tres frutas:", slicedFruits1);

// Corta desde el índice 2 hasta el final
const slicedFruits2 = fruits.slice(2);
console.log("Frutas a partir del índice 2:", slicedFruits2);

// Corta los últimos dos elementos usando un índice negativo
const slicedFruits3 = fruits.slice(-2);
console.log("Los últimos dos frutos:", slicedFruits3);

Ahora, ejecute el script para ver los resultados:

node ~/project/array-slice.js

Salida de ejemplo:

Las primeras tres frutas: [ 'apple', 'banana', 'cherry' ]
Frutas a partir del índice 2: [ 'cherry', 'date', 'elderberry' ]
Los últimos dos frutos: [ 'date', 'elderberry' ]

Puntos claves sobre slice():

El primer argumento es el índice de inicio (inclusivo)
El segundo argumento es el índice de fin (exclusivo)
Si no se proporciona un índice de fin, se corta hasta el final del array
Los índices negativos se cuentan desde el final del array
El array original permanece sin cambios

Agregar elementos al principio del array con unshift()

En este paso, aprenderás a usar el método unshift() para agregar uno o más elementos al principio de un array en JavaScript. El método unshift() modifica el array original al insertar elementos al principio y devuelve la nueva longitud del array.

Crea un nuevo archivo llamado array-unshift.js en el directorio ~/project y agrega el siguiente código:

// Crea un array inicial de frutas
let fruits = ["banana", "cherry", "date"];
console.log("Array original:", fruits);

// Agrega un solo elemento al principio del array
fruits.unshift("apple");
console.log("Después de agregar un elemento:", fruits);

// Agrega múltiples elementos al principio del array
fruits.unshift("grape", "kiwi");
console.log("Después de agregar múltiples elementos:", fruits);

// Guarda la nueva longitud del array
let newLength = fruits.unshift("orange");
console.log("Nueva longitud del array:", newLength);
console.log("Array final:", fruits);

Ahora, ejecuta el script para ver los resultados:

node ~/project/array-unshift.js

Salida de ejemplo:

Array original: [ 'banana', 'cherry', 'date' ]
Después de agregar un elemento: [ 'apple', 'banana', 'cherry', 'date' ]
Después de agregar múltiples elementos: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
Nueva longitud del array: 7
Array final: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]

Puntos claves sobre unshift():

Agrega uno o más elementos al principio de un array
Modifica el array original
Devuelve la nueva longitud del array
Puede agregar múltiples elementos en una sola llamada
Desplaza los elementos existentes a índices más altos

Eliminar el primer elemento con shift()

En este paso, aprenderás a usar el método shift() para eliminar el primer elemento de un array en JavaScript. El método shift() modifica el array original al eliminar el primer elemento y devuelve ese elemento eliminado.

Crea un nuevo archivo llamado array-shift.js en el directorio ~/project y agrega el siguiente código:

// Crea un array inicial de lenguajes de programación
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("Array original:", languages);

// Elimina y guarda el primer elemento
let removedLanguage = languages.shift();
console.log("Lenguaje eliminado:", removedLanguage);
console.log("Array después del shift:", languages);

// Elimina múltiples elementos llamando a shift() múltiples veces
let secondRemovedLanguage = languages.shift();
console.log("Segundo lenguaje eliminado:", secondRemovedLanguage);
console.log("Array después del segundo shift:", languages);

// Demuestra lo que pasa con un array vacío
let emptyArray = [];
let result = emptyArray.shift();
console.log("Desplazando desde un array vacío:", result);
console.log("Array vacío permanece:", emptyArray);

Ahora, ejecuta el script para ver los resultados:

node ~/project/array-shift.js

Salida de ejemplo:

Array original: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Lenguaje eliminado: JavaScript
Array después del shift: [ 'Python', 'Java', 'C++', 'Ruby' ]
Segundo lenguaje eliminado: Python
Array después del segundo shift: [ 'Java', 'C++', 'Ruby' ]
Desplazando desde un array vacío: undefined
Array vacío permanece: []

Puntos claves sobre shift():

Elimina el primer elemento de un array
Modifica el array original
Devuelve el elemento eliminado
Devuelve undefined si el array está vacío
Reduce la longitud del array en 1

Ordenar y revertir los elementos de un array

En este paso, aprenderás a usar los métodos sort() y reverse() para manipular los elementos de un array en JavaScript. Estos métodos ofrecen maneras simples de organizar y reordenar el contenido del array.

Crea un nuevo archivo llamado array-sort-reverse.js en el directorio ~/project y agrega el siguiente código:

// Crea arrays para la demostración de ordenamiento
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];

// Ordenamiento predeterminado (lexicográfico para cadenas, ascendente para números)
console.log("Números originales:", numbers);
numbers.sort();
console.log("Ordenamiento predeterminado:", numbers);

// Ordenamiento numérico requiere una función de comparación
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("Ordenamiento numérico:", numbers);

// Ordenamiento inverso
console.log("\nFrutas originales:", fruits);
fruits.sort().reverse();
console.log("Ordenado y revertido:", fruits);

// Revertir un array sin ordenar
let colors = ["red", "green", "blue", "yellow"];
console.log("\nColores originales:", colors);
colors.reverse();
console.log("Colores revertidos:", colors);

Ahora, ejecuta el script para ver los resultados:

node ~/project/array-sort-reverse.js

Salida de ejemplo:

Números originales: [ 5, 2, 9, 1, 7 ]
Ordenamiento predeterminado: [ 1, 2, 5, 7, 9 ]
Ordenamiento numérico: [ 1, 2, 5, 7, 9 ]

Frutas originales: [ 'banana', 'apple', 'cherry', 'date' ]
Ordenado y revertido: [ 'date', 'cherry', 'banana', 'apple' ]

Colores originales: [ 'red', 'green', 'blue', 'yellow' ]
Colores revertidos: [ 'yellow', 'blue', 'green','red' ]

Puntos claves sobre sort() y reverse():

sort() modifica el array original
sort() predeterminado convierte los elementos a cadenas y los ordena lexicográficamente
Utiliza una función de comparación para el ordenamiento numérico o personalizado
reverse() invierte el orden de los elementos en el array
Ambos métodos trabajan in-place, cambiando el array original

Transformar y analizar arrays

En este paso, explorarás métodos poderosos de arrays como map(), filter() y reduce() para transformar y analizar los elementos de un array en JavaScript. Estos métodos ofrecen maneras elegantes de manipular y extraer información de arrays.

Crea un nuevo archivo llamado array-transform.js en el directorio ~/project y agrega el siguiente código:

// Array de muestra de puntajes de estudiantes
const scores = [85, 92, 78, 65, 90, 55, 88];

// Usa map() para crear un nuevo array con valores modificados
const adjustedScores = scores.map((score) => score + 5);
console.log("Puntajes originales:", scores);
console.log("Puntajes ajustados:", adjustedScores);

// Usa filter() para crear un array de puntajes aprobatorios (por encima de 70)
const passingScores = scores.filter((score) => score >= 70);
console.log("Puntajes aprobatorios:", passingScores);

// Usa reduce() para calcular la suma total de los puntajes
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("Puntaje total:", totalScore);
console.log("Puntaje promedio:", averageScore.toFixed(2));

// Combina métodos: encuentra el promedio de los puntajes aprobatorios
const averagePassingScore =
  passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("Puntaje promedio aprobatorio:", averagePassingScore.toFixed(2));

// Transforma un array de nombres
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
  (name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("Nombres originales:", names);
console.log("Nombres con mayúscula inicial:", capitalizedNames);

Ahora, ejecuta el script para ver los resultados:

node ~/project/array-transform.js

Salida de ejemplo:

Puntajes originales: [ 85, 92, 78, 65, 90, 55, 88 ]
Puntajes ajustados: [ 90, 97, 83, 70, 95, 60, 93 ]
Puntajes aprobatorios: [ 85, 92, 78, 90, 88 ]
Puntaje total: 553
Puntaje promedio: 79.00
Puntaje promedio aprobatorio: 86.60
Nombres originales: [ 'alice', 'bob', 'charlie' ]
Nombres con mayúscula inicial: [ 'Alice', 'Bob', 'Charlie' ]

Puntos claves sobre los métodos de transformación de arrays:

map(): Crea un nuevo array transformando cada elemento
filter(): Crea un nuevo array con los elementos que pasan una prueba
reduce(): Reduce el array a un solo valor a través de una función de devolución de llamada
Estos métodos no modifican el array original
Pueden encadenarse para transformaciones complejas

Resumen

En este laboratorio, los participantes exploraron varias técnicas de manipulación de arrays de JavaScript utilizando métodos integrados. El laboratorio se centró en aprender cómo rebanar elementos de un array utilizando el método slice(), que permite extraer porciones específicas de un array sin modificar el array original. Los participantes practicaron la creación de nuevos arrays al seleccionar elementos utilizando diferentes rangos de índices, incluyendo índices positivos y negativos.

El laboratorio también presentó métodos como unshift() para agregar elementos al principio de un array, shift() para eliminar el primer elemento y técnicas para ordenar y revertir los elementos de un array. A través de ejercicios de codificación prácticos, los aprendices adquirieron experiencia práctica en la transformación y análisis de arrays, comprendiendo cómo estos métodos pueden modificar y extraer datos de forma eficiente de las estructuras de array en JavaScript.