Cómo funciona slice y splice en javascript.

Cómo funciona slice y splice en javascript.

Slice

Array.prototype.slice (start, end);

Antes que nada tenemos que comentar que el método "slice" no es destructivo, o sea que no modifica el array original, y nos devuelve un nuevo array con los valores buscados.

Slice recibe dos argumentos, inicio y final (final es optativo), y nos devuelve un array que contiene los elementos desde el indice que coincide con el parámetro "inicio" hasta indice que coincide con el parámetro "final -1" o sea que no incluye el elemento con el indice igual a "final".
Si el parámetro "final" no esta incluido entonces interpretará que queremos hasta el último elemento.

Si el valor de "inicio" es negativo, tomará la longitud del array y restará el valor de "inicio" para calcular el indice desde donde tomar los elementos.
De similar manera, si el final es negativo, tomará la longitud del array y restará el "final" para saber hasta qué indice debe tomar sin incluir este último.

Veamos todo esto con ejemplos:

Si tenemos el siguiente array:

   let a = [1, 2, 3, 4, 5];

Como sabemos los indices van desde 0 a 4 en este caso.

Al hacer esta consulta nos devuelve lo que esta marcado con la flecha (=>):

  - pedimos desde el indice 0 hasta el final:
  a.slice(0);
  => [1, 2, 3, 4, 5]

  - pedimos desde el indice 0 hasta el indice 1:
  a.slice(0, 1);
  => [1]

  - pedimos desde el indice 1 hasta el indice 3:
  a.slice(1, 3);
  => [2, 3]

  - pedimos desde el final, indice igual a "array.length - 1" o sea 5 - 1:
  a.slice(-1);
  => [5]

Es lo mismo que pedir  a.slice(4); pero nos puede servir cuando no conocemos con exactitud la cantidad de elementos totales en el array y necesitamos los ultimos n elementos.

 a.slice(-3);
  => [3, 4, 5]

Y como comprobamos que no es destructivo? con el siguiente ejemplo:

asignamos un array en x y el resultado de hacer el slice en y, luego los mostramos por pantalla.

var x = ["a", "b", "c"];
var y = x.slice(1, 2);

console.log(x);
=> ["a", "b", "c"]

console.log(y);
=> ["b"]

Splice

Array.prototype.splice (start, deleteCount [ , item1 [ , item2 [ , … ] ] ] );

Antes que nada tenemos que comentar que el método "splice" si es destructivo, o sea que modifica permanentemente el array original, y nos devuelve los valores eliminados.

Splice recibe varios argumentos, el primer parámetro es el indice de inicio, desde donde se realizará la operación.

El siguiente parametro nos sirve para indicar cuantos elementos se eliminaran desde el indice de inicio.

Los siguientes parametros son opcionales y cuando estan presentes "splice" los interpreta como nuevos elementos que se agregaran desde el indice de inicio.

Veamos todo esto más claramente con ejemplos:

Definimos un array a con [1, 2, 3, 4, 5]

  let a = [1, 2, 3, 4, 5];
  => [1, 2, 3, 4, 5]

para eliminar el último elemento, en este caso tiene el indice 4 podemos usar:
  a.splice(4)
  => [5]
 console.log(a);
  => [1, 2, 3, 4]

nos devuelve como salida un array con el elemento eliminado.

Si queremos agregar un elemento a la posicion 4 usariamos algo asi:
  a.splice(4, 0, 5)
  => []
 console.log(a);
  => [1, 2, 3, 4, 5]

en este caso agregamos el 5 en la posicion "4" y no eliminamos ningún elemento asi que le pasamos "0" como segundo parametro. Nos devuelve un array en blanco porque no se eliminó nada.

Ahora queremos agregar dos elementos a nuestro array, en este caso 6 y 7 desde el indice "5"
  a.splice(5, 0, 6, 7)
  => []
 console.log(a);
  => [1, 2, 3, 4, 5, 6, 7]

Como vimos en todos los ejemplos al mostrar el contenido de nuestro array "a", el uso de "splice" modifica nuestro array de origen, por lo que es destructivo.