Este titulo podría haber sido "Como no confundirse en Javascript con los métodos splice y slice", pero probablemente no pudiera recordar la diferencia entre los dos.

Así que espero que este truco nos ayude a ambos en el futuro:

S (p) lice = Slice + (p) => Slice + in (p) lace

Array.prototype.slice()

Array.prototype.slice(), es usado para retornar la copia de un arreglo desde el indice del inicio   hasta el penúltimo final, excluyendo el final.

Como el nombre sugiere, esto es usado para rebanar los elementos y enviarlos fuera del arreglo a uno nuevo. Pero a diferencia de rebanar un pastel, rebanar el actual arreglo no lo modifica (pastel infinito!).

arr.slice(inicio, [Final])
Fragmento de Javascript

Reglas

  1. Un nuevo arreglo es retornado y el original no es modificado.
  2. Si, el final es omitido, el final llega a ser el último elemento.
  3. Si, el inicio es menor que 0, los elementos son contados en reversa osea desde el final.
const pastelInfinito = ['?','?','?','?','?','?']

let myPiezaDePastel = pastelInfinito.slice(0,1) // ['?']
let miDoblePiezaDePastel = pastelInfinito.slice(0,2) // (2) ["?", "?"]
console.log(pastelInfinito) //['?','?','?','?','?','?']
Fragmento de Javascript

Como tu puedes mirar pastelInfinito no esta modificado.

Array.prototype.splice()

Splice realiza operaciones en el lugar, lo que significa que modifica el arreglo existente.

Además de eliminar elementos, splice también se usa para añadir elementos. Splice es el "rebanado" del pastel en el mundo real:

arr.splice(inicio, [numeroElemEliminar, elemParaInsertar1, elemParaInsertar2, ...])
Fragmento de Javascript

Reglas

  1. Operaciones son realizadas en el mismo lugar
  2. Un arreglo es retornado con los elementos borrados.
  3. Si, el inicio es menor que 0, los elementos son contados en reversa osea desde el final.
  4. Si numeroElemEliminar  es omitido, los elementos hasta de inicio hasta el final seran borrados
  5. Si, los elementos a insertar tales como elemParaInsertar1 son saltados, los elementos solamente seran removidos. 
const pastel = ['?','?','?','?','?','?'];
let miPiezaDePastel = pastel.splice(0, 1) // ["?"]
console.log(pastel) // (5) ["?", "?", "?", "?", "?"]

let miDoblePiezaDePastel = pastel.splice(0,2) //(2) ["?", "?"]
console.log(pastel) //(3) ["?", "?", "?"]
Fragmento de Javascript

Aquí pastel esta modificado y reducido en tamaño.

Ejemplos de Código

const miArreglo  = [1,2,3,4,5,6,7] 

console.log(miArreglo.slice(0))       // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(miArreglo.slice(0, 1))    // [ 1 ]
console.log(miArreglo.slice(1))       // [ 2, 3, 4, 5, 6, 7 ]
console.log(miArreglo.slice(5))       // [ 6, 7 ]
console.log(miArreglo.slice(-1))      // [ 7 ]
console.log(miArreglo)                // [ 1, 2, 3, 4, 5, 6, 7 ]



const segundoArreglo = [10, 20, 30, 40, 50]

console.log(segundoArreglo.splice(0, 1))   // [ 10 ] : elimina 1 elemento al inicio del índice 0
console.log(segundoArreglo.splice(-2, 1))  // [ 40 ] : elimina 1 elemento al inicio del índice desde el final-2 
console.log(segundoArreglo)                // [ 20, 30, 50 ]
console.log(segundoArreglo.splice(0))      // [ 20, 30, 50 ] : Elimina todos los elementos iniciando desde el índice 0
console.log(segundoArreglo)                // []
console.log(segundoArreglo.splice(2, 0, 60, 70)) // [] : elimina 0 elementos iniciando desde del índice 2 (no existe, así que el valor por defecto es 0) entonces inserta 60, 70
console.log(segundoArreglo)                // [60, 70]
Fragmento de Javascript

En Resumen

Usa splice si el original arreglo necesita ser modificado o los elementos necesitan ser añadidos.

Usa slice para remover elementos, si el original arreglo no debería ser modificado.

Traducido del articulo JavaScript Array Slice vs Splice: the Difference Explained with Cake de Shruti Kapoor