hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

JavaScript Arrays, c贸mo funciona slice y splice?

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)
console.log(new_arr1) // ["馃榾", "馃榿", "馃槀", "馃ぃ", "馃槑", '馃敟','馃敟','馃敟']
console.log(new_arr2) // ["馃槑", '馃敟','馃敟','馃敟']
console.log(new_arr3) // ["馃榾", "馃榿", "馃槀", "馃ぃ"]
console.log(new_arr4) // ["馃敟", "馃敟"]
Ver en CodeSandBox

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) // ["馃槑", "馃敟"]
Ver en CodeSandBox

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 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]