JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式

一、理解堆栈,基本数据类型与引用数据类型
  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 需要进行合并的对象
4、es6还有object.assign()可以实现深拷贝(补充)
Object.assign(target, …sources)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值