Artículo original: Let’s clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript por Cem Eygi

Traducido por: Cristina Padilla

Los métodos incorporados de JavaScript son una gran ayuda a la hora de programar, una vez los hayamos entendido correctamente. Me gustaría explicar tres de ellos en este artículo: Los métodos slice(), splice() y split(). Ya que sus nombres son tan similares, pueden llevar a confusión, incluso entre desarrolladores expertos.

Recomiendo a los estudiantes y desarrolladores junior leer este artículo con atención, porque en las ENTREVISTAS DE TRABAJO se suele preguntar sobre estos tres métodos.

Puedes encontrar un resumen de cada método al final del artículo.

¡Vamos a por ello!

Arreglos de JavaScript

Primeramente, necesitas entender cómo funcionan los arreglos de JavaScript. Como en cualquier otro lenguaje de programación, utilizamos los arreglos de JavaScript para almacenar múltiples datos. Sin embargo, la diferencia en JavaScript es que los arreglos pueden contener diferentes tipos de datos a la vez.

A veces necesitamos realizar alguna tarea en esos arreglos. Para ello usamos los métodos slice() y splice(). Puedes ver debajo cómo declarar un arreglo en JavaScript:

let definicionDeArreglo = [];   // Declaración de arreglo en JS

Vamos a declarar ahora otro arreglo con diferentes tipos de datos. Lo haré con los siguientes ejemplos:

let arreglo = [1, 2, 3, "hola mundo", 4.12, true];

Este uso es válido en JavaScript. Un arreglo con diferentes tipos de datos: cadenas, números y un booleano.

Slice ( )

El método slice() copia una parte de un arreglo y devuelve esa copia como un nuevo arreglo. No cambia el arreglo original.

arreglo.slice(desde, hasta);

  • Desde: Corta un arreglo empezando desde el índice de un elemento
  • Hasta: Corta un arreglo hasta el índice de otro elemento

Por ejemplo, quiero cortar los tres primeros elementos del arreglo del ejemplo de arriba. Como el índice del primer elemento de un arreglo es 0, comenzaré cortando "desde" 0.

arreglo.slice(0, hasta);

Aquí viene la parte engorrosa. Si quiero cortar los tres primeros elementos, tengo que incluir hasta "hasta" el parámetro 3. El método slice() no incluye este último elemento.

arreglo[0] --> 1              // incluido
arreglo[1] --> 2              // incluido
arreglo[2] --> 3              // incluido
arreglo[3] --> "hello world"  // no incluido

Esto puede llevar a la confusión. Por eso, llamo al segundo parámetro hasta”.

let nuevoArreglo = arreglo.slice(0, 3);   // Devuelve también un arreglo

Finalmente, asigno el arreglo cortado a la variable nuevoArreglo. Veamos el resultado:

1*UECVH_JWknae04kVqTr1gg
Slice array and assign the members to newArray
nuevoArreglo es ahora un arreglo, y el original sigue siendo el mismo arreglo
newArray variable is an array now, and the original one remains the same
Nota importante: el método Slice( ) se puede usar también con cadenas.

Splice( )

El nombre de esta función es muy parecida a slice(). Esta similitud confunde a los desarrolladores a menudo. El método splice() cambia un arreglo añadiendo o eliminando elementos del mismo. Veamos cómo añadir y eliminar elementos con splice():

Eliminar elementos

Para eliminar elementos necesitamos indicar el índice y el número de elementos a eliminar:

arreglo.splice(índice, número de elementos);

El índice es el punto de comienzo para eliminar elementos. Los elementos que tengan un índice menor que el índice indicado no serán eliminados:

arreglo.splice(2);  // Cualquier elemento a partir del índice 2 será eliminado

Si no definimos el segundo parámetro, cualquier elemento a partir del índice indicado será eliminado del arreglo:

1*OGTbYRkU4C_5iMF5Sw9lBA
only index 0 and 1 are still there

En el segundo ejemplo, indico 1 como segundo parámetro, por lo que los elementos a partir del índice 2 serán eliminados uno a uno cada vez que llamemos el método splice().

arreglo.splice(2, 1);

1*uCZHAfeq46dG182y6oHrpg
Array at beginning

Después de la primera llamada:

1*gMh3g8RLvpAjMGxgfanB8w
3 is removed so “hello world” has now index 2

Después de la segunda llamada:

1*6YWBPU0UsPeoJTcwn8-gWg
This time, “hello world” is removed as index: 2

Esto puede seguir así hasta que no haya ningún índice 2.

Añadir elementos

Para añadir elementos, necesitamos indicar el tercer, cuarto, quinto parámetro (depende de cuántos añadamos) en el método splice():

arreglo.splice(índice, número de elementos, elemento, elemento);

Por ejemplo, añado a y b al comienzo del arreglo y no elimino nada:

arreglo.splice(0, 0, 'a', 'b');

1*E7TMFWTYGJDkuhG3VrTCKw
a and b added to the beginning of array, no elements removed

Split ( )

Los métodos slice( ) y splice( ) se usan con arreglos. El método split( ) se usa con cadenas. Divide una cadena en subcadenas y los devuelve como un arreglo. Toma 2 parámetros y ambos son opcionales.

cadena.split(separador, límite);

  • Separador: Define cómo separar una cadena... con coma, un símbolo, etc.
  • mite: Limita el número de cortes con el número indicado.

El método split() no funciona directamente con los arreglos. Sin embargo, podemos primero convertir los elementos de nuestro arreglo en una cadena y después usar el método split().

Veamos cómo funciona.

Primero convertimos nuestro arreglo en una cadena con el método toString():

let miCadena = arreglo.toString();

1*JW9u0vQSmZM6wQ540w3eTg

A continuación separamos miCadena con comas, lo limitamos a tres subcadenas y lo devolvemos como un arreglo:

let nuevoArreglo = miCadena.split(",", 3);

1*v53Ct4WVDXNsCjzDAtpc_g
Only the first 3 elements are returned

Como podemos ver, miCadena está separado por comas. Ya que hemos limitado el número de cortes a 3, se devolverán los primeros 3 elementos.

NOTA: Si usamos esto: arreglo.split("");  cada caracter de la cadena se dividirá en subcadenas:
1*s7RYTgCHVGzZKXDJZYyjaQ
Each character split one by one

Resumen:

Slice( )

  • Copia elementos de un arreglo
  • Los devuelve como un arreglo nuevo
  • No cambia el arreglo original
  • Comienza cortando desde... hasta el índice indicado: arreglo.slice (desde, hasta)
  • Slice no incluye el parámetro con el índice hasta
  • Se puede usar tanto con arreglos como con cadenas

Splice( )

  • Sirve para añadir/eliminar elementos de un arreglo
  • Devuelve un arreglo con elementos eliminados
  • Cambia el arreglo
  • Para añadir elementos: arreglo.splice(índice, número de elementos, elemento)
  • Para eliminar elementos: arreglo.splice(índice, número de elementos)
  • Solo se puede usar con arreglos

Split( )

  • Divide una cadena en subcadenas
  • Los devuelve en un arreglo
  • Toma 2 parámetros, ambos opcionales: cadena.split(separador, límite)
  • No modifica la cadena original
  • Solo se puede usar con cadenas

Existen muchos otros objetos estándar integrados para arreglos y cadenas de texto, que facilitan la programación en JavaScript.

Si quieres aprender más sobre desarrollo web, ¡sígueme en Youtube!

¡Gracias por leer mi artículo!