JS 深拷贝和浅拷贝概念，以及实现深拷贝的三种方式
2024-03-21 02:30:17
一、理解堆栈，基本数据类型与引用数据类型
1、堆栈
栈（stack）：系统自动分配的内存空间，内存会由系统自动释放，用来存放函数的参数值，局部变量的值等，特点是先进后出。
堆（heap）：系统动态分配的内存，内存大小不一，内存不会自动释放。一般由程序员分配释放，主要负责像Obejct这种变量类型的存储。
2、基本数据类型
概念：存放在栈内存中的简单数据段，数据大小确定，内存空间大小确定。
6种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol
3、引用数据类型
概念：存放在堆内存中的数据，如对象、数组、函数等。名存在栈内存，值存在堆内存，栈内存会提供一个引用的地址指向堆内存中的值
二、深拷贝与浅拷贝
1、浅拷贝
概念：子对象复制父对象，父子对象发生关联，两者属性值指向同一内存空间。简单来讲，就是改变其中一个对象，另一个对象也会跟着改变。
举例：
let a = [0,1,2],
b = a; a[0] = 3; console.log(a,b) // [3,1,2] [3,1,2]
2、深拷贝
概念：拷贝对象各个层级的属性。简单的讲，就是复制出来的每个对象都有属于自己的内存空间，不会互相干扰。
三、实现深拷贝的几种方式
1、封装深拷贝函数
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === "object") {
for(key in obj) {
if(obj.hasOwnProperty(key)) {
// 判断 obj 是否是对象,如果是，递归复制
if(obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
}else{
// 如果不是
objClone[key] = obj[key];
}
}
}
}
return objClone
}
let a = [1,2,3,4],
b = deepClone(a);
a[0] = 5;
console.log(a,b)
2、借用JSON对象的 parse 和 stringify
function deepClone(obj){
let newObj = JSON.stringify(obj);
let objClone = JSON.parse(newObj);
return objClone;
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
原理：基本类型拷贝是直接在栈内存新开空间，直接复制一份名-值，两者互不影响。
而引用数据类型，比如对象，变量名在栈内存，值在堆内存，拷贝只是拷贝了堆内存提供的指向值的地址，而JSON.stringify()巧就巧在能将一个对象转换成字符串，也就是基本类型，那这里的原理就是先利用JSON.stringify()将对象转变成基本数据类型，然后使用了基本类型的拷贝方式，再利用JSON.parse()将这个字符串还原成一个对象，达到了深拷贝的目的。
3、借用 JQ 的 extend 方法实现深拷贝。
$.extend([deep], target, ...object);
deep 表示深拷贝，Boolean
target 目标对象
...object 需要进行合并的对象
本文是对于深浅拷贝的学习笔记整理记录。感谢 听风是风 博主的分享！
原文链接：https://www.cnblogs.com/echolun/p/7889848.html
最新文章
- Thinkphp5简单初体验
- ZOJ 3941 Kpop Music Party 贪心
- Aggregation Models
- DLog 技巧
- Linux程序设计 读笔2 Shell脚本
- uva 10905 Children's Game (排序）
- 最长递增子序列hdu1087
- CJOJ 1331 【HNOI2011】数学作业 / Luogu 3216 【HNOI2011】数学作业 / HYSBZ 2326 数学作业（递推，矩阵）
- XPath和CssSelector定位总结
- SQLServer 对已有数据表添加自增主键
- linux学习第九天 (Linux就该这么学)
- ES6class
- 数学软件Matlab的使用感受
- What does "exceeded limit of maxWarmingSearchers=X" mean?
- Linux入门练习操作命令
- 【Unity_UWP】Unity 工程发布win10 UWP 时的本地文件读取 （下篇）
- PHP 登录DEMO
- 基于 jQuery支持移动触摸设备的Lightbox插件
- 关于JavaScript对象中的一切（二） -- 继承
- Java编辑环境搭建