浅拷贝与深拷贝

浅拷贝和深拷贝的区别:是否真正获取一个对象的值。

值和引用:

简单值,基本数据类型:数字、字符串、null、undefine、symbol。简单值通过复制的方式来复制和传递

引用值,引用类型:对象、数组、函数。引用值指向值本身而非变量

使用值引用还是值复制由值的类型决定。

1.浅拷贝

Object.assign(obj,obj2)  //合并两个对象

(...)扩展运算符

   let obj1 = {
            name: 'hu',
            age: 45
        }
        let obj2 = {
            name: "45",
            zge: 10
        }
        let obj3 = Object.assign(obj1, obj2)
        let obj4 = {...obj1
        }
        obj1.name = "zaiia"
        console.log(obj3); //{name: 'zaiia', age: 45}
        console.log(obj1); //{name: 'zaiia', age: 45}
        console.log(obj4); //{name: '45', age: 45}

2.浅拷贝的实现

1)

   //1.JSON.parse(JSON.stringify(obj))
        // JSON.stringify(obj) 将对象解析为字符串
        //JSON.parse()将字符串转为对象
        function clone(obj) {
            let copy = JSON.parse(JSON.stringify(obj))
            return copy;
        }
        let obj = {
            name: 'aha',
            age: undefine,
            hi: function() { //undefine,function()会报错
                console.log(this.name);
            }
        }
        console.log(clone(obj));

2)

 //2.使用lodash库的cloneDeep()方法
        //用法:cloneDeep(value) value为要拷贝的值
         var obj = {
              name: 'aha',
              age: 15
          }
          var copy = _.cloneDeep(obj)
          obj.name = 'hu'
          console.log(obj, copy); 

3)封装一个深拷贝,思想:如果是基本数据类型就直接复制,如果是引用类型,就遍历所有项,如果是基本数据类型就直接复制,如果是引用类型执行递归

  function clone(obj) {
            let newObj = Array.isArray() ? [] : {}
            if (typeof obj === "object") {
                for (value in obj) {
                    if (typeof obj[value] === "object") {
                        newObj[value] = clone(obj[value])
                    } else {
                        newObj[value] = obj[value]
                    }
                }
            }
            return newObj
        }
        let obj1 = {
                name: 'aha',
                age: 45
            }
            //测试
        let obj2 = clone(obj1)
        obj2.name = "hu",
            console.log(obj1); //{name: 'aha', age: 45}
        console.log(obj2); // {name: 'hu', age: 45}

 

posted @ 2021-11-14 16:16  陌菡  阅读(89)  评论(0)    收藏  举报