JavaScript中复制新的数组与原数组删除某个值——不影响新复制的数组的方法详解

系列文章目录

---

---

前言

在JavaScript中，我们经常需要处理数组的复制和修改。本文将详细介绍如何在JavaScript中复制一个新的数组，并在原数组删除某个值的情况下，确保新复制的数组值不受影响。通过丰富的示例代码，你将掌握多种方法来实现这一需求。

---

一、使用slice()方法复制数组

在JavaScript中，可以使用数组的slice()方法来复制一个新的数组。slice()方法会返回一个新的数组，其中包含了原数组的所有元素。

示例代码：

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组：", originalArray); // 输出：[1, 2, 4, 5]
console.log("复制的新数组：", copiedArray); // 输出：[1, 2, 3, 4, 5]

在上述示例中，我们通过slice()方法复制了originalArray数组，并将其存储在copiedArray数组中。然后，我们通过splice()方法从原数组originalArray中删除了索引为2的元素，但是新复制的数组copiedArray并未受到影响，其值保持不变。

二、使用concat()方法复制数组

另一种复制数组的方法是使用concat()方法，它可以将多个数组连接成一个新数组。

示例代码：

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [].concat(originalArray);// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组：", originalArray); // 输出：[1, 2, 4, 5]
console.log("复制的新数组：", copiedArray); // 输出：[1, 2, 3, 4, 5]

在上述示例中，我们通过concat()方法将originalArray数组与一个空数组连接，从而复制了originalArray数组并存储在copiedArray数组中。同样，修改原数组并不影响新复制的数组。

三、使用扩展运算符(…)复制数组

ES6引入了扩展运算符(…)，可以用于快速复制数组。

示例代码：

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [...originalArray];// 修改原数组
originalArray.splice(2, 1); // 删除索引为2的元素console.log("原数组：", originalArray); // 输出：[1, 2, 4, 5]
console.log("复制的新数组：", copiedArray); // 输出：[1, 2, 3, 4, 5]

通过扩展运算符(…)，我们将originalArray数组中的所有元素复制到了copiedArray数组中。原数组的修改不会影响新复制的数组。

注意事项

使用上述方法复制数组时，只是复制了数组的引用而非数组本身。如果数组中的元素是引用类型，那么它们在新复制的数组中仍然是指向同一内存地址的。

总结

通过本文，你学会了在JavaScript中复制一个新的数组，并在原数组删除某个值的情况下，确保新复制的数组值不受影响的多种方法。你可以根据实际需求选择合适的方法来处理数组操作。

希望本文对你有所帮助。如果你有任何问题或疑问，欢迎留言讨论。感谢阅读！

需要系统源码或者BiShe加V
ID:talon712