¿Cómo empalmar una array sin mutar la array original?

En este artículo, extraeremos el rango de elementos de una array sin mutarla. Aquí, mutación significa el cambio de la array original. Hay una función incorporada que está hecha para la extracción de elementos de la array, pero muta la array. 

Cómo funciona el método .splice(): El método splice se usa para extraer el rango de elementos de una array. Se necesitan tres argumentos index , número de elementos para eliminar, una array de elementos para agregar.El índice (primer parámetro) es obligatorio y el resto de parámetros son opcionales. Este método devuelve una nueva array después de eliminar los elementos, pero también muta la array original. El siguiente ejemplo explica cómo muta el original.

<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
// Extracting three items from the index 0
let extractedArr = originalArr.splice(0, 3);
  
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)</script>

Producción:

Extracted Array

["c", "cpp", "java"]

Original Array

["python", "javascript", "kotlin"]

Aquí puede ver que la array original está mutada por el método de empalme. Implementaremos la misma funcionalidad que proporciona el método de empalme pero sin mutar la array original. Aquí discutiremos dos enfoques para lograr esta funcionalidad, el primero usa la copia de la array y el segundo enfoque usa el método de filtro .

Enfoque 1: usar la copia de la array. En este enfoque, crearemos una copia de la array original y luego usaremos el método de empalme para extraer los elementos. Para crear la copia o el clon de la array, podemos usar el operador de extensión o el método de empalme.

Pasos :

• Cree el clon de la array utilizando el operador de extensión o el método de división.
• aplique el método de empalme en la array clonada y devuelva la array extraída

Ejemplo:

<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
// Creating the clone of the array
let cloneArr = originalArr.slice(0);
  
// Or you can use spread Operator
// let cloneArr = [...originalArr]
  
// Extract the array using splice method
let extractedArr = cloneArr.splice(0, 4);
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)</script>

Salida: Aquí la array original no está mutada. Pero no es una buena práctica aplicar este enfoque en arreglos más grandes porque su consumo de espacio aumenta cuando creamos el clon del arreglo. 

Extracted Array
["c", "cpp", "java", "python"]

Original Array
["c", "cpp", "java", "python", "javascript", "kotlin"]

Enfoque 2: Usando el método de filtro. En este enfoque, utilizamos el método de filtro. el método de filtro se usa para filtrar el elemento de una array después de aplicarle alguna condición. Este método no muta la array.

Sintaxis:

Array.filter((item, index)=>{ return index >= start 
&& index < howMany + start })

Ejemplo 1:

<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
let start = 1;
let howMany = 3;
  
let extractedArr = originalArr.filter((item, index)=>{
  return index >= start && index < howMany + start ;
})
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(extractedArr)
  
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)
  
</script>

Ejemplo 2: en forma de prototipo.

<script>// Creating an array 
let originalArr = ["c", "cpp", "java", "python", "javascript", "kotlin"];
  
Array.prototype.mySplice = function(start, howMany){
  return this.filter((item, index)=>{
    return index >= start && index < howMany + start ;
  })
}
  
// Printing the Extracted array
console.log("Extracted Array")
console.log(originalArr.mySplice(1, 3))
  
// Printing the original Array
console.log("Original Array")
console.log(originalArr)
</script>

Producción:

Extracted Array
["cpp", "java", "python"]

Original Array
["c", "cpp", "java", "python", "javascript", "kotlin"]