JavaScript: Cómo añadir elementos a un array (push, unshift, splice, concat, spread) — Guía de principiante a intermedio

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es uno de los lenguajes de programación esenciales para el desarrollo web. Entre sus características principales, los arrays juegan un papel crucial en la gestión y manipulación eficiente de datos.

En este artículo explicaremos en detalle cómo añadir elementos a los arrays en JavaScript, cubriendo los métodos específicos y cómo utilizarlos. Al abarcar desde los métodos básicos hasta técnicas más avanzadas, esta guía será útil tanto para principiantes como para estudiantes intermedios.

2. Conceptos básicos de los arrays

¿Qué es un array? — Los fundamentos de la gestión de datos

Un array (Array) de JavaScript es una estructura de datos que permite almacenar y gestionar múltiples valores juntos. Puede contener varios tipos de datos como elementos, tales como cadenas, números y objetos.

Ejemplo:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

Puedes acceder a los elementos del array usando un índice. Como los índices comienzan en 0, el primer elemento se puede obtener con fruits[0].

console.log(fruits[0]); // "apple"

Inicialización de arrays y operaciones básicas

Puedes inicializar arrays de las siguientes maneras.

1. Crear un array vacío:

   let arr = [];
   

2. Crear un array con valores iniciales:

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

3. Escribir un array en varias líneas:

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

Como operación básica de un array, puedes usar la propiedad length para obtener el número de elementos.

console.log(colors.length); // 3

3. Métodos básicos para añadir elementos a un array

3.1 Añadir al final: push()

¿Qué es push()?

El método push() es la forma más básica de añadir elementos al final de un array. Modifica (muta) el array original y devuelve la nueva longitud.

Sintaxis

array.push(element1, element2, ..., elementN);

Ejemplo

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Ejemplo: Añadir varios elementos

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Añadir al principio: unshift()

¿Qué es unshift()?

El método unshift() añade elementos al principio de un array. Al igual que push(), modifica el array original y devuelve la nueva longitud.

Sintaxis

array.unshift(element1, element2, ..., elementN);

Ejemplo

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 Añadir en cualquier posición: splice()

¿Qué es splice()?

El método splice() es una opción flexible que permite añadir o eliminar elementos en cualquier posición de un array.

Sintaxis

array.splice(start, deleteCount, item1, item2, ..., itemN);

Ejemplo

Añadir solo elementos:

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

Añadir y eliminar al mismo tiempo:

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Resumen

4. Técnicas avanzadas: combinar arrays y añadir elementos

4.1 Combinar arrays: concat()

¿Qué es concat()?

El método concat() es un método no mutante (no destructivo) que se utiliza para combinar varios arrays en uno nuevo. Los arrays originales no se modifican y se devuelve un array nuevo.

Sintaxis

array1.concat(array2, array3, ...);

Ejemplo

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

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Combinar arrays con la sintaxis de propagación (...)

¿Qué es la sintaxis de propagación?

Spread syntax (...) es una característica moderna de JavaScript que expande elementos de arreglos u objetos. Permite combinar arreglos o agregar nuevos elementos con un código conciso y legible.

Sintaxis

[...array1, ...array2, ...elements];

Ejemplo

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

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Comparando Opciones para la Fusión de Arreglos

Resumen

En esta sección, cubrimos técnicas avanzadas para fusionar arreglos.

• Método concat() : Una forma no mutante de combinar arreglos sin cambiar los originales.
• Sintaxis de propagación : Un enfoque moderno y conciso para operaciones flexibles con arreglos.

5. Buenas Prácticas para el Manejo Eficiente de Arreglos

5.1 Métodos Mutantes vs. No Mutantes

¿Qué Son los Métodos Mutantes?

Son métodos que modifican directamente el arreglo original.

¿Qué Son los Métodos No Mutantes?

Son métodos que no cambian el arreglo original y, en su lugar, devuelven un nuevo arreglo.

5.2 Escribiendo Código Consciente del Rendimiento

Optimización de Bucles

Bucle eficiente:

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Uso de Encadenamiento de Métodos

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Mejorando la Legibilidad del Código

Usa Nombres de Variables Claros

let userIds = [1, 2, 3];

Añade Comentarios Apropiadamente

let evenIds = userIds.filter(id => id % 2 === 0);

Usa Literales de Plantilla

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Resumen

En esta sección, presentamos buenas prácticas para operaciones eficientes con arreglos.

• Elegir entre métodos mutantes y no mutantes
• Usar bucles conscientes del rendimiento y encadenamiento de métodos
• Mejorar la legibilidad mediante nombres y comentarios

6. Ejemplos Prácticos y Casos de Uso

6.1 Gestionando Datos de Entrada de Formularios

Escenario: Almacenar Valores de Entrada del Formulario en un Arreglo

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Salida:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Eliminar un Elemento Específico del Arreglo

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Salida:

["Sato", "Tanaka"]

6.2 Añadiendo Datos Dinámicos en una Aplicación de Gestión de Tareas

Escenario: Añadir Tareas y Rastrear su Finalización

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Salida:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Manejo de Estructuras de Datos Complejas

Escenario: Trabajar con Arreglos y Objetos Anidados

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Salida:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Resumen

En esta sección, explicamos aplicaciones prácticas de operaciones con arreglos mediante casos de uso del mundo real.

1. Gestión de datos de entrada de formularios – Operaciones básicas para agregar y eliminar elementos.
2. Construcción de una aplicación de gestión de tareas – Manejo dinámico de arrays y actualizaciones de estado.
3. Manejo de estructuras de datos complejas – Añadir y actualizar elementos en arrays y objetos anidados.

7. Preguntas Frecuentes (Q&A)

Q1. ¿Cuál es la forma más fácil de vaciar un array?

Respuesta: Establecer la propiedad length a 0

let arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr); // []

Q2. ¿Cómo puedo agregar solo elementos únicos (sin duplicados)?

Respuesta: Utilizar includes() o Set

Ejemplo 1: Verificación de duplicados con includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Ejemplo 2: Eliminar duplicados con Set

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. ¿Cómo agregar elementos a un array anidado?

Respuesta: Utilizar push() o la sintaxis spread

Ejemplo 1: Añadir un nuevo array anidado

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

Ejemplo 2: Añadir un elemento dentro de un array anidado específico

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Resumen

8. Resumen Final y Tabla Comparativa

8.1 Resumen General

Operaciones Básicas con Arrays

• ¿Qué es un array? Una estructura que gestiona múltiples valores y a la que accedes mediante índices.
• Inicialización y operaciones básicas Los arrays son fáciles de crear con [] y puedes comprobar la cantidad de elementos con length .

Métodos para Añadir/Eliminar Elementos

• Añadir al final: push() Simple y muy usado, pero modifica el array original.
• Añadir al principio: unshift() Útil cuando el orden importa, pero ten en cuenta el rendimiento.
• Añadir/eliminar en cualquier posición: splice() Muy flexible, pero su sintaxis puede ser algo compleja.

Fusionar y Expandir Arrays

• concat() Una forma segura y no mutable de combinar varios arrays.
• Sintaxis spread (...) Simple, legible e ideal para entornos modernos de JavaScript.

Consejos de Eficiencia

• Métodos mutantes vs. no mutantes Elige métodos no mutantes cuando necesites preservar los datos originales.
• Bucles enfocados en rendimiento Optimiza para velocidad y eficiencia de memoria cuando sea apropiado.

Ejemplos y Casos de Uso

• Gestión de entradas de formularios Almacena valores en un array e implementa agregar/eliminar fácilmente.
• Sistemas de gestión de tareas Añade y elimina tareas dinámicamente y rastrea el estado de finalización.
• Operaciones con datos anidados Maneja de forma flexible estructuras complejas con arrays y objetos anidados.

8.2 Tabla Comparativa de Métodos de Arrays

Resumen

En este artículo, proporcionamos una explicación estructurada de las operaciones con arrays en JavaScript, desde técnicas básicas hasta avanzadas.

• Operaciones básicas de arrays y métodos para añadir/eliminar elementos.
• Técnicas avanzadas como la fusión y expansión de arrays.
• Casos de uso prácticos y consejos para una gestión eficiente de arrays.
• Preguntas comunes y sus soluciones.

Próximos Pasos

¡Continúa aprendiendo JavaScript y fortalece tus habilidades aplicando estas técnicas de arrays en proyectos reales!