Entendamos los métodos: slice(), splice() y split() en JavaScript

El valor total de los métodos de JavaScript incorporados solo se puede apreciar si se comprende correctamente cómo funcionan. En este artículo, cubriremos tres métodos:  slice() ,  splice()  y  split() . Incluso los desarrolladores experimentados a menudo los confunden, quizás porque los tres nombres son muy similares.

Estudiantes y desarrolladores novatos: lea este artículo detenidamente; es posible que le pregunten estos tres métodos en una entrevista. 

Al final encontrará un resumen de información sobre los tres métodos. Empecemos.

Matrices en JavaScript

Primero debe comprender cómo funcionan las matrices de JavaScript. Al igual que otros lenguajes de programación, las matrices se utilizan para almacenar múltiples unidades de datos. La diferencia es que  las matrices de JavaScript pueden contener varios tipos de datos al mismo tiempo .

Para trabajar con dichas matrices, necesitamos métodos de JavaScript: por ejemplo,  slice()  y  splice() . Puedes crear una matriz como esta:

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

Ahora vamos a crear otra matriz con datos de diferentes tipos:

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

En JavaScript, puede crear matrices con diferentes tipos de datos: números, cadenas y booleanos.

Nota: La palabra clave se  let usa en ES6. Puede encontrar información detallada sobre ES6  aquí .

slice( )

El método slice()  copia una parte dada de una matriz y devuelve esa parte copiada como una nueva matriz. La matriz original no se modifica .

array.slice(from, until);

• From:  Cortar la matriz a partir  de  este elemento
• until:  Corta la matriz hasta este elemento

Por ejemplo, quiero dividir los primeros tres elementos de la matriz mencionada anteriormente. El primer elemento de una matriz siempre es 0, por lo que uso 0 como el parámetro from  .

array.slice(0, until);

Entonces comienza la parte más difícil. Quiero dividir los primeros tres elementos, así que especifico 3  como el parámetro hasta 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

¡Aquí puedes confundirte! Es por eso que declaré  "until" .

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

Finalmente, creo una nueva matriz y la vinculo a la variable newArray . Veamos el resultado:

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

splice()

El nombre de este método es similar a  slice():  los desarrolladores a menudo se confunden con nombres tan similares. El método  splice()  agrega y elimina elementos de un arreglo,  cambiándolo. Veamos cómo agregar y eliminar elementos usando el método  splice() :

Quitar elementos

Para eliminar elementos, ingrese el elemento para comenzar ( índice)  y el número de elementos para eliminar  (número de elementos) :

array.splice(index, number of elements);

El parámetro  Índice  es el  punto de partida  para eliminar elementos. Los elementos con un número de secuencia  inferior al  parámetro de índice especificado no se eliminarán:

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

Si no especifica el segundo parámetro, se eliminarán todos los elementos desde el parámetro de índice especificado hasta el final:

Como otro ejemplo, especifiqué 1 como segundo parámetro: por lo tanto, cada vez que se repite el método splice()  , eliminará un elemento, comenzando por el segundo:

array.splice(2, 1);

Splice() aplicado una vez:

Splice() aplicado dos veces:

Así que puedes continuar hasta que no haya elementos con un número de serie de 2.

Agregar elementos

Para agregar elementos usando  splice() , debe ingresarlos como el tercer, cuarto y quinto elemento (dependiendo de cuántos elementos necesite agregar):

array.splice(index, number of elements, element, element);

Como ejemplo, agreguemos los elementos  a  y  b  al principio de la matriz:

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

split()

Los métodos  Slice()  y  splice()  se utilizan para arreglos. El método split() se usa para  cadenas . Divide la cadena en subcadenas y las devuelve como una matriz. Este método tiene 2 parámetros, ambos  opcionales .

string.split(separator, limit);

• Separador:  determina cómo se dividirá la cadena en subcadenas: coma, signo, etc.
• Límite:  limita el número de subcadenas a un número dado

El método split()  no funciona directamente con  arreglos . Sin embargo, primero puede convertir los elementos de la matriz en cadenas y luego aplicar el método split() .

Vamos a ver cómo funciona.

Primero, convertimos la matriz en una cadena usando el método toString() :

let myString = array.toString();

Luego dividimos la cadena  myString con  comas  y limitamos el número de subcadenas a  tres. Luego convertimos las cadenas en una matriz:

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

Por lo tanto, los elementos de la matriz  myString están  separados por comas. Establecemos un límite de 3 subcadenas, por lo que los primeros 3 elementos se devuelven como una matriz.

Nota:  Con el comando  array.split(""); , todos los caracteres de una cadena se pueden dividir en subcadenas.

Resumen:

slice( )

• Copia elementos de una matriz
• Los devuelve en una nueva matriz.
• No cambia la matriz original.
• Corta una matriz utilizando los parámetros desde y hasta:  array.slice (desde, hasta)
• No incluye el parámetro especificado en  "hasta"
• Se utiliza tanto en matrices como en cadenas.

splice()

• Agrega y elimina elementos de una matriz
• Devuelve una matriz de elementos eliminados.
• Cambia la matriz
• Adición de elementos:  array.splice(índice, número de elementos, elemento)
• Eliminando elementos:  array.splice(índice, número de elementos)
• Solo se usa en arreglos

split()

• Dividir cadenas en subcadenas
• Los devuelve como una matriz.
• 2 parámetros, ambos opcionales:  string.split(separator, limit)
• No cambia la cadena original.
• Solo se usa en cuerdas

JavaScript tiene muchos otros métodos integrados para trabajar con matrices y cadenas. Si aprende a usarlos, la programación se vuelve mucho más fácil.

Fuente:

https://elsolitario.org/post/entendamos-los-metodos-slice-splice-y-split-en-javascript/