Array.splice y Array.slice en JavaScript

Hola Habr! Les presento la traducción del artículo "Array.splice y Array.slice en JavaScript" de Kunal Tandon.

Simplemente debe usar las funciones anteriores disponibles en el prototipo de matriz de JavaScript. Pero se ven tan similares que a veces puedes confundirte entre ellos.

Diferencias clave

Array.splice modifica la matriz original y devuelve una matriz que contiene los elementos eliminados.

Array.slice no modifica la matriz original. Simplemente devuelve una nueva matriz de elementos, que es un subconjunto de la matriz original.

Array.splice

Splice se utiliza para modificar el contenido de una matriz, lo que incluye eliminar elementos, reemplazar elementos existentes o incluso agregar nuevos elementos a esta matriz.

Cuando se usa la función de empalme, la matriz original se actualiza.

Considere la siguiente matriz:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice con sintaxis

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Eliminar elementos

Para eliminar elementos de una matriz, escribimos:

 var deleItems = arr.splice (3, 2); 

Esto eliminará los dos elementos que comienzan en el índice 3 y devolverá la matriz remota. Como resultado, obtenemos:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Agregar nuevos elementos

Para agregar nuevos elementos a la matriz, escribimos:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

A partir del segundo elemento de la matriz, se agregarán los números 100 y 101. Los valores finales serán los siguientes:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Modificar un elemento existente

Podemos modificar con dificultad un elemento existente en la matriz usando el empalme para eliminar el elemento por su número de índice e insertar un nuevo elemento en su lugar.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Para reemplazar 3 con 100, escribimos:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

Obtenemos los siguientes valores para arr y arr2 después de ejecutar el fragmento de código anterior:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

Si bien el empalme también puede insertar y actualizar elementos de la matriz, la función de división solo se usa para eliminar elementos de la matriz.
Solo podemos eliminar elementos de la matriz utilizando la función de división

Sintaxis de Array.slice

arr.slice (startIndex, endIndex);

startIndex: el índice inicial del elemento para la nueva matriz, que deberíamos obtener en la nueva matriz
startIndex.endIndex (opcional) es el índice final al que se debe realizar el corte, sin incluir este elemento.

Considere la siguiente matriz:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Para obtener una parte de la matriz de los valores [2, 3, 4, 5], escribimos:

 var slicedArr = arr.slice (2, 6); 

Tenga en cuenta que aquí especificamos el segundo argumento 6, no 5. Después de ejecutar el código anterior, obtenemos la siguiente matriz:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

La variable arr permanece sin cambios después de que se ejecutó la instrucción de división, mientras que la instrucción de empalme actualizó la matriz original.

Entonces, si queremos actualizar la matriz original, usamos la función de empalme, pero si solo necesitamos una parte de la matriz, usamos la división.