JavaScript深拷贝&浅拷贝

数据类型分为简单数据类型和复杂数据类型,两者存储数据的方式不同:

  • 基本数据类型:是直接存储在栈里面的。
  • 引用数据类型:是在栈里面存放一个地址,真实的数据存储在堆内存里面,地址指向这个真实数据。

深拷贝和浅拷贝是指复制引用数据类型(下面统指对象)时的两种不同的方法。

特性 浅拷贝 深拷贝
复制层级 仅复制对象的第一层属性 递归复制所有层级的属性
引用类型处理 共享引用(修改副本会影响原对象) 完全独立(修改副本不影响原对象)
性能 高效(仅复制一层) 较低(需递归处理所有层级) '

浅拷贝的方法

  1. 扩展运算符
const copy = { ...original };
  1. Object.assign()
const copy = Object.assign({}, original);
  1. Array.prototype.concat
let arr1 = [1, 2,  [3, 4], 5];
let arr2 = arr1.concat();
arr1[0] = 6; // 不影响arr2
arr[2][0] = 6; //影响arr2
  1. Array.prototype.slice()
let arr1 = [1, 2,  [3, 4], 5];
let arr2 = arr1.slice();
arr1[0] = 6; // 不影响arr2
arr[2][0] = 6; //影响arr2
  1. Array.from()
let arr1 = [1, 2,  [3, 4], 5];
let arr2 = Array.from(arr1);
arr1[0] = 6; // 不影响arr2
arr[2][0] = 6; //影响arr2

深拷贝的方法

1.Json序列化、反序列化

const deepClone = Json.parse(Json.stringify(original));
  1. 第三方库(Lodash)
const _ = require('lodash');
const deepClone = _.cloneDeep(original);
  1. 现代 API:structuredClone()
const deepClone = structuredClone(original);

浅拷贝与 =赋值的区别

当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容