在javascript中复制数组不能直接用等号赋值，因为数组是引用类型，直接赋值只会复制内存地址，导致新旧数组相互影响。1. 使用展开运算符 […originalarray] 是最简洁现代的浅拷贝方法；2. array.from(originalarray) 和 slice() 也能实现浅拷贝，效果类似；3. concat() 通过空数组连接原数组实现复制；这些方法均为浅拷贝，即新数组中的引用类型元素仍共享原数组的引用，修改嵌套对象会影响原数组。4. 深拷贝需用 json.parse(json.stringify()) 或递归函数（如lodash的 _.clonedeep()），以彻底分离所有嵌套结构。选择方法应根据是否需要深拷贝及数据复杂度决定，性能差异在常规场景下可忽略，推荐优先考虑代码可读性与适用性。
在JavaScript里，如果你想复制一个数组，可不是简单地用等号赋值就能搞定的。你需要明确地告诉JavaScript，你要一个新的数组，并且把原数组里的所有元素都搬过来。这样做才能确保你修改新数组时，不会意外地影响到原来的那个。
复制数组的方法有很多，每种都有它适用的场景和一些需要注意的小细节。我个人最常用的，也是现在前端开发里非常流行且简洁的方式，就是使用展开运算符（spread syntax）。比如，你有一个
originalArray
，想复制一份，直接
const newArray = [...originalArray];
就可以了。这行代码的背后，是JavaScript创建了一个全新的数组，然后把
originalArray
里的每一个元素“展开”并填充到这个新数组里。
当然，还有其他一些经典方法：
立即学习“Java免费学习笔记（深入）”；
-
Array.from()
：这个方法非常灵活，它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。对于数组来说，const newArray = Array.from(originalArray);
效果和展开运算符类似，同样是创建了一个新数组。
-
slice()
：这是数组原型上的一个方法，当不带任何参数调用时，originalArray.slice()
会返回原数组的一个浅拷贝。
const newArray = originalArray.slice();
简单直接，也是很多老项目里常见的写法。
-
concat()
：虽然concat
主要用于连接数组，但当它与一个空数组结合时，也能实现复制的效果。
const newArray = [].concat(originalArray);
同样会返回一个新数组，包含原数组的所有元素。
这些方法都属于“浅拷贝”，这意味着如果你的数组里嵌套了对象或其他数组，那么这些嵌套的引用类型数据在复制后，新旧数组仍然会共享同一个引用。这一点，在实际开发中非常重要，也是很多初学者容易踩坑的地方。
为什么直接赋值不行？理解引用与值类型
你可能会好奇，为啥不能直接
let newArr = oldArr;
呢？这其实是JavaScript数据类型的一个核心概念在作祟。在JavaScript中，数据类型大致分为两类：基本类型（如字符串、数字、布尔值、null、undefined、Symbol、BigInt）和引用类型（主要是对象、数组和函数）。
当你对一个基本类型变量进行赋值时，比如
let a = 10; let b = a;
，
b
会得到
a
的一个副本，它们是完全独立的。你修改
b
不会影响
a
。
但数组是引用类型。当你写
let newArr = oldArr;
时，
newArr
并没有得到
oldArr
的一个副本，它只是得到了
oldArr
所指向的那个内存地址。简单来说，
newArr
和
oldArr
现在都指向了内存中的同一个数组。这就好比你给同一个文件夹起了两个不同的名字，无论你通过哪个名字去修改文件夹里的内容，实际修改的都是同一个地方。
举个例子：
const original = [1, 2, { name: 'Alice' }];
const assigned = original; // 直接赋值
assigned.push(4);
assigned[0] = 99;
assigned[2].name = 'Bob'; // 修改嵌套对象
console.log(original); // 输出: [99, 2, { name: 'Bob' }, 4]
console.log(assigned); // 输出: [99, 2, { name: 'Bob' }, 4]
// 它们完全一样，因为指向的是同一个数组
这种行为在某些场景下可能正是你想要的，比如你希望两个变量始终同步更新。但更多时候，尤其是在处理数据时，我们希望拥有一个独立的数据副本，避免“牵一发而动全身”的副作用。这就是为什么我们需要明确地进行数组复制操作的原因。
浅拷贝与深拷贝：何时需要更彻底的复制？
前面提到的展开运算符、
slice()
、
Array.from()
和
concat()
都属于浅拷贝。它们能很好地处理数组中包含基本类型元素的情况，因为这些基本类型的值会被直接复制。然而，一旦数组中出现了对象或另一个数组（即引用类型），浅拷贝就显得力不从心了。
浅拷贝的本质是：它创建了一个新数组，但如果原数组的元素是引用类型（比如对象或数组），那么新数组中对应的元素仍然是原引用类型元素的引用。换句话说，它们指向的是内存中的同一个对象或数组。
const originalArray = [1, { a: 1 }, [2, 3]];
const shallowCopy = [...originalArray];
shallowCopy[0] = 100; // 修改基本类型，互不影响
shallowCopy[1].a = 200; // 修改嵌套对象属性，原数组也会受影响
shallowCopy[2].push(4); // 修改嵌套数组，原数组也会受影响
console.log(originalArray); // 输出: [1, { a: 200 }, [2, 3, 4]]
console.log(shallowCopy); // 输出: [100, { a: 200 }, [2, 3, 4]]
可以看到，虽然
shallowCopy
是一个新数组，但它内部的
{ a: 1 }
和
[2, 3]
仍然是和
originalArray
共享的。
那么，何时需要深拷贝呢？当你需要一个完全独立的数据副本，包括所有嵌套的对象和数组都不能与原数据有任何关联时，你就需要深拷贝。这在处理复杂的配置对象、状态管理（如Redux中不可变状态的更新）、或者需要回溯数据历史的场景中非常常见。
实现深拷贝的方法通常有：
-
JSON.parse(JSON.stringify(object))
：这是最简单粗暴，也最常用的深拷贝方法。它先把对象序列化成JSON字符串，再反序列化回来，这样就切断了所有引用。
- 优点：简单，一行代码搞定。
-
缺点：
- 无法处理函数、
undefined
、
Symbol
、
BigInt
类型的数据（它们会在序列化时丢失）。
- 无法处理循环引用（会报错）。
- 无法处理
Date
对象（会变成字符串）。
- 性能相对较低，尤其是在处理大型复杂对象时。
- 无法处理函数、
const originalDeep = [1, { a: 1, b: () => {} }, new Date()]; const deepCopyJSON = JSON.parse(JSON.stringify(originalDeep)); console.log(deepCopyJSON); // 输出: [1, { a: 1 }, "2023-10-27T...Z"] (函数丢失，日期变字符串) -
递归拷贝：对于更复杂的情况，尤其是要处理函数、日期、循环引用等，你需要编写一个递归函数来遍历对象的每一个属性，并根据其类型进行深拷贝。这通常是手写或使用成熟库（如Lodash的
_.cloneDeep()
）的方式。
// 简化版递归深拷贝（不处理循环引用、特殊对象如Date、RegExp等） function deepClone(obj) { if (obj === null || typeof obj !== 'object') { return obj; } let clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { clone[key] = deepClone(obj[key]); } } return clone; } const originalDeepComplex = [1, { a: 1, b: { c: 2 } }]; const deepCopyManual = deepClone(originalDeepComplex); deepCopyManual[1].b.c = 99; console.log(originalDeepComplex[1].b.c); // 输出: 2 (原数组未受影响)
选择哪种拷贝方式，完全取决于你的具体需求。对于大多数只包含基本类型或不需要修改嵌套对象的数组，浅拷贝就足够了，而且性能更好。当你需要一个完全独立的数据副本，并且数据结构复杂时，才应该考虑深拷贝。
性能考量：哪种数组复制方法效率更高？
在JavaScript中，不同的数组复制方法在性能上确实存在差异，但对于大多数日常应用场景和中小型数组而言，这些差异通常微乎其微，不足以成为你选择方法的决定性因素。我们更多地会从代码的可读性、简洁性以及是否满足浅拷贝/深拷贝需求来考量。
不过，既然提到了性能，我们还是可以简单聊聊：
-
展开运算符 (
...
)、
slice()
、
Array.from()
和
concat()
：这些浅拷贝方法通常都非常高效。它们在底层实现上都涉及创建一个新数组并迭代原数组元素。现代JavaScript引擎（如V8）对这些操作进行了高度优化，尤其是在处理数组时，它们的性能表现往往不相上下。展开运算符因为其简洁和声明式风格，在很多情况下甚至可能被引擎进一步优化。
- 我个人在实践中发现，对于大部分场景，选择展开运算符 (
...
) 既能保证性能，又能提供极佳的可读性，是我的首选。它表达意图清晰：“我要一个和这个数组一样的新数组”。
- 我个人在实践中发现，对于大部分场景，选择展开运算符 (
-
JSON.parse(JSON.stringify(array))
：这种深拷贝方法在性能上通常会比浅拷贝方法慢很多，尤其是在处理大型或深度嵌套的数组/对象时。这是因为它涉及到两个阶段：先将整个对象序列化为字符串（CPU密集型操作），再将字符串解析回对象（同样是CPU密集型操作）。这种开销在数据量大时会变得非常明显。
-
递归深拷贝（手写或库函数如Lodash
cloneDeep
）：这类方法性能介于浅拷贝和
JSON.parse(JSON.stringify())
之间，具体取决于实现复杂度和数据结构。它们通常比
JSON.parse(JSON.stringify())
更灵活，可以处理更多数据类型，但也会有递归调用的开销。对于需要处理复杂数据结构且注重性能的场景，专业的深拷贝库通常会做得更好，因为它们会考虑各种边缘情况和优化策略。
总结一下我的看法：
除非你正在处理数万甚至数十万级别的数组元素，并且对性能有极致要求（这种情况下你可能需要进行性能基准测试），否则，选择浅拷贝方法时，你大可不必纠结于它们之间那微小的性能差异。更重要的是选择一个让你和你的团队成员都能快速理解、易于维护的方法。
对于浅拷贝，我倾向于推荐展开运算符 (
...
)，因为它现代、简洁、表达力强。
而对于深拷贝，如果你只是处理纯粹的JSON数据（没有函数、日期等特殊类型），
JSON.parse(JSON.stringify())
确实是最简单的方案。但如果数据结构复杂，或者对性能有较高要求，那么引入像Lodash这样的库，使用其提供的
_.cloneDeep()
会是更稳妥、更专业的选择。
总而言之，理解不同复制方法的原理和它们在浅拷贝/深拷贝上的差异，远比纠结于它们之间的微小性能差距来得重要。选择最适合你当前任务和数据结构的方法，才是王道。
暂无评论内容