Modificación avanzada con splice(), reverse(), sort(), fill()

Clase 51 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

¿Cómo funcionan los métodos que modifican arrays en JavaScript?

Los arrays son estructuras fundamentales en JavaScript, y conocer cómo manipularlos es crucial para cualquier desarrollador. En esta clase, vamos a explorar cuatro métodos que modifican el array original: splice, reverse, sort y fill. Estos métodos se utilizan para cambiar, reorganizar u ordenar los elementos dentro de un array. Vamos a descubrir cómo funcionan cada uno de estos métodos en detalle.

¿Qué hace el método splice?

El método splice es extremadamente versátil. Permite modificar el contenido de un array eliminando elementos existentes y/o agregando nuevos. Aquí te explicamos cómo funciona:

  • Eliminar elementos: Especificas el índice de inicio y el número de elementos a eliminar.
  • Agregar elementos: Puedes agregar nuevos elementos en la posición donde se eliminan otros.

Así es como se vería el código:

const vegetables = ['carrot', 'broccoli', 'spinach', 'tomato']; const removedVegetables = vegetables.splice(2, 1, 'cucumber', 'onion'); console.log(vegetables); // ['carrot', 'broccoli', 'cucumber', 'onion', 'tomato'] console.log(removedVegetables); // ['spinach']

¿Cómo reordenar elementos con reverse?

El método reverse cambia el orden de los elementos en un array al revés. Es una herramienta simple pero poderosa cuando necesitas invertir el orden natural del array.

Ejemplo de uso:

const numbers = [1, 2, 3, 4, 5]; const reversedNumbers = numbers.reverse(); console.log(numbers); // [5, 4, 3, 2, 1] console.log(reversedNumbers); // [5, 4, 3, 2, 1]

¿Qué necesitas saber sobre sort?

Sort organiza los elementos de un array. Aunque parece simple, hay cosas que debes considerar:

  • Ordenamiento por defecto: JavaScript convierte los elementos a strings y luego los compara según el orden Unicode.
  • Ordenamiento numérico: Puedes proporcionar una función de comparación para organizar números de manera correcta.
const numbers = [4, 18, 1, 62, 34]; numbers.sort(); // Organiza por orden Unicode console.log(numbers); // [1, 18, 34, 4, 62] // Para ordenar numéricamente: numbers.sort((a, b) => a - b); console.log(numbers); // [1, 4, 18, 34, 62]

Para cadenas, sort las organiza según el orden UTF-16.

const cities = ['New York', 'Paris', 'Tokyo', 'London']; cities.sort(); console.log(cities); // ['London', 'New York', 'Paris', 'Tokyo']

¿Cómo se utiliza fill para cambiar elementos en un array?

Fill te permite llenar un array con un valor estático, transformando todos sus elementos o solo un rango específico.

Ejemplo:

const ages = [21, 35, 45, 50]; ages.fill(0, 2, 4); console.log(ages); // [21, 35, 0, 0] // Llenar desde una posición específica ages.fill(15, 1); console.log(ages); // [21, 15, 15, 15] // Llenar todo el array ages.fill(10); console.log(ages); // [10, 10, 10, 10]

Cada uno de estos métodos ofrece una manera única de modificar los arrays. ¡Explora sus usos y maximiza el poder de tus aplicaciones en JavaScript! Continúa practicando y aprendiendo para seguir mejorando día a día como desarrollador.