浅拷贝和深拷贝

简介: 浅拷贝和深拷贝

在JavaScript中,浅拷贝和深拷贝都是用于复制一个对象的方式,但它们在复制过程中的方式和结果有所不同。

浅拷贝是创建一个新对象,将原始对象的属性值复制到新对象中。如果属性是基本类型,则直接复制其值;如果属性是引用类型,则复制的是引用地址,因此新旧对象会共享同一个引用地址。浅拷贝只复制了对象的一层,不会递归复制子对象。

举例说明浅拷贝:

// 使用Object.assign()进行浅拷贝
const obj1 = { foo: 'bar', age: 20 };
const obj2 = Object.assign({}, obj1);
obj2.foo = 'baz';
console.log(obj1); // { foo: 'bar', age: 20 }
console.log(obj2); // { foo: 'baz', age: 20 }
// 使用展开运算符(...)进行浅拷贝
const arr1 = [1, 2, [3, 4]];
const arr2 = [...arr1];
arr2[0] = 5;
arr2[2].push(6);
console.log(arr1); // [1, 2, [3, 4, 6]]
console.log(arr2); // [5, 2, [3, 4, 6]]

深拷贝是创建一个新对象,递归地将原始对象及其子对象的属性值复制到新对象中。整个复制过程是完全独立的,新对象和原对象不共享任何引用地址。

举例说明深拷贝:

// 使用JSON.stringify()和JSON.parse()进行深拷贝
const obj1 = { foo: 'bar', age: 20 };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.foo = 'baz';
console.log(obj1); // { foo: 'bar', age: 20 }
console.log(obj2); // { foo: 'baz', age: 20 }
// 使用递归函数进行深拷贝
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  let copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  
  return copy;
}
const arr1 = [1, 2, [3, 4]];
const arr2 = deepCopy(arr1);
arr2[0] = 5;
arr2[2].push(6);
console.log(arr1); // [1, 2, [3, 4]]
console.log(arr2); // [5, 2, [3, 4, 6]]

使用场景:

  • 浅拷贝适用于需要快速创建新对象且只关心第一层属性的情况。例如,将对象的部分属性做修改,而不影响原始对象。
  • 深拷贝适用于需要完全独立的新对象,无论是修改新对象还是原始对象,都互不影响的情况。例如,复制对象作为函数参数,保持原始对象的完整性。
目录
相关文章
|
存储 缓存 JSON
微信小程序使用本地存储方法
微信小程序使用本地存储方法
559 1
|
存储 前端开发 JavaScript
HTML满屏漂浮爱心
HTML满屏漂浮爱心
227 1
|
存储 算法 数据处理
|
11月前
|
存储 Java API
Kotlin学习教程(六)
Kotlin学习教程(六)
201 2
|
自然语言处理 IDE 开发工具
利用codeGeex在IDE中自动写注释、自动补充简单编码。
利用codeGeex在IDE中自动写注释、自动补充简单编码。
494 2
|
设计模式 传感器 数据处理
探索设计模式的魅力:为什么你应该了解装饰器模式-代码优化与重构的秘诀
装饰器模式是一种设计模式,它允许在运行时向对象添加额外的职责,而无需修改其代码。这种模式提供了一种动态扩展对象功能的方法,同时保持了对象的单一职责原则。本文介绍了装饰器模式的基本概念、原理、优势、适用场景、实现方法、最佳实践和注意事项。通过装饰器模式,可以将多个行为组合成一个更复杂的行为,而无需使用继承或大量的接口实现。装饰器模式适用于需要对一个对象进行一系列的增强处理的情况,而这些增强处理可以以一种松耦合的方式进行组合。通过使用装饰器模式,可以提高代码的可维护性、可扩展性和灵活性,使系统更加灵活和易于维护
310 1
探索设计模式的魅力:为什么你应该了解装饰器模式-代码优化与重构的秘诀
|
存储 JavaScript 前端开发
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
271 0
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
321 0
|
缓存 资源调度 JavaScript
npm、pnpm和yarn【简单了解】
npm、pnpm和yarn【简单了解】
216 2
|
搜索推荐 人机交互 vr&ar
虚拟现实与增强现实:现代科技中的应用
虚拟现实和增强现实作为现代科技的重要组成部分,正在改变着人们的生活和工作方式。它们在游戏、教育、医疗、建筑、商业等领域展现出巨大的潜力。随着技术的不断发展,虚拟现实和增强现实将继续创造出更多令人惊叹的应用,为人类带来更加丰富多彩的数字化体验。
588 1
虚拟现实与增强现实:现代科技中的应用