如何在不改变原始数组的情况下拼接数组？

在本文中，我们将从数组中提取元素范围而不对其进行变异。这里，mutation 是指改变原始数组。有一个内置函数用于从数组中提取元素，但它会改变数组。

.splice() 方法的工作原理： splice 方法用于从数组中提取元素范围。它需要三个参数index ，要删除的项目数，要附加的项目数组。 索引（第一个参数）是必需的，其余参数是可选的。此方法在删除项目后返回一个新数组，但它也会改变原始数组。下面的例子解释了它是如何改变原始的。

Javascript

// 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)

输出：

Extracted Array

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

Original Array

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

在这里你可以看到原始数组被 splice 方法改变了。我们将实现与 splice 方法提供的功能相同的功能，但不会改变原始数组。在这里，我们将讨论实现此功能的两种方法，第一种是使用数组的副本，第二种方法是使用过滤器方法。

方法一：使用数组的副本。在这种方法中，我们将创建原始数组的副本，然后使用拼接方法提取项目。要创建数组的副本或克隆，我们可以使用扩展运算符或拼接方法。

脚步 ：

• 使用扩展运算符或切片方法创建数组的克隆。
• 对克隆的数组应用拼接方法并返回提取的数组

例子：

Javascript

// 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)

输出：这里原始数组没有发生突变。但是在更大的数组中应用这种方法并不是一个好习惯，因为当我们创建数组的克隆时，它的空间消耗会增加。

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

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

方法2：使用过滤方法。在这种方法中，我们使用过滤器方法。 filter 方法用于在对其应用一些条件后过滤掉数组的元素。此方法不会改变数组。

句法 ：

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

示例 1：

Javascript

// 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)
  

示例 2：原型形式。

Javascript

// 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)

输出：

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

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