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

在这篇文章中，我们将讨论如何从数组中提取一定范围的元素，而不改变原始数组。在这里，改变意味着对原始数组进行修改。有一个内置函数可用于从数组中提取元素，但它会改变数组。

splice() 方法如何工作？

splice() 方法用于从数组中提取一定范围的元素。它接受三个参数，分别是索引（第一个参数）、要删除的元素数量（可选参数），以及要追加的元素数组（可选参数）。这个方法会在删除元素后返回一个新的数组，并改变原始数组。

示例： 下面的示例展示了它是如何改变原始数组的。

// 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: " + extractedArr);
 
// Printing the original Array
console.log("Original Array: " + originalArr);

输出

Extracted Array: c,cpp,java
Original Array: python,javascript,kotlin

我们可以通过以下方法来实现：

• 使用数组的副本
• 使用filter方法
• 使用slice()方法

方法1：使用数组的副本

在这种方法中，我们将创建原始数组的副本，然后使用splice方法来提取元素。可以使用spread操作符或splice方法来创建数组副本或克隆。

步骤：

• 使用spread操作符或slice方法创建数组的副本。
• 对克隆的数组应用splice方法，并返回提取的数组。

示例：

// 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方法

在这种方法中，我们使用JavaScript的filter方法。filter方法用于在应用某种条件后过滤出数组的元素。该方法不会改变数组。

语法：

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

示例1：

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

输出

Extracted Array
[ 'cpp', 'java', 'python' ]
Original Array
[ 'c', 'cpp', 'java', 'python', 'javascript', 'kotlin' ]

示例2： 在原型形式中

// 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' ]

方式3： 使用 slice()方法

Javascript arr.slice() 方法返回一个包含所实施的数组的一部分的新数组。原始数组保持不变。

示例：

let arr = [10, 20, 30, 40, 50, 
           60, 70, 80, 90, 100];
let clonedArray = arr.slice(0);
let splicedArray = clonedArray.splice(1, 6);
console.log(arr);
console.log(splicedArray);

输出

[
  10, 20, 30, 40,  50,
  60, 70, 80, 90, 100
]
[ 20, 30, 40, 50, 60, 70 ]