- 当前位置：首页 >IT科技类资讯 >精学手撕系列——深浅拷贝原理
精学手撕系列——深浅拷贝原理
发布时间：2025-11-03 17:27:42 来源：创站工坊 作者：系统运维
一.JS中浅拷贝的精学手段有哪些？
1.什么是拷贝？我们来看下面一个例子，帮助大家区分赋值与拷贝的手撕深浅区别：
let arr = [1, 2, 3]; let newArr = arr; newArr[0] = 100; console.log(arr); // [100, 2, 3]这是直接赋值的情况，不涉及任何拷贝。系列当改变newArr的拷贝时候，由于是原理同一个引用，arr指向的精学值也跟着改变。
现在进行浅拷贝：
let arr = [1,手撕深浅 2, 3]; let newArr = arr.slice(); newArr[0] = 100; console.log(arr); //[1, 2, 3]当我们修改newArr的时候，arr的系列值并不改变，这是拷贝因为newArr是arr浅拷贝后的结果，newArr和arr现在是原理两个不同的引用地址了。
但我们再来看一个潜在的精学问题：
let arr = [1, 2, {val: 4}]; let newArr = arr.slice(); newArr[2].val = 1000; console.log(arr);//[ 1, 2, { val: 1000 } ]这里我们明显看到，浅拷贝虽然只能复制一层内容。手撕深浅但如果复制的系列第一层内容中，有复杂数据类型(数组/对象)，拷贝那么浅拷贝将失效，原理这也是浅拷贝最大的IT技术网限制所在了。
但幸运的是，深拷贝就是为了解决这个问题而生的，它能解决无限层级的对象嵌套问题，实现彻底的拷贝。深拷贝我们在下一道题中介绍。
接下来，我们来归纳一下JS中实现的浅拷贝都有哪些方法呢？
2.手动实现
const shallClone = (target) => { if (typeof target === object && target !== null) { const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(prop)) { // 遍历对象自身可枚举属性（不考虑继承属性和原型对象） cloneTarget[prop] = target[prop]; } return cloneTarget; } else { return target; } }3.Object.assign但是需要注意的是，Object.assgin() 拷贝的是对象的属性的引用，而不是对象本身。
let obj = { name: sy, age: 18 }; const obj2 = Object.assign({}, obj, {Newname: sss}); console.log(obj2); // {name: "sy", age: 18, Newname: "sss"}4.concat()浅拷贝数组
let arr = [1, 2, 3]; let newArr = arr.concat(); newArr[1] = 100; console.log(arr); //[ 1, 2, 3 ]5.slice()浅拷贝开头例子就是！！
6. ...展开运算符
let arr = [1, 2, 3]; let newArr = [...arr]; //跟arr.slice()是一样的效果二.JS中深拷贝的手段有哪些？在实现一个完整版的深拷贝函数之前，服务器托管看看有没有某个api能帮助我们完成深拷贝？
1.api版-简易版
JSON.parse(JSON.stringify());从下面例子中，我们可以看出简易版的深拷贝，已经做到了。
let arr = [10, [100, 200], { x: 10, y:20}]; let newArr = JSON.parse(JSON.stringify(arr)); console.log(newArr[2] === arr[2]; // false其实，上面的api，它所使用的是暴力法，什么是暴力法呢，在这里给大家解释一下：
暴力法：把原始数据直接变为字符串，再把字符串变为对象，（此时浏览器会重新开辟所有的内存空间），实现深拷贝。
但是直接供我们使用的api，往往会有一些自己的弊端，比如我们看下面这个例子
let obj = { a: 100, b: [10, 20, 30], c: { x: 10 }, d: /^\d+$/， // d: function() {} // d: new Date() // d: BigInt(10) // d: Symbol(f) }; let newObj = JSON.parse(JSON.stringify(obj)); console.log(newObj); /* {a: 100, b: Array(3), c: {…}, d: {…}} a: 100 b: (3) [10, 20, 30] c: {x: 10} d: {} __proto__: Object } */从上面例子的输出结果中，我们可以看出，正则属性直接变成了空对象。
那假如我们再把最后一个属性，换成其它类型试一试，我们同理也可以发现，JSON.parse(JSON.stringify()) 都是有弊端的。源码库我们总结一下：
正则属性会变为空对象
函数会直接消失
日期直接字符串
Symbol直接消失
BigInt(10)，直接报错
undefined会直接消失
所以当对象中没有以上形式的属性时，可以用JSON.parse(JSON.stringify())。但是此方法还有一个弊端，那就是循环引用问题，举个例子：
const a = {value: 2}, a.target = a;拷贝a会出现系统栈溢出，因为出现了无限递归的情况。
2.实现简易版深拷贝发现上面弊端后，我们来手写一版深拷贝
此种方法，不考虑循环引用问题，也不考虑特殊对象的问题
function deepClone(target) { if (target === null) return null; if (typeof target !== object) return target; const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(prop)) { cloneTarget[prop] = deepClone(target[prop]); } } return cloneTarget; }现在我们以发现的几个问题为导向，依次完善深拷贝函数
3.解决循环引用问题如下：
let obj = { value: 100 }; obj.target = obj; deepClone(obj); //报错: RangeError: Maximum call stack size exceeded这就是循环引用。我们怎么来解决这个问题呢？
创建一个Map（Map类似于对象，也是键值对的集合，但是“键”可以是对象），记录下已经拷贝过的对象，如果已经拷贝过，那直接返回就行了.
其原理是每次拷贝引用类型的时候，都设置一个true作为标记，等下次再遍历该对象的时候，就知道它是否已经拷贝过。
const isObject = (target) => (typeof target === object || typeof target === function) && target !== null; function deepClone (target, map = new Map()) { // 先判断该引用类型是否被 拷贝过 if (map.get(target)) { return target; } if (isObject(target)) { map.set(target, true); const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(props)) { cloneTarget[prop] = deepClone(target[props], map); } } return cloneTarget; } else { return target; } }现在我们就可以到已经成功了：
const a = {val:2}; a.target = a; let newA = deepClone(a); console.log(newA)//{ val: 2, target: { val: 2, target: [Circular] } }好像是没有问题了, 拷贝也完成了。但还是有一个潜在的坑, 就是map 上的 key 和 map 构成了强引用关系，这是相当危险的。我给你解释一下与之相对的弱引用的概念你就明白了：
在计算机程序设计中，弱引用与强引用相对， 是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。--百度百科
说的有一点绕，我用大白话解释一下，被弱引用的对象可以在任何时候被回收，而对于强引用来说，只要这个强引用还在，那么对象无法被回收。拿上面的例子说，map 和 a一直是强引用的关系，在程序结束之前，a所占的内存空间一直不会被释放，便会造成严重的内存泄漏问题。
怎么解决这个问题呢？
很简单，让 map 的 key 和 map 构成弱引用即可。ES6给我们提供了这样的数据结构，它的名字叫WeakMap，它是一种特殊的Map, 其中的键是弱引用的。其键必须是对象，而值可以是任意的。
稍微改造一下极课：
const deepClone = (target, map = new WeakMap()) => { //... }4.解决特殊对象问题(RegExp,Date...)如果传入的对象格式满足，正则或日期格式的话，返回一个新的正则或日期对象的实例
function deepClone (target, map = new Map()) { // 检测当前对象target是否与 正则、日期格式对象匹配 if (/^(RegExp|Date)$/i.test(target.constructor.name)){ new constructor(target); } }5.完整版深克隆实现源码
const isObject = (target) => (typeof target === object || typeof target === function) && target !== null; function deepClone (target, map = new Map()) { // 先判断该引用类型是否被 拷贝过 if (map.get(target)) { return target; } // 检测当前对象target是否与 正则、日期格式对象匹配 if (/^(RegExp|Date)$/i.test(target.constructor.name)){ new constructor(target); } if (isObject(target)) { map.set(target, true); const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(props)) { cloneTarget[prop] = deepClone(target[props], map); } } return cloneTarget; } else { return target; } }补充：Object.keys(obj)只遍历私有属性（原型上可能有公共的方法，无法遍历）
- Copyright © 2025 Powered by 精学手撕系列——深浅拷贝原理,创站工坊 滇ICP备2023006006号-44sitemap