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)
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)
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) // ["😎", "🔥"]
Lista de correo: escribo algo de tanto en cuanto