hand Inicio

SERVICIOS

Salir

nochedΓ­a

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

JavaScript Arrays, cΓ³mo funciona slice y slice?

200 palabras
1 minutos
April 23, 2020
blogjavascript

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

  1. PrΓ³logo
  2. Slice
  3. Splice

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) // ["πŸ”₯", "πŸ”₯"]

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()
// []
const arr2 = ['πŸ˜€','😁','πŸ˜‚','🀣','😎','πŸ”₯','πŸ”₯','πŸ”₯']
const new_arr2 = arr2.splice(0)
// ["πŸ˜€", "😁", "πŸ˜‚", "🀣", "😎", "πŸ”₯", "πŸ”₯", "πŸ”₯"]
const arr3 = ['πŸ˜€','😁','πŸ˜‚','🀣','😎','πŸ”₯','πŸ”₯','πŸ”₯']
const new_arr3 = arr3.splice(2)
// ["πŸ˜‚", "🀣", "😎", "πŸ”₯", "πŸ”₯", "πŸ”₯"]
const arr4 = ['πŸ˜€','😁','πŸ˜‚','🀣','😎','πŸ”₯','πŸ”₯','πŸ”₯']
const new_arr4 = arr4.splice(0,2)
//["πŸ˜€", "😁"]
const arr5 = ['πŸ˜€','😁','πŸ˜‚','🀣','😎','πŸ”₯','πŸ”₯','πŸ”₯']
const new_arr5 = arr5.splice(-4)
// ["😎", "πŸ”₯", "πŸ”₯", "πŸ”₯"]
const arr6 = ['πŸ˜€','😁','πŸ˜‚','🀣','😎','πŸ”₯','πŸ”₯','πŸ”₯']
const new_arr6 = arr6.splice(-4, 2)
// ["😎", "πŸ”₯"]
QuΓ© tal la entrada?
πŸ‘Œ Bien πŸ™ŒπŸ™Œ
πŸ‘ Bien, pero algunas cosas podrΓ­an explicarse mejor 😬
πŸ€·β€β™‚οΈ Da por sentadas demasiadas cosas πŸ˜’
πŸ€·β€β™‚οΈ A ver, hay poca chicha 😬
πŸ€·β€β™‚οΈ Los ejemplos no son muy claros πŸ™‡β€β™‚οΈ
πŸ€·β€β™‚οΈ No se entiende, estΓ‘ mal escrito πŸ‘Ž
✍️ Hay errores, revΓ­salo en cuanto puedas πŸ™

MΓ‘s entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]