前言
JavaScript 中的浅拷贝和深拷贝指的是在复制对象(包括对象、数组等)时,是否只复制对象的引用地址或者在复制时创建一个新的对象。具体区别如下:
浅拷贝:浅拷贝只拷贝基本类型的数据,而符合类型的数据只复制指向其的指针,而不复制对象本身,新旧对象还是共享同一块内存。这意味着如果原始对象的属性或子对象发生更改,则复制的对象也会受到影响。常见的实现方式包括使用 Object.assign()方法、展开运算符(…)以及循环遍历对象并将其属性复制到新对象中。
深拷贝:深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
什么是浅拷贝
当我们进行 JavaScript 对象或数组的浅拷贝时,它只会复制其基本值的引用,而不是完全复制内容。也就是说,浅拷贝只是复制了原始对象的属性/元素的引用,并没有新建一个对象。
例如,如果我们有一个简单的对象:
const obj = { name: 'John', age: 30 };
然后我们使用对象的赋值语法来创建一个浅拷贝:
const newObj = obj;
此时,newObj
和 obj
都指向同一个内存地址。如果我们改变 newObj
的某个属性,那么 obj
的相应属性也会发生改变。
newObj.age = 40; console.log(obj.age); // 输出 40
这是因为 newObj
和 obj
指向的是同一个内存地址,所以任何更改都会反映在另一个变量上。
类似地,在数组中进行浅拷贝也会产生相同的效果:
const arr = [1, 2, 3]; const newArr = arr; newArr.push(4); console.log(arr); // 输出 [1, 2, 3, 4]
实现浅拷贝
浅拷贝可以使用 Object.assign() 或者展开运算符 … 来实现;
/** * 浅拷贝 * * @param {Object} target 目标对象 * @param {Object} source 源对象 * @return {Object} 返回目标对象 */ function extend(target, source) { for (var key in source) { if (source.hasOwnProperty(key)) { var value = source[key]; if (typeof value !== 'undefined') { target[key] = value; } } } return target; }
什么是深拷贝
相比于浅拷贝,深拷贝会复制整个对象或数组,包括其所有的嵌套子对象和数组。这意味着新创建的对象与原始对象没有任何关联,改变其中一个对象不会影响另一个。
例如,如果我们使用 JavaScript 的内置函数 JSON.parse()
和 JSON.stringify()
来进行深拷贝:
const obj = { name: 'John', age: 30 }; const newObj = JSON.parse(JSON.stringify(obj)); newObj.age = 40; console.log(obj.age); // 输出 30
在这个例子中,先使用 JSON.stringify()
将原始对象序列化为字符串,再使用 JSON.parse()
将其解析为新对象。由于字符串是基本类型的值,而非引用类型,因此 newObj
是一个全新的对象,与 obj
没有关系。
类似地,在数组中进行深拷贝也会产生相同的效果:
const arr = [1, [2, 3], [4, [5]]]; const newArr = JSON.parse(JSON.stringify(arr)); newArr[1][0] = 6; console.log(arr[1][0]); // 输出 2
在这个例子中,通过深拷贝创建了一个新数组,并且修改新数组中嵌套数组的元素时,原始数组并不会受到影响。
实现深拷贝
深拷贝可以使用 JSON.parse(JSON.stringify(obj))、递归复制对象属性、第三方库如 lodash 的 deepClone 等方式来实现。但需注意的是,这些方法也有可能存在一些限制和缺陷,比如不能处理函数、循环引用等问题。
function deepCopy(obj) { var result, copy; if (obj.constructor === Object) result = {}; //判断传入的如果是对象,继续遍历 else if (Array.isArray(obj)) result = []; //判断传入的如果是数组,继续遍历 else return obj; //如果是基本数据类型就直接返回 for (var key in obj) { if(obj.hasOwnProperty(key)){ copy = obj[key]; if(copy===null){ break; } if(typeof copy ==='undefined'){ result[key]=undefined; }else if (getType(copy) == "Object"||getType(copy) == "Array") result[key] = deepCopy(copy); //递归方法 else result[key] = copy; //基本数据类型则赋值给属性 } } return result; }
/** * 深拷贝 * @param obj * @param appeard * @returns {*[]|any} */ deepCopy(obj, appeard = new Map()) { if (!(obj instanceof Object)) return obj; //如果是原始数据类型 if (appeard.has(obj)) return appeard.get(obj); //如果已经出现过 let result = Array.isArray(obj) ? [] : {}; appeard.set(obj, result); //将新对象放入map //遍历所有属性进行递归拷贝 [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)].forEach(key => (result[key] = this.deepCopy(obj[key], appeard))); return result; }