Cómo usar Splice en JavaScript: comprensión del método de matriz

Splice es un método de matriz de Javascript que cambia el contenido de una matriz eliminando o reemplazando un elemento existente o agregando un nuevo elemento en su lugar.

En esta guía, explicaré cómo usar el método de empalme Array de Javascript. Los desarrolladores de cualquier nivel pueden leer y comprender este artículo.

Comprender el método de matriz (empalme)

Si echamos un vistazo al sitio web de MDN, nos daremos cuenta de que el constructor de prototipos de matriz de Javascript, que nos permite agregar nuevos métodos y propiedades al objeto Array(), tiene muchos métodos y el empalme es uno de ellos.

Array.prototype.splice()

Sin embargo, si tratamos de usar este mismo método en el prototipo de cadena, como el ejemplo a continuación;

const strings = 'learn'

strings.splice()

Sin embargo, recibiríamos un error de tipo que dice:

Uncaught TypeError: strings.splice is not a function

Es importante saber que splice y slice no son lo mismo. El método de corte no muta ni cambia sus datos, pero el método de empalme sí y es por eso que el método de empalme no se puede usar en cadenas: las cadenas son inmutables.

Cómo usar el método de empalme de matriz de Javascript

Usar el método de matriz de Javascript de empalme es fácil, pero la sintaxis a veces se usa incorrectamente.

Puede utilizar el método de empalme en estos pasos

arr.splice(start, deleteCount, item1, ..., itemN)

La propiedad splice() toma algunos parámetros, estos parámetros se utilizan para determinar el comportamiento de cualquier matriz a la que se haya llamado el método de empalme.

Son los siguientes:

• comienzo
• eliminarCuenta
• Elementos

comienzo

Este es solo el índice en el que queremos que nuestra matriz comience el cambio, no se eliminará ningún elemento si el índice del elemento es mayor que la longitud de la matriz. Pero agrega un argumento al final de la matriz si el índice es menor que la longitud de la matriz.

eliminarCuenta

Este es un parámetro opcional que denota la cantidad de elementos que se eliminarán de la matriz, para eliminar o eliminar un elemento, el parámetro de inicio debe estar presente.

Si no incluye este parámetro, o si tiene el mismo valor que la longitud de la matriz o es incluso mayor que la longitud de la matriz, se eliminarán todos los elementos desde el parámetro de inicio hasta el último elemento de la matriz. Tenga en cuenta que este parámetro debe incluirse si hay un parámetro de elemento presente.

Elementos

Este también es un parámetro opcional que le indica el elemento que se agregará a la matriz

Si no indicamos los elementos, el método splice() de la matriz Javascript eliminará los elementos de la matriz. Esto devolvería una matriz vacía.

casos de uso

Ahora que hemos entendido qué son los parámetros, intentemos ver casos de uso y ejemplos de cómo se puede implementar esto al escribir nuestro programa.

Eliminar cero elementos antes de un índice especificado

Si queremos agregar un elemento sin eliminar ningún elemento, simplemente especificamos el índice, y no eliminaría nada, pero comenzaría antes del índice especificado.

Echemos un vistazo al siguiente ejemplo:

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

En el código anterior, intentamos eliminar un elemento en el índice 3 (mandarín), lo que significa que tan pronto como llegue al índice 3, cualquier elemento que encuentre se eliminará sin reemplazarlo con ningún elemento.

También podemos eliminar un elemento y agregar otros elementos.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

De manera similar, tan pronto como lleguemos al índice 3, lo que sea que encuentre, en este caso, 'orquesta', se eliminará y agregará otros más nuevos ('sax'). El código anterior muestra cómo se agregó 'tambor' a la matriz. . A partir del índice 2, el cero le dice que no elimine nada, si tuviéramos 1 allí, eliminaría 1 elemento y agregaría el elemento que queremos, y así sucesivamente.

Eliminar uno o más elementos en un índice específico

Digamos que queríamos eliminar un elemento o elemento sin agregar uno nuevo a la matriz, simplemente podríamos escribirlo como el fragmento de código anterior

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

Podemos comenzar en cualquier índice y eliminar tantos elementos como queramos.

Eliminar todos los elementos a partir de un índice especificado

Podemos eliminar todos los elementos de la matriz a partir del índice que queramos. Digamos, por ejemplo, que queremos eliminar todo a partir del índice 1. Una vez que llegue al índice 1, se eliminarán todos los elementos que comiencen desde el índice 1.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

Este fragmento de código intenta eliminar todos los elementos a partir del índice 1. Donde el índice 1 es 'payaso' en la matriz. Dado que el conteo comienza desde 0, esto devolvería una nueva matriz. que contiene un solo elemento que es 'ángel'. Esto se debe a que durante el conteo, el 'ángel' parece estar en el índice 0 y el conteo comienza en el índice 1. El índice 0 se omitiría y devolvería ese resultado.

comida para llevar

Si necesita realizar una tarea en una matriz y no desea que se cambie la matriz original, se debe evitar el método splice() de la matriz Javascript porque cambia sus datos.

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

En el ejemplo anterior. Antes de que se llamara al método de la matriz Javascript de empalme en la variable beforeSplice. Teníamos 3 elementos, pero después de aplicar el método, devuelve 2 elementos. Este método ha cambiado los datos. A veces esto no es lo que queremos. Pero si lo único que desea hacer es eliminar elementos o agregar un elemento, es perfecto.

Nos vemos en la próxima.