深拷贝和浅拷贝

最新推荐文章于 2024-10-02 05:39:15 发布

Lmm139389

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量42

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/l139389/article/details/131357991

版权

文章详细介绍了JavaScript中深拷贝和浅拷贝的概念及区别，提供了多种实现方法，包括手动创建对象、浅拷贝函数、展开运算符、Object.assign以及递归和JSON方法实现深拷贝。同时，提到了第三方库lodash的_.clone和_.cloneDeep函数在拷贝中的应用。

摘要由CSDN通过智能技术生成

深拷贝：创建一个新的对象，去拷贝另一个对象的属性和属性值。以此类推，把对象所有深层次的属性值都拷贝一遍。

浅拷贝：创建一个新的对象，去拷贝另一个对象的属性和属性值，如果属性值是对象类型，只是把对象的地址拿过来用了。只是拷贝的第一层的属性，第二层用的还是原来的。

实现浅拷贝的方法：

方法一：创建对象

let obj1 = {
            name: 'zhangsan',
            child: {
                name:'zhangsanf'
            }
        };
let obj2 = {}
        obj2.name = obj1.name;
        obj2.child = obj1.child;
        console.log(obj1 === obj2);//false
        //对象的地址一样
        console.log(obj1.child === obj2.child );//true

方法二：浅拷贝函数

// 遍历一个对象的属性名和属性值 添加到 另一个新对象中
function copy(o){
// 遍历一个o的属性名和属性值 添加到 另一个新对象中
   let newObj = {}
   for(let key in o){//其作用是将对象 o 中所有的键值对复制到一个新的对象 newObj 中。
       let value = o[key];
       newObj[key] = value;
   }
   console.log(newObj);
   return newObj;
 }
 let resObj = copy(obj1);//调用copy()
 console.log(resObj);       
 console.log(resObj.child === obj1.child);//true

方法三：展开运算符

//3.展开运算符实现 浅拷贝
let obj3 = {...obj1};
console.log(obj3);
console.log(obj3.child === obj1.child);//true

方法四：assign方法

//4. Object.assign浅拷贝
let obj4 = {}
Object.assign(obj4, obj1)
console.log(obj4);
console.log(obj4 === obj1);//false
console.log(obj4.child === obj1.child);//true

实现深拷贝的方法：

方法一：递归方法实现

function deepCopy(obj) {
        let newObj = {};
        //遍历obj的属性名和属性值 都添加到newObj中，如果属性值是一个对象，做判断，再创建给新对象，把属性值对象key和value添加到 新对象中
        for (let key in obj) {
        let value = obj[key]
        if (typeof value === 'object') {
          // 如果是 创建要给新的value ，和 value 一样
          // 调用自己
            let newValue = deepCopy(value)
            newObj[key] = newValue;

        } else {
                    // 如果属性不是对象，就直接存入新对象中
            newObj[key] = value;
          }
        }
        return newObj;
        }
        let resObj = deepCopy(obj1)
        console.log(resObj === obj1);//false
        console.log(resObj.child === obj1.child);//false
        //调用自己 继续执行 找孩子

方法二：JSON方法

let str = JSON.stringify(obj1)
   console.log(str);
   // JSON.parse 内部会创建一个新对象，放字符串里面的属性名和属性值
   let obj2 = JSON.parse(str)
   console.log(obj1 === obj2);//false
   console.log(obj1.child === obj2.child);//false

第三方库实现深拷贝和浅拷贝:

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

let obj1 = {
            name: 'zhangsan',
            child: {
                name:'zhangx'
            }
        };
        // obj1.child.father = obj1;
        console.log(obj1);
        let obj2 = _.clone(obj1);
        console.log(obj2);
        console.log(obj2 === obj1);//false
        //浅拷贝
        console.log(obj2.child === obj1.child);//true



        //深拷贝
        let obj3 = _.cloneDeep(obj1);
        console.log(obj3);
        console.log(obj3.child === obj1.child);//false