Aclaremos la confusión en torno a los métodos slice (), splice () y split () en JavaScript

Los métodos integrados de JavaScript nos ayudan mucho durante la programación, una vez que los entendemos correctamente. Me gustaría explicar tres de ellos en este artículo: los slice(), splice()y split()métodos. Quizás porque su denominación es tan similar que a menudo se confunden, incluso entre desarrolladores experimentados.

Aconsejo a los estudiantes y desarrolladores junior que lean este artículo con atención porque estos tres métodos también se pueden solicitar en ENTREVISTAS DE TRABAJO.

Puede encontrar un resumen de cada método al final. Si lo prefiere, también puede ver la versión en video a continuación:

Así que comencemos ...

Matrices de JavaScript

En primer lugar, debe comprender cómo funcionan las matrices de JavaScript . Como en otros lenguajes de programación, usamos matrices para almacenar múltiples datos en JS. Pero la diferencia es que las matrices JS pueden contener diferentes tipos de datos a la vez.

A veces necesitamos realizar operaciones en esos arreglos. Luego usamos algunos métodos JS como slice () y splice () . Puede ver a continuación cómo declarar una matriz en JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Ahora declaremos otra matriz con diferentes tipos de datos. Lo usaré a continuación en ejemplos:

let array = [1, 2, 3, "hello world", 4.12, true];

Este uso es válido en JavaScript. Una matriz con diferentes tipos de datos: cadena, números y un booleano.

Rebanada ()

El método slice () copia una parte determinada de una matriz y devuelve esa parte copiada como una nueva matriz. No cambia la matriz original.

array.slice(from, until);

  • Desde: corte la matriz a partir de un índice de elemento
  • Hasta: corte la matriz hasta otro índice de elemento

Por ejemplo, quiero cortar los primeros tres elementos de la matriz anterior. Dado que el primer elemento de una matriz siempre está indexado en 0, empiezo a cortar "desde" 0.

array.slice(0, until);

Ahora esta es la parte difícil. Cuando quiero cortar los primeros tres elementos, debo dar el parámetro hasta como 3. El método slice () no incluye el último elemento dado.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Esto puede crear cierta confusión. Por eso llamo al segundo parámetro "hasta".

let newArray = array.slice(0, 3);   // Return value is also an array

Finalmente, asigno la matriz cortada a la variable newArray . Ahora veamos el resultado:

Nota importante: el método Slice () también se puede utilizar para cadenas.

Empalme ()

El nombre de esta función es muy similar a slice () . Esta similitud de nombres a menudo confunde a los desarrolladores. El método splice () cambia una matriz, agregando o quitando elementos de ella. Veamos cómo agregar y eliminar elementos con splice ( ) :

Eliminar elementos

Para eliminar elementos, debemos proporcionar el parámetro de índice y la cantidad de elementos que se eliminarán:

array.splice(index, number of elements);

El índice es el punto de partida para eliminar elementos. Los elementos que tienen unnúmero de índice más pequeño del índice dado no se eliminarán:

array.splice(2);  // Every element starting from index 2, will be removed

Si no definimos el segundo parámetro, todos los elementos a partir del índice dado se eliminarán de la matriz:

Como segundo ejemplo, doy el segundo parámetro como 1, por lo que los elementos que comienzan desde el índice 2 se eliminarán uno por uno cada vez que llamemos al método splice () :

array.splice(2, 1);

Después de la primera llamada:

Después de la segunda llamada:

Esto puede continuar hasta que no haya más índice 2.

Agregar elementos

Para agregar elementos, debemos darlos como el tercer, cuarto, quinto parámetro (depende de cuántos agregar) al método splice () :

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

A modo de ejemplo, que estoy añadiendo una y b en el principio de la matriz y puedo quitar nada;

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

Dividir ()

Los métodos Slice () y splice () son para matrices. Elmétodo split () se usa para cadenas . Divide una cadena en subcadenas y las devuelve como una matriz. Se necesitan 2 parámetros y ambos son opcionales.

string.split(separator, limit);

  • Separador: define cómo dividir una cadena ... por una coma, carácter, etc.
  • Límite: limita el número de divisiones con un número determinado.

El método split () no funciona directamente para matrices . Sin embargo, primero podemos convertir los elementos de nuestra matriz en una cadena, luego podemos usar el método split () .

Vamos a ver cómo funciona.

En primer lugar, convertimos nuestra matriz en una cadena con el método toString () :

let myString = array.toString();

Ahora dividamos myString por comas, limítelas a tres subcadenas y devuélvalas como una matriz:

let newArray = myString.split(",", 3);

Como podemos ver, myString está dividido por comas. Dado que limitamos la división a 3, solo se devuelven los primeros 3 elementos.

NOTA: Si tenemos un uso como este:array.split("");entonces cada carácter de la cadena se dividirá como subcadenas:

Resumen:

Rebanada ()

  • Copia elementos de una matriz
  • Los devuelve como una nueva matriz
  • No cambia la matriz original
  • Comienza a cortar desde ... hasta que se le proporcione el índice: array.slice (desde, hasta)
  • Slice no incluye el parámetro de índice "hasta"
  • Se puede utilizar tanto para matrices como para cadenas

Empalme ()

  • Se usa para agregar / eliminar elementos de la matriz
  • Devuelve una matriz de elementos eliminados
  • Cambia la matriz
  • Para agregar elementos: array.splice (índice, número de elementos, elemento)
  • Para eliminar elementos: array.splice (índice, número de elementos)
  • Solo se puede usar para matrices

Dividir ()

  • Divide una cadena en subcadenas
  • Los devuelve en una matriz
  • Toma 2 parámetros, ambos son opcionales: string.split (separador, límite)
  • No cambia la cadena original
  • Solo se puede usar para cuerdas

Hay muchos otros métodos integrados para matrices y cadenas de JavaScript, que facilitan el trabajo con la programación de JavaScript. A continuación, puede consultar mi nuevo artículo sobre los métodos de subcadena de JavaScript.

Si desea obtener más información sobre el desarrollo web, ¡no dude en seguirme en Youtube !

¡Gracias por leer!