hand Inicio

JavaScript Arrays, cómo funciona slice y splice?

Te explico las diferencias entre slice y splice de JavaScript con arrays

Prólogo

Manipular arrays es algo terriblemente habitual

Cómo lo hacemos?

Hace años todo era .pop() y .shift(), pero hoy en día se busca tanto como se pueda la inmutabilidad, esto es, no modificar ningún array

En la práctica?

Que si queremos un subgrupo de ese array, en lugar de modificar el original creamos y trabajamos con una copia

Por qué?

Porque modificar "cosas" es una fuente de errores (de esos errores que luego te estás horas buscando), y si trabajas con React aún más

En React, a cada cambio hay un repaint, un rerenderizado de los componentes, si allí tienes una función que modifica un array, esa modificación ocurrirá con cada repaint con lo que definitivamente no verás en pantalla lo que esperas

Ojo, esto no quiere decir que no puedas modificar arrays, hay veces donde necesitarás hacerlo, pero de cualquier modo seguramente no quieras modificar un array sino una copia de ese array

La gran mayoría de operaciones con los arrays pasan por el slice

Que se parece mucho al splice

Diferencias?

Slice

slice nos devuelve una copia del array, que puede ser entero o una parte del mismo, y puede tener números negativos (entonces empieza por la derecha)

js
const arr = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr1 = arr.slice()
const new_arr2 = arr.slice(4)
const new_arr3 = arr.slice(0,4)
const new_arr4 = arr.slice(-2)

console.log(new_arr1) // ["😀", "😁", "😂", "🤣", "😎", '🔥','🔥','🔥']
console.log(new_arr2) // ["😎", '🔥','🔥','🔥']
console.log(new_arr3) // ["😀", "😁", "😂", "🤣"]
console.log(new_arr4) // ["🔥", "🔥"]

Splice

splice nos devuelve la parte del array, modificando el array original que se queda sin la parte que le hemos quitado

Como no es immutable tengo que estar generando nuevos arrays cada vez, ya que no puedo aplicarle el splice al mismo array repetidamente (se iría modificando cada vez)

js
const arr1 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr1 = arr1.splice()
console.log(new_arr1) // []

const arr2 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr2 = arr2.splice(0)
console.log(new_arr2) // ["😀", "😁", "😂", "🤣", "😎", "🔥", "🔥", "🔥"]

const arr3 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr3 = arr3.splice(2)
console.log(new_arr3) // ["😂", "🤣", "😎", "🔥", "🔥", "🔥"]

const arr4 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr4 = arr4.splice(0,2)
console.log(new_arr4) //["😀", "😁"]

const arr5 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr5 = arr5.splice(-4)
console.log(new_arr5) // ["😎", "🔥", "🔥", "🔥"]

const arr6 = ['😀','😁','😂','🤣','😎','🔥','🔥','🔥']
const new_arr6 = arr6.splice(-4, 2)
console.log(new_arr6) // ["😎", "🔥"]
draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

Escríbeme