Diferencias entre .slice() y .splice()

Los arreglos (también conocidos como arrays) en JavaScript permiten almacenar una colección de datos a los cuales se puede acceder por medio de índices. Además, pueden contener distintos tipos de datos a la vez.

Por lo general, es necesario realizar ciertas operaciones sobre los arreglos con métodos tales como .slice() y .splice().

Sus nombres son tan pero tan parecidos, que es fácil confundirlos. Sin embargo, una de sus principales diferencias está en el segundo parámetro:

• .slice() toma como segundo parámetro el índice hasta el cual se van a seleccionar elementos dentro del arreglo.
• .splice() toma como segundo parámetro la cantidad de elementos a eliminar, a partir del índice dado en el primer parámetro

¿Qúe puede hacer.slice()?

• Copiar elementos de un arreglo a otro, sin alterar el original
• Copiar cierta cantidad de elementos a partir un índice dado, indicado en el primer parámetro: arreglo.slice(desde_aquí, hasta_aquí).

El segundo parámetro "hasta_aquí", indica el índice (no incluido) hasta el que se va a realizar la extracción.

¿Qué puede hacer.splice()?

• Agregar o remover elementos del arreglo y además retornar un nuevo arreglo con los elementos extraídos. El arreglo original es modificado en el proceso
• Para agregar elementos, puedes utilizar: arreglo.splice(desde_aquí, numero_de_elementos_a_eliminar, elementos_a_agregar)
• Para remover elementos: arreglo.splice(desde_aquí, numero_de_elementos_a_eliminar)

El segundo parámetro "numero_de_elementos_a_extraer", determina cuantos elementos se van a tomar a partir del índice indicado con el primer parámetro.

Copiar con el método .slice()

El método .slice() copia una sección del arreglo sobre el cual está siendo invocando y retorna esta sección como un arreglo nuevo. El arreglo original no es alterado en el proceso.

Tienes let mascotas = ['frank', 'mario', 'pepe', 'felipe'], de donde quieres copiar a Frank, Mario y Pepe para pegarlos en un nuevo arreglo. Es decir, copiar y pegar los 3 primeros elementos.

Ahí es cuando entra en juego .slice():

arreglo.slice(desde_aquí, hasta_aquí)

• El primer parámetro que recibe .slice(), es el índice donde comienza la selección para copiar
• El segundo parámetro especifica el índice hasta el cual se va a realizar la extracción, sin incluirlo. Es decir, se va a seleccionar hasta el índice anterior al indicado.

  mascotas.slice(0, 3)

Al invocar .slice() con los parámetros (0, 3) sobre el arreglo "mascotas", esto es lo que pasa:

mascotas[0] --> 'frank       // primer elemento, incluido
mascotas[1] --> 'mario'      // segundo elemento, incluido
mascotas[2] --> 'pepe'      // tercer elemento, incluido <- hasta aquí
mascotas[3] --> 'felipe'     // cuarto elemento, no incluido

Es decir, .slice() va a seleccionar:

• el primer elemento, ubicado en el índice 0
• el segundo elemento, ubicado en el índice 1
• el tercer elemento, ubicado en el índice 2

Observa el método en acción:

let mascotas = ['frank', 'mario', 'pepe', 'felipe']

// selecciono los 3 primeros elementos que son perros
let perros = mascotas.slice(0, 3)

// y el arreglo "perros" ahora contine:
console.log(perros) // ['frank', 'mario', 'pepe']

Copiar el último elemento

Para copiar el último elemento y pegarlo en un arreglo nuevo, basta con pasar un -1 como parámetro:

let mascotas = ['frank', 'mario', 'pepe', 'felipe']
let gato = mascotas.slice(-1)

// el arreglo "gato" va a almacenar el último elemento del arreglo
console.log(gato) // ['felipe']

Removiendo/agregando elementos con .splice()

Remover elementos

arreglo.splice(desde_aquí, numero_de_elementos_a_eliminar)

Para remover uno o más elementos del arreglo sobre el cual se invoca .splice(), hay que pasarle dos parámetros:

• El índice donde se va a iniciar la operación, como primer parámetro
• La cantidad de elementos a eliminar como segundo parámetro

Con la siguiente invocación del método .splice() se eliminan 2 elementos del arreglo mascotas = ['frank', 'mario', 'pepe', 'felipe'], a partir del índice 1 (primer parámetro):

mascotas.splice(1, 2)

// al revisar mascotas, obtienes lo siguiente:
console.log(mascotas) // ['frank', 'felipe']

Recuerda, el método .splice() modifica el arreglo original y además, retorna un nuevo arreglo que puedes almacenar en otra variable, por ejemplo:

let instrumentos = ['guitarra', 'bajo', 'batería', 'pandereta']
let cuerdas = instrumentos.splice(0, 2)

console.log(instrumentos) // ['batería', 'pandereta']
console.log(cuerdas) // ['guitarra', 'bajo']

Agregar elementos

arreglo.splice(desde_aquí, numero_de_elementos_a_eliminar, elementos_a_agregar)

• Para agregar elementos, indica el índice donde se va a comenzar a operar el arreglo
• La cantidad de elementos que quieres eliminar. De no querer eliminar elementos, pasa 0 como segundo parámetro
• Por último, es posible pasar como parámetros varios elementos para agregar al arreglo

En el siguiente ejemplo, se agregan al arreglo los elementos 'piano', 'flauta', 'bajo' tomando como punto de partida el índice indicado en el primer parámetro, y sin eliminar elementos (segundo parámetro):

let instrumentos = ['guitarra', 'bajo', 'batería', 'pandereta']
instrumento.splice(3, 0, 'piano', 'flauta', 'bajo')

console.log(instrumentos) 
// ['guitarra', 'bajo', 'batería', 'piano', 'flauta', 'bajo', 'pandereta']