数组深拷贝的核心是创建一个与原数组完全独立的新数组，修改新数组不会影响原数组。1. json序列化/反序列化：适用于仅含基本数据类型和普通对象且无循环引用的数组，优点是简单高效，缺点是无法处理函数、undefined、symbol及循环引用。2. 递归拷贝：可处理嵌套结构，需通过map记录已拷贝对象以避免循环引用导致的栈溢出，但仍无法直接复制函数和symbol。3. structuredclone：现代浏览器原生支持，性能较好且能处理date、regexp等特殊对象，但不兼容旧浏览器且无法复制函数和symbol。4. 浅拷贝后手动深拷贝：适用于仅需深拷贝部分元素的场景，可提升性能但需手动管理拷贝逻辑。5. lodash的_.clonedeep：功能最强大，支持复杂结构和循环引用，但需引入外部依赖且性能略低。选择方法应根据数组结构复杂度、是否含特殊类型、兼容性要求及性能需求综合判断。
数组深拷贝，说白了，就是创建一个新数组，这个新数组和原始数组完全独立，修改新数组不会影响到原始数组。
解决方案：
实现 JavaScript 数组深拷贝的方法有很多，各有优劣，选择哪个取决于你的具体需求和数组的复杂程度。
立即学习“Java免费学习笔记（深入）”；
JSON 序列化/反序列化：最简单粗暴，但有局限
这是最简单的方法之一，利用
JSON.stringify()
将数组转换为 JSON 字符串，再用
JSON.parse()
将字符串转换回数组。
const originalArray = [1, 2, { a: 3 }];const deepCopyArray = JSON.parse(JSON.stringify(originalArray));deepCopyArray[2].a = 4; // 修改深拷贝后的数组console.log(originalArray[2].a); // 输出 3，说明原始数组未被修改
优点：
简单易懂，代码量少。
缺点：
无法拷贝函数、
undefined
、
Symbol
等特殊类型。如果数组中包含循环引用，会报错。性能相对较差，特别是对于大型数组。
所以，如果你的数组只包含基本数据类型和普通对象，并且没有循环引用，那么这种方法是最快的。
递归拷贝：更通用，但需要小心
递归拷贝是一种更通用的深拷贝方法，它可以处理更复杂的数据结构。
function deepCopy(obj) { if (typeof obj !== 'object' || obj === null) { return obj; // 如果不是对象或为 null，直接返回 } const newObj = Array.isArray(obj) ? [] : {}; // 创建新对象或数组 for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key]); // 递归拷贝 } } return newObj;}const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); } }];const deepCopyArray = deepCopy(originalArray);deepCopyArray[2].a = 4;console.log(originalArray[2].a); // 输出 3deepCopyArray[2].b(); // 报错，deepCopy无法复制函数
优点：
可以处理包含嵌套对象和数组的复杂数据结构。
缺点：
无法拷贝函数、
undefined
、
Symbol
等特殊类型（需要额外处理）。如果数组中包含循环引用，会导致无限递归，最终栈溢出。性能相对较差，特别是对于大型数组。
需要注意的是，递归拷贝需要处理循环引用的问题，否则会陷入无限循环。一种常见的处理方式是使用
Map
或
Set
来记录已经拷贝过的对象，避免重复拷贝。
使用
structuredClone
structuredClone
：现代浏览器原生支持
structuredClone
是一个现代浏览器提供的原生方法，用于深拷贝对象。
const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); }, c: undefined, d: Symbol('test') }];const deepCopyArray = structuredClone(originalArray);deepCopyArray[2].a = 4;console.log(originalArray[2].a); // 输出 3// deepCopyArray[2].b(); // 报错，structuredClone无法复制函数console.log(deepCopyArray[2].c); // undefined// console.log(deepCopyArray[2].d); // 报错，structuredClone无法复制Symbol
优点：
简单易用，一行代码搞定。性能相对较好，因为它是由浏览器原生实现的。可以处理
Date
、
RegExp
等特殊对象。
缺点：
兼容性问题，只在现代浏览器中支持。无法拷贝函数、
Symbol
等特殊类型。如果数组中包含循环引用，会报错。
structuredClone
在大多数情况下是一个不错的选择，但需要注意兼容性和无法拷贝的类型。
浅拷贝后手动深拷贝：针对特定场景的优化
有时候，你只需要深拷贝数组中的部分元素，而不是整个数组。这时，可以先进行浅拷贝，然后手动深拷贝需要深拷贝的元素。
const originalArray = [1, 2, { a: 3 }, 4];const shallowCopyArray = [...originalArray]; // 浅拷贝shallowCopyArray[2] = deepCopy(originalArray[2]); // 手动深拷贝对象shallowCopyArray[2].a = 4;console.log(originalArray[2].a); // 输出 3
优点：
可以针对特定场景进行优化，提高性能。
缺点：
需要手动处理，代码量相对较多。容易出错，需要仔细考虑哪些元素需要深拷贝。
这种方法适用于只需要深拷贝数组中少量元素的场景，例如，数组中大部分元素都是基本数据类型，只有少数元素是对象或数组。
lodash 的
_.cloneDeep
_.cloneDeep
：功能强大，但引入依赖
lodash 是一个流行的 JavaScript 工具库，提供了很多实用的函数，包括深拷贝函数
_.cloneDeep
。
const _ = require('lodash');const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); } }];const deepCopyArray = _.cloneDeep(originalArray);deepCopyArray[2].a = 4;console.log(originalArray[2].a); // 输出 3// deepCopyArray[2].b(); // 报错，lodash默认无法复制函数
优点：
功能强大，可以处理各种复杂的数据结构。使用方便，一行代码搞定。
缺点：
需要引入 lodash 库，增加了项目的依赖。性能可能不如原生方法。
lodash 的
_.cloneDeep
是一个功能强大的深拷贝函数，可以处理各种复杂的数据结构，但需要引入 lodash 库。
哪种方法最适合你？
如果数组很简单，只包含基本数据类型和普通对象，并且没有循环引用，那么
JSON.stringify()
/
JSON.parse()
是最快的。如果需要处理包含嵌套对象和数组的复杂数据结构，并且没有循环引用，那么递归拷贝是一个不错的选择。如果你的目标浏览器支持
structuredClone
，并且不需要拷贝函数和 Symbol，那么
structuredClone
是最方便的。如果只需要深拷贝数组中的部分元素，那么浅拷贝后手动深拷贝可以提高性能。如果需要处理各种复杂的数据结构，并且不介意引入 lodash 库，那么
_.cloneDeep
是最强大的。
深拷贝时如何处理循环引用？
循环引用是指对象之间相互引用，例如：
const obj1 = { a: 1 };const obj2 = { b: obj1 };obj1.c = obj2; // obj1 引用 obj2，obj2 引用 obj1，形成循环引用
如果使用递归拷贝，遇到循环引用会导致无限递归，最终栈溢出。为了解决这个问题，可以使用
Map
或
Set
来记录已经拷贝过的对象，避免重复拷贝。
function deepCopy(obj, map = new Map()) { if (typeof obj !== 'object' || obj === null) { return obj; } if (map.has(obj)) { return map.get(obj); // 如果已经拷贝过，直接返回 } const newObj = Array.isArray(obj) ? [] : {}; map.set(obj, newObj); // 记录已经拷贝过的对象 for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key], map); } } return newObj;}const obj1 = { a: 1 };const obj2 = { b: obj1 };obj1.c = obj2;const deepCopyObj1 = deepCopy(obj1);deepCopyObj1.a = 2;console.log(obj1.a); // 输出 1
在这个例子中，
Map
用于记录已经拷贝过的对象。当递归拷贝遇到已经拷贝过的对象时，直接返回
Map
中记录的拷贝对象，避免重复拷贝，从而解决了循环引用的问题。
深拷贝函数和 Symbol 类型怎么办？
默认情况下，
JSON.stringify()
、递归拷贝和
structuredClone
都无法拷贝函数和 Symbol 类型。如果需要拷贝这些类型，需要自定义处理。
对于函数，一种简单的处理方式是直接返回原始函数，这意味着拷贝后的对象和原始对象共享同一个函数。
function deepCopy(obj, map = new Map()) { if (typeof obj !== 'object' || obj === null) { return obj; } if (typeof obj === 'function') { return obj; // 直接返回原始函数 } if (map.has(obj)) { return map.get(obj); } const newObj = Array.isArray(obj) ? [] : {}; map.set(obj, newObj); for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key], map); } } return newObj;}const originalObj = { a: 1, b: function() { console.log('hello'); } };const deepCopyObj = deepCopy(originalObj);deepCopyObj.b(); // 输出 hello，和原始对象共享同一个函数
对于 Symbol 类型，一种处理方式是忽略它，不进行拷贝。另一种处理方式是使用
Symbol.keyFor()
和
Symbol()
重新创建 Symbol。
function deepCopy(obj, map = new Map()) { if (typeof obj !== 'object' || obj === null) { return obj; } if (typeof obj === 'function') { return obj; } if (typeof obj === 'symbol') { const key = Symbol.keyFor(obj); if (key) { return Symbol.for(key); // 如果是全局 Symbol，重新创建 } else { return Symbol(obj.description); // 如果是局部 Symbol，重新创建 } } if (map.has(obj)) { return map.get(obj); } const newObj = Array.isArray(obj) ? [] : {}; map.set(obj, newObj); for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key], map); } } return newObj;}const sym = Symbol('test');const originalObj = { a: 1, b: sym };const deepCopyObj = deepCopy(originalObj);console.log(deepCopyObj.b === sym); // 输出 false，重新创建了 Symbol
需要注意的是，拷贝函数和 Symbol 类型可能会带来一些问题，例如，拷贝后的函数可能无法访问原始对象的作用域，拷贝后的 Symbol 可能不再是唯一的。因此，需要根据具体情况选择合适的处理方式。
以上就是javascript怎么实现数组深拷贝的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514167.html
微信扫一扫 
支付宝扫一扫 
