Exploremos Slice (), Splice () y Spread Syntax (…) en JavaScript

Me encontré con este desafío de freeCodeCamp y me quedé atascado durante un tiempo pensando en cómo podría encontrar una manera de resolverlo. Ya mencionaron resolver usando Slice & Splice. En ese momento estaba confundido sobre cuándo usar Slice y cuándo usar Splice.

Aquí, voy a compartir cómo lo resolví con esos métodos.

Tanto Slice como Splice se utilizan para manipular matrices. Veamos como lo hacen.

Rebanada:

El método Slice toma 2 argumentos.

Primer argumento : especifica desde dónde se debe iniciar la selección.

Por ejemplo:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

Desde el primer índice (5) devolverá los elementos.

Segundo argumento : especifica en qué nivel debe estar el punto final. Si no puso esto entre paréntesis mientras llamaba al método slice, devolverá los elementos del índice inicial al final de la matriz.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

Si pones un número negativo mientras llamas, la selección se seleccionará desde el final de la matriz.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Nota: Slice siempre devuelve los elementos seleccionados de la matriz.

Slice no cambiará la matriz. La matriz permanece intacta. Vea el siguiente ejemplo:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

Incluso si realizó algunos cambios en la matriz, no lo afectará. Devolverá la matriz original tal como está al principio.

Empalme:

Puede tomar varios argumentos.

Eso significa,

1er argumento : especifica en qué posición se debe agregar / eliminar un nuevo elemento o un elemento existente. Si el valor es negativo, la posición se contará desde el final de la matriz.

Segundo argumento : El número de elementos que se eliminarán de la posición inicial. Si es 0, no se eliminará ningún elemento. Si no se pasa, eliminará todos los elementos de la posición inicial.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3er Argumento -> nth Argum ent: El valor de los elementos que desea agregar a la matriz.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Puede pensar que hemos agregado 'Hola', 'Medio' a la matriz, pero no se muestra aquí…. ¿Correcto?

Sí, hemos consolado al arr1.splice (1,2, 'Hola', 'Medio').

Nota:

  • El empalme devolverá los elementos eliminados de la matriz únicamente.
  • El empalme cambiará la matriz original
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Sintaxis de propagación:

Definición : Permite que un iterable, como una expresión de matriz o una cadena, se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o que una expresión de objeto se expanda en lugares donde cero o más Se esperan pares clave-valor (para objetos literales).

Tengamos un ejemplo para esto:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Quiero que esto esté en una sola matriz como [5, 1, 3, 6, 7, 8, 9].

Puedo usar esta sintaxis de propagación para resolver esto:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

Otro uso principal de Spread Syntax es al copiar una matriz:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

Agregué " 4 " a arr2 solamente. Pero también hizo el cambio a arr.

Podemos resolver esto usando la sintaxis de propagación de la siguiente manera ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Puede consultar la documentación de MDN para obtener más información sobre la sintaxis de propagación.

Entonces, echemos un vistazo al desafío.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

La condición principal de este desafío es "no debe alterar arr1 / arr2 después de que se haya ejecutado la función".

Entonces, creó una matriz de copia de arr2 y , usando el método de empalme , agregue el arr1 dentro de la copia de arr2 que se denomina matriz2Copy.

Conclusión final:

-> El método de rebanada

  • devolver los elementos seleccionados de la matriz
  • tomar 2 argumentos
  • no alterar la matriz original

-> El método de empalme

  • devolver los elementos eliminados de la matriz
  • tomar múltiples argumentos
  • altera la matriz original

Este es mi primer tutorial sobre codificación, ¡gracias por leer! Sus comentarios me ayudarán a mejorar mi habilidad de codificación y escritura.

¡Feliz codificación…!

Conéctate conmigo a través de Twitter