Una de las actividades más comunes al trabajar con arrays consiste en obtener o modificar partes de un array. Para esto tenemos a nuestra disposición las funciones array.slice y array.splice.

Obtener una parte del Array con slice

La función array.slice(start, end) permite obtener una porción de un array entre dos posiciones indicadas. Veamos con un ejemplo:

const animales = ['anguila', 'burro', 'caballo', 
                  'coyote', 'perro', 'dingo', 
                  'lobo', 'guepardo', 'hipopótamo'];

//Devuelve los ítems del 3 (coyote) al 6 (lobo); 
const caninos = animales.slice(3, 7);

//Imprime: (4) ["coyote", "perro", "dingo", "lobo"];
console.log(caninos);

El funcionamiento es similar al de la función substring, pero para arrays: el primer parámetro indica la posición (base 0) del primer ítem del array que se devolverá, y el segundo parámetro indica hasta qué posición se devolverán ítems. Hay unos pocos:

• Los dos parámetros se indican en base cero: el primer ítem del array se encuentra en la posición 0; el segundo parámetro también se indica en base cero, pero con la particularidad de que el ítem indicado no se incluye en el resultado. Por esto en el ejemplo anterior, se devuelven los ítems en las posiciones 3, 4, 5, y 6, sin incluir el ítem de la posición 7.
• Si no se indica el primer parámetro, este toma el valor por defecto 0; si no se especifica el segundo se devolverán todos los ítems a partir del indicado en el primer parámetro. Así, al llamar al función slice sin parámetros se devuelve una copia de todo el array original.
• La función slice no modifica el array original, solo devuelve una copia de una porción del mismo.
• Un punto importante es que los ítems del nuevo array son una copia superficial (shallow copy) de los originales. Esto significa que los ítems que sean tipos primitivos, como cadenas y números, son copias independientes de los originales; en cambio, los ítems que sean objetos mantienen referencias a los originales, y si modificas estos ítems también modificarás los del array original.

Reemplazar una parte del Array con splice

La función array.splice(start, deleteCount, item1[, item2...] ) también devuelve una porción de un array, pero su tarea principal es reemplazar una porción del array, entre dos posiciones indicadas, por otro conjunto de elementos. Veamos con un ejemplo:

const animales = ['anguila', 'burro', 'caballo', 
                  'coyote', 'perro', 'dingo', 
                  'lobo', 'guepardo', 'hipopótamo'];

//Estos son los ítems nuevos 
const aves = ['canario', 'cuervo', 'águila'];

//Reemplaza los ítems del 3 (coyote) al 6 (lobo) con las aves 
const eliminados = animales.splice(3, 4, ...aves );

//Imprime: (4) ["coyote", "perro", "dingo", "lobo"];
console.log(eliminados);

//Imprime: (8) ['anguila', 'burro', 'caballo', 
                'canario', 'cuervo', 'águila', 
                'guepardo', 'hipopótamo'];
console.log(animales);

La función splice recibe uno o más parámetros, y a diferencia de slice, esta si modifica el array original. Veamos como funciona:

• El primer parámetro es obligatorio, e indica la posición del primer ítem, en base cero, que se va a eliminar. Si es mayor a la longitud del array, se tratará como si fuese igual a esa longitud. Si es negativo, la posición se contará desde el final del array.
• En el ejemplo anterior, el valor inicial fue de 3, por lo que se eliminó los ítems a partir del «coyote». Si por el contrario hubiese colocado -3 como valor inicial, habría eliminado los ítems a partir del «lobo» (tercer elemento contando desde el final).
• El segundo parámetro es opcional, e indica la cantidad de elementos que se va a eliminar. Si se omite o se indica un valor menor o igual a 0, no se eliminará ningún ítem.
• A partir del tercer parámetro se indican los ítems que van a colocarse en la posición de los elementos eliminados. Se puede colocar los elementos uno a uno separados por coma, o se puede usar un array como en el ejemplo anterior, usando la sintaxis spread.
• La función modifica el array original, y devuelve un nuevo array con los elementos eliminados.

Un punto importante para resaltar, es que aunque la variable animales fue declarada con const, esto no impide que el array sea modificado, ya que const solo evita la reasignación de variables, no la modificación de su contenido.

Como usar splice para eliminar un ítem del Array

Esta función comúnmente es usada para eliminar un ítem de un Array cuando se conoce la posición del mismo. Veamos un ejemplo:

//Elimina el ítem de la posición 2 (melón) del array
const posicionEliminar = 2;
const frutas = ['naranja', 'cambur', 'melón', 'manzana'];

const melon = frutas.splice(posicionEliminar, 1);

//Imprime (3) ['naranja', 'cambur', 'manzana']
console.log(frutas);

De esta forma, eliminamos el ítem melón del array, y ahora este tiene solo los tres ítems restantes. La diferencia con respecto al caso de uso más general, es que en este caso solo indicamos los primeros dos parámetros, omitiendo la lista de ítems a agregar.

Como usar splice para insertar un ítem del Array

Del mismo modo que el caso anterior, esta función se puede usar para insertar uno o más ítems en una posición específica del array. Por ejemplo:

const posicionAgregar = 2;
const dias = ['lunes', 'martes', 'viernes', 
              'sábado', 'domingo'];

//Agrega los items faltantes del array
dias.splice(posicionAgregar, 0, 'miércoles', 'jueves');

//Imprime (7) ['lunes', 'martes', 'miércoles', 'jueves', 
               'viernes', 'sábado', 'domingo']
console.log(dias)

Al ejecutar el código de ejemplo, podemos ver que se agregan los dos ítems miércoles y jueves en las posiciones 2 y 3 respectivamente, moviendo el resto de los ítems a la derecha. Y para evitar que algún ítem sea removido, le pasamos un 0 al parámetro deleteCount .

¿Y porqué no usar delete en un array?

Existe una sentencia que puede usarse para eliminar propiedades de un objeto, y en cierto modo «eliminar» un ítem del array; pero esta no funciona exactamente como uno esperaría. Veamos con un ejemplo:

const colores = ['magenta', 'blanco', 'rojo', 'cian', 'verde'];

//"Borramos" el color rojo
delete colores[2];

//Imprime: (5) ['magenta', 'blanco', undefined, 'cian', 'verde']
console.log(colores);

//Imprime: 5
console.log(colores.length);

//Imprime: '0:magenta', '1:blanco', '3:cian' y '4:verde' en líneas separadas
colores.forEach( (valor, indice) => { 
    console.log(indice + ':' + valor)
});

Si bien, se puede recorrer correctamente el array mediante Array.forEach, lo mismo no ocurre con la sentencia for: el array efectivamente tiene 4 elementos, pero al borrar el segundo ítem, los elementos posteriores no se desplazaron para llenar el vacío. Por esta razón el array aun indica que tiene longitud = 5, y los índices de los elementos cian y verde no se actualizaron para reflejar sus nuevas posiciones.

Derecho de uso

Los contenidos generados por el autor de este artículo (explicaciones, código fuente, y archivos adjuntos creados por el autor) están disponibles bajo licencia CC BY-SA 3.0, y pueden ser usados, derivados y compartidos bajo los términos indicados en la misma. Los contenidos no generados por el autor de este artículo son propiedad de sus respectivos dueños y están regidos por las licencias que estos hayan dispuesto.