当前位置：首页 > news >正文

JS手写实现深拷贝

news 来源：原创 2024/9/20 9:44:21

手写深拷贝

一、通过JSON.stringify
二、函数库lodash
三、递归实现深拷贝
- 基础递归
- 升级版递归---解决环引用爆栈问题
- 最终版递归---解决其余类型拷贝结果

一、通过JSON.stringify

JSON.parse(JSON.stringify(obj))是比较常用的深拷贝方法之一

原理：利用JSON.stringify 将JavaScript对象序列化成为JSON字符串，并将对象里面的内容转换成字符串，再使用JSON.parse来反序列化，将字符串生成一个新的JavaScript对象

这个方法是目前使用最多的深拷贝的方法，也是最简单的方法，使用示例：

let obj1 = {  a: 0,b: {c: 0}
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj1.a = 1;
obj1.b.c = 1;
console.log(obj1); // {a: 1, b: {c: 1}}
console.log(obj2); // {a: 0, b: {c: 0}}

这个方法虽然简单粗暴，但也存在一些问题，在使用该方法时需要注意：

拷贝的对象中如果有 function、undefined、symbol，当使用过JSON.stringify()进行处理之后，都会消失。

const originObj = {name: 'test',age: undefined,func: function () {console.log('Hello World');},key: Symbol('一个独一无二的key')
}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // 只剩下 {name: "test"}

无法拷贝不可枚举的属性；
无法拷贝对象的原型链；
拷贝 Date 引用类型会变成字符串；
拷贝 RegExp 引用类型会变成空对象；
对象中含有NaN、Infinity以及 -Infinity，JSON 序列化的结果会变成null；
无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

二、函数库lodash

该函数库也有提供_.cloneDeep用来做深拷贝，可以直接引入并使用：

var _ = require('lodash');
var obj1 = {a: 1,b: { f: { g: 1 } },c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f); // false

三、递归实现深拷贝

实现深拷贝的思路就是，使用for in来遍历传入参数的属性值

如果值是基本类型就直接复制
如果是引用类型就进行递归调用该函数

基础递归

function deepClone (source) {//判断source是不是对象if (source instanceof Object === false) return source;
//根据source类型初始化结果变量let target = Array.isArray(source) ? [] : {};
for (let i in source) {// 判断是否是自身属性if (source.hasOwnProperty(i)) {//判断数据i的类型if (typeof source[i] === 'object') {target[i] = deepClone(source[i]);} else {target[i] = source[i];}}}return target;
}

const obj = {info: { c: { d: 1 } },age: undefined,func: function () {console.log('Hello World');},key: Symbol('一个独一无二的key')
}

const resultA = deepClone(obj)

obj.info.c.d = 3
console.log(111111, obj); 
// { info: { c: { d: 3 } }, age: undefined, func: f, key: xxxxx}

console.log(222222, resultA); 
// { info: { c: { d: 1 } }, age: undefined, func: f, key: xxxxx}


let resultB = [1, [2, 3], [4, [5]]]
let resultC = deepClone(resultB)

resultB[1][1] = 7
console.log(333333, resultB);  // [1, [2, 7], [4, [5]]]

console.log(444444, resultC);  // [1, [2, 3], [4, [5]]]

这只是粗略的版本，这样虽然实现了深拷贝，但也存在一些问题：

存在环引用问题（存在循环引用，拷贝会直接爆栈）
对于Date、RegExp、Set、Map等引用类型不能正确拷贝

升级版递归—解决环引用爆栈问题

function deepClone (source, map = new Map()) {//判断source是不是对象if (source instanceof Object === false) return source;
//根据source类型初始化结果变量let target = Array.isArray(source) ? [] : {};
/* ----------------新增---------------- */if (map.get(source)) {// 已存在则直接返回return map.get(source)}// 不存在则第一次设置map.set(source, target)/* ----------------新增---------------- */
for (let i in source) {// 判断是否是自身属性if (source.hasOwnProperty(i)) {//判断数据i的类型if (typeof source[i] === 'object') {// 传递maptarget[i] = deepClone(source[i], map);} else {target[i] = source[i];}}}return target;
}

const obj = {info: { c: { d: 1 } },age: undefined,func: function () {console.log('Hello World')},key: Symbol('一个独一无二的key'),
}

// 形成环引用
obj.loop = obj
console.log(obj);

const resultA = deepClone(obj)
console.log(resultA); // 拷贝成功

最终版递归—解决其余类型拷贝结果

// 可遍历类型
const arrTag = '[object Array]';
const objTag = '[object Object]';
const mapTag = '[object Map]';
const setTag = '[object Set]';
const argTag = '[object Arguments]';
const strTag = '[object String]';

// 不可遍历类型
const boolTag = '[object Boolean]';
const numTag = '[object Number]';
const dateTag = '[object Date]';
const errTag = '[object Error]';
const regexpTag = '[object RegExp]';
const symbolTag = '[object Symbol]';
const funTag = '[object Function]';

// 将可遍历类型做个集合
const traversalArr = [arrTag, objTag, mapTag, setTag, argTag, strTag];


// 判断类型的函数(采用最全且无遗漏的判断方式)
function checkType (source) {return Object.prototype.toString.call(source)
}

// 拷贝RegExp的方法
function cloneReg (source) {const reFlags = /\w*$/;const result = new source.constructor(source.source, reFlags.exec(source));result.lastIndex = source.lastIndex;return result;
}

// 拷贝Date的方法
function cloneDate (source) {return new source.constructor(source.valueOf())
}


function deepClone (source, map = new Map()) {// 非对象直接返回if (source instanceof Object === false) return source
// 根据source类型初始化结果变量let target = Array.isArray(source) ? [] : {};

/* ----------------处理环引用问题---------------- */// 已存在则直接返回(仅仅在环引用之间生效)if (map.get(source)) return map.get(source)
// 不存在则第一次设置map.set(source, target)/* ----------------处理环引用问题---------------- */

/* ----------------处理Map、Set、Date、RegExp深拷贝失效问题---------------- */const type = checkType(source)
console.log(type);let emptyObj
// 如果是可遍历类型，直接创建空对象if (traversalArr.includes(type)) {emptyObj = new source.constructor()}
// 处理Map类型if (type === mapTag) {source.forEach((value, key) => {emptyObj.set(key, deepClone(value, map))})return emptyObj}
// 处理Set类型if (type === setTag) {source.forEach(value => {emptyObj.add(deepClone(value, map))})return emptyObj}
// 处理Date类型if (type === dateTag) return cloneDate(source)
// 处理Reg类型if (type === regexpTag) return cloneReg(source)/* ----------------处理Map、Set、Date、RegExp深拷贝失效问题--------------- */

for (let item in source) {// 判断是否是自身属性if (source.hasOwnProperty(item)) {// 判断数据i的类型// if (source[item] instanceof Object) {if (typeof source[item] === 'obejct') {target[item] = deepClone(source[item], map);} else {target[item] = source[item];}}}return target;
}

const obj = {// 基本类型str: 'test',num: 18,boolean: true,sym: Symbol('独一无二key'),
// 引用类型(以下8种数据对象均需进行真正意义上的深拷贝)obj_object: { name: 'squirrel' },arr: [123, '456'],func: (name, age) => console.log(`姓名：${name}，年龄：${age}岁`),
map: new Map([['t', 100], ['s', 200]]),set: new Set([1, 2, 3]),date: new Date(),reg: new RegExp(/test/g),
}

// 形成环引用
obj.loop = obj

const result = deepClone(obj)
console.log('手写deepClone结果:', result)