浅拷贝和深拷贝两种不同的对象复制

浅拷贝(Shallow Copy)和深拷贝(Deep Copy)是两种不同的对象复制方法,它们在JavaScript中用于创建对象的副本。理解它们的区别和使用场景非常重要,尤其是在处理复杂的数据结构时。

浅拷贝与深拷贝的区别:

  1. 浅拷贝:

创建一个新对象,只复制原始对象的第一层属性。

如果属性值是基本数据类型,如`Number`、`String`、`Boolean`,则复制的是值。

如果属性值是引用类型,如`Object`、`Array`,则复制的是引用(指针),而不是值的副本。

  1. 深拷贝:

创建一个新对象,递归复制所有层级的属性。

无论属性值是基本数据类型还是引用类型,都会创建一个完全独立的副本。

如何使用:

浅拷贝:

使用对象展开操作符(`...`)。

使用`Object.assign()`方法。

使用数组的`slice()`方法(仅适用于数组)。

深拷贝:

使用`JSON.parse(JSON.stringify(object))`方法。

使用第三方库,如`lodash`的`_.cloneDeep()`方法。

对于复杂的对象,可能需要编写递归函数来实现深拷贝。

使用场景:

  1. 适合浅拷贝的场景:

当对象属性都是基本数据类型时。

当对象属性包含引用类型,但不需要修改或不担心修改会影响原始对象时。

需要快速复制对象的第一层属性,且不关心深层嵌套对象的独立性时。

  1. 适合深拷贝的场景:

当对象属性包含深层嵌套的引用类型,且需要完全独立的副本时。

当需要修改复制的对象,而不希望这些修改影响到原始对象时。

当使用Vue等响应式框架,需要确保复制的对象在响应式系统中保持独立时。

示例:

复制代码
// 浅拷贝示例
const obj = { a: 1, b: 2 };
const copiedObj = obj; // 直接赋值,两者引用同一对象
obj.b=3;

const originalObj2 = { a: 1, b: { c: 3 } };
const copiedObj2 = { ...originalObj2 }; // 浅拷贝,只复制第一层属性
originalObj2.b.c=2;

const originalObj3 = { a: 1 };
const copiedObj3 = Object.assign({}, originalObj3); // 浅拷贝

const originalArray4 = [1, 2, 3];
const copiedArray4 = originalArray4.concat(); // 数组的浅拷贝

const obj5 = { a: 1 };
Vue.set(obj, 'b', 2); // 添加新属性,保持响应性

const originalObj6 = { a: 1, b: { c: 3 } };
const copiedObj6 = JSON.parse(JSON.stringify(originalObj6)); // 深拷贝

// 深拷贝示例
const original8 = { a: 1, b: { c: 2 } };
const deepCopy8 = JSON.parse(JSON.stringify(original8)); // b 的值被递归复制


console.log(JSON.stringify(obj),"=1=",JSON.stringify(copiedObj));
console.log(JSON.stringify(originalObj2),"=2=",JSON.stringify(copiedObj2));
console.log(JSON.stringify(originalObj3),"=3=",JSON.stringify(copiedObj3));
console.log(originalArray4,"=4=",copiedArray4);

console.log("5",JSON.stringify(obj5));

console.log(JSON.stringify(originalObj6),"=6=",JSON.stringify(copiedObj6));
console.log(JSON.stringify(original7),"=7=",JSON.stringify(shallowCopy7));
console.log(JSON.stringify(original8),"=8=",JSON.stringify(deepCopy8));

注意事项:

浅拷贝不会递归复制对象的深层属性,因此如果原始对象的深层属性被修改,浅拷贝的对象也会受到影响。

深拷贝虽然可以创建完全独立的副本,但使用`JSON.parse(JSON.stringify(object))`方法时,不能复制函数、undefined、循环引用等。

在Vue 3中,由于使用了Proxy,直接赋值通常可以保持响应性,但在Vue 2中,直接赋值可能需要使用`Vue.set`来确保响应性。

根据具体需求和场景,选择合适的拷贝方法来确保数据的独立性和响应性。

相关推荐
F2E_Zhangmo7 小时前
基于cornerstone3D的dicom影像浏览器 第四章 鼠标实现翻页、放大、移动、窗宽窗位调节
vue·cornerstone·cornerstone3d·cornerstonejs
诗人不说梦^10 小时前
[CISCN2019 总决赛 Day2 Web1]Easyweb
web·ctf
OEC小胖胖15 小时前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
OEC小胖胖1 天前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
最好结果1 天前
ruoyi系统-vue-elementui 表格单元格点击复制功能实现:实践与问题解决
vue
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
练习时长两年半的Java练习生(升级中)2 天前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web