深浅拷贝的理解

Posted 2021-01-22 -roc

一、理解

1、深拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另一个对象的数据也会发生变化。

　　因为深拷贝拷贝的是索引

2、浅拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另外一个对象的数据 不会发生变化。

　　因为浅拷贝拷贝的是数值

二、知识点补充：

1、合并对象：

 Object.assign()合并对象 
 参数1:需要合并的对象A
 参数2：需要进行合并的对象B
 .....

 返回值是一个合并后的对象

2、堆 和 粘 的理解

栈：原则  先进后出
    栈里面基本上全部都是放的基本数据类型  和  索引 地址

堆：
    堆里面基本上全部都是放的引用数据类型   数据都存放在堆里面  而索引都存在栈里面

 

三、浅拷贝的使用

//拷贝的对象是多层的情况

例：
var obj = {
    person:{
        name:"QQQ",
        age:33,
        sex:"女"
    }
}    

方案一：
var newObj = Object.assign({},obj)
console.log(newObj);
newObj.person.name = "AAA";

console.log(obj,newObj)

方案二：
//合并对象 跟Object.assign用法一样
var newObj = $.extend({},obj);

console.log(newObj)
newObj.person.name = "AAA";
console.log(obj,newObj)

方案三：
//封装函数遍历
function copyObj(obj){
    var newObj = {};
    for(var key in obj){
        newObj[key] = obj[key]
    }
    return newObj;
}

var newObj = copyObj(obj);

newObj.person.name="AAA";
console.log(obj,newObj)

 

四、深拷贝的使用

分为：对象是单层和多层的情况

    //对象是单层的情况
var obj = {
    name:"WWW",
    age:33,
    sex:"不详"
}
方案一：
var newObj = Object.assign({},obj);
console.log(newObj);
newObj.name = "EEE";
console.log(obj,newObj)
----------------------------------------------

    //对象是多层的情况
var obj = {
    person: {
        name: "QQQ",
        age: 33,
        sex: "女"
    }
}

方案二、
//前面加true，则表示浅拷贝（注意区别深拷贝）
var newObj = $.extend(true,{},obj)

console.log(newObj);
newObj.person.name = "AAA";
console.log(obj,newObj)

方案三：
    //使用JSON.parse  JSON.stringify

var newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);
newObj.person.name="AAA";
console.log(obj,newObj)