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

浅拷贝(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`来确保响应性。

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

相关推荐
元亓亓亓8 小时前
JavaWeb--day9--SpringBootWeb案例(一)
springboot·web
西洼工作室1 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊1 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
元亓亓亓2 天前
JavaWeb--day11--登录认证
springboot·web·interceptor·cookie·filter·session
趙卋傑3 天前
项目发布部署
linux·服务器·后端·web
带刺的坐椅3 天前
Solon v3.4.6, v3.5.4, v3.6.0-M1 发布。正式开始 LTS 计划
java·spring·ai·web·solon·mcp
fcm193 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸3 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享4 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
OEC小胖胖4 天前
SEO 优化:元数据 (Metadata) API 和站点地图 (Sitemap) 生成
前端·javascript·前端框架·html·web·next.js