曼夭29
曼夭29

详解深拷贝和浅拷贝

1.首先需要知道的知识点：
（1）5种js基本数据类型：number，string，null,undefined,Boolean。
name,value都存在于栈内存中：例如var a=1;在这里插入图片描述
当var b=a 时，复制的是a的值，不受a值变化的影响。

（2）引用数据类型：function，Array,object，Date等
name 存储于栈中，value存储于堆内存中
详解深拷贝和浅拷贝_第1张图片
当var b=a 时，b值和a值一样都指向同一个地址，受a值变化的影响。

2.浅拷贝就是当b=a时，a值变化，b值也随着变化；
深拷贝是当b=a时，a值变化，b值不变。

3 .浅拷贝的实现方式：

function shadowCopy(target,source){
    for (var key in source){
        if (source.hasOwnProperty(key)){
            target[key]=source[key];
        }
    }
    return target;

}
var obj1={}
var obj2={a:1,b:{c:3}}
obj1=shadowCopy(obj1,obj2)
obj1.b.c=0
console.log(obj1,obj2)

详解深拷贝和浅拷贝_第2张图片
4.深拷贝的实现方法
（1）递归的赋值：

function deepCopy(target,source ) {
   target = Array.isArray( source ) ? [] : {}
    for ( var k in source ) {
        if ( typeof source[ k ] === 'object' ) {
            target[ k ] = deepCopy(target, source[ k ] )
        } else {
            target[ k ] = source[ k ]
        }
    }
    return target
}

 var obj1={}
 var obj2={a:1,b:{c:3}}
 obj1=deepCopy(obj1,obj2)
 obj1.b.c=0
 console.log(obj1,obj2)

在这里插入图片描述

（2）JSON.parse(JSON.stringify(obj))
JSON.stringify():将js对象转化为字符串；
JSON.parse():将字符串转化为js对象。
举例：

var obj1={}
var obj2={a:1,b:{c:3}}
obj1=JSON.parse(JSON.stringify(obj2))

缺点：JSON.parse(JSON.stringify(obj))，其中obj只能为number，array，string，boolean,即那些能够被 JSON 直接表示的数据结构

5.Object.assign(target,source) : object的自带属性,
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
Object.assign()第一级属性属于深拷贝，其他的级别属性属于浅拷贝。

举例如下：

var obj1={a:2}
var obj2={a:1,b:{c:3}}
obj1=Object.assign(obj1,obj2)
obj1.b.c=0;// c属于二级属性
console.log(obj1,obj2)

详解深拷贝和浅拷贝_第3张图片
注意：如果只有一个参数，Object.assign会直接返回该参数。如果该参数不是对象，则会先转成对象，然后返回。
在Object.assign()这里 ，undefined和null无法转成对象

typeof Object.assign(2) //“Number ”
console.log(Object.assign(null))//报错

你可能感兴趣的:(web前端,深浅拷贝)