在 JavaScript 中，当我们创建一个数组并将其复制到另一个变量时，更改原始数组也会影响副本。这是因为 JavaScript 中的数组存储方式与其他编程语言不同。
数组是对象
在 JavaScript 中，数组实际上是一种特殊类型的对象。它们可以包含任何类型的数据，包括字符串、数字、布尔值等。数组项的索引被视为属性名，并且可以使用点号或方括号来访问它们。
const myArray = ['apple', 'banana', 'orange']; console.log(myArray[0]); // 输出：'apple' console.log(myArray.length); // 输出：3
在此示例中，myArray 是一个包含三个字符串的数组。我们可以使用方括号 [] 来访问数组项及其索引。我们还可以使用 length 属性查看数组中有多少项。
副本是引用
当我们通过赋值操作符将一个数组复制到另一个变量时，我们实际上是创建了一个指向原始数组的新引用。这意味着我们现在有两个变量，它们都指向同一个数组对象。
const originalArray = ['apple', 'banana', 'orange'];
const copyArray = originalArray;
originalArray.push('grape');
console.log(copyArray); // 输出：['apple', 'banana', 'orange', 'grape']在上面的示例中，我们创建了一个包含三个字符串的原始数组，并将其复制到 copyArray 变量。当我们向 originalArray 添加一个新项时，这也会影响 copyArray。
如何避免更改副本
为了避免更改副本，我们需要使用一些技巧来确保我们实际上复制了原始数组的内容而不是引用。以下是一些方法：
1. 使用 Array.from()
Array.from() 方法可以从类似数组或可迭代对象中创建新的数组实例。它接受一个可选的映射函数，该函数用于在每个元素上执行转换操作。
const originalArray = ['apple', 'banana', 'orange'];
const copyArray = Array.from(originalArray);
originalArray.push('grape');
console.log(copyArray); // 输出：['apple', 'banana', 'orange']在此示例中，我们使用 Array.from() 创建了一个新的数组实例，其中包含与原始数组相同的项。当我们向 originalArray 添加一个新项时，copyArray 不会受到影响。
2. 使用展开运算符
展开运算符（...）可以将数组拆分为单独的参数，然后重新组合成一个新的数组。这使我们可以轻松地创建一个副本数组。
const originalArray = ['apple', 'banana', 'orange'];
const copyArray = [...originalArray];
originalArray.push('grape');
console.log(copyArray); // 输出：['apple', 'banana', 'orange']在此示例中，我们使用展开运算符（...）创建了一个新的数组实例，其中包含与原始数组相同的项。当我们向 originalArray 添加一个新项时，copyArray 不会受到影响。
结论
在 JavaScript 中，更改数组会影响副本是因为数组是对象并且副本是引用。要避免这种情况，请使用 Array.from() 或展开运算符来创建数组副本。这将确保我们复制的是原始数组的内容而不是引用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24591