浅拷贝和深拷贝

 

当我们进行浅拷贝时，拷贝基本数据类型和引用数据类型的情况是不一样的。

为什么呢？因为两种情况下内存发生的变化不一样。

1、拷贝基本数据类型举例：

    var video = 100;
    var copy = video;
    copy = 10000;
    console.log(video);     // 100
    console.log(copy);      // 10000

我们发现修改copy的值，不会影响video。

内存中发生什么呢？video相当于一个标识符，会为其分配一个内存地址，存储的值为100。拷贝给copy，vedio和copy都指向一个内存地址。然后给copy赋新值，会开辟新的内存地址。存在栈内存中。

 

 2、拷贝引用数据类型举例：

    var video = {
          like: 100
    };
    var copy = video;
    copy.like = 10000;
    console.log(video);
    console.log(copy);

结果发现修改copy，会影响video。

 

 此时内存发生什么呢？video相当于一个标识符，会为其分配一个栈内存地址，这个内存地址提供一个新的引用地址指向堆内存中的值。

 我们可以通过什么方法进行浅拷贝？（注意是对象）

1、惯用的方法，即赋值法 2、通过Object.assign() ，从代码上可以看出前提是对象（当然了，基本数据类型虽然也不会报错）3、for...in（只循环第一层）

这里只提供下for...in的方法代码

function simpleCopy(obj1) {
      var obj2 = Array.isArray(obj1) ? [] : {};
      for (let i in obj1) {
        obj2[i] = obj1[i];
      }
      return obj2;
    }
    var obj1 = {
      a: 1,
      b: 2,
      c: {
        d: 3
      }
    };
    var obj2 = simpleCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    console.log(obj1);
    console.log(obj2);

 

深拷贝方法：

1、扩展运算符

（1）拷贝数组

var a = [1,2];
var b = [...a];
console.log(b)
b[0] = 11;
console.log(a)
console.log(b)

 （2）拷贝对象

var obj = {
    name: '小明',
    age: 12
};
var newObj = {...obj};
console.log(newObj)
newObj.name = '小红';
console.log(obj)
console.log(newObj)

2、使用JSON.parse(JSON.stringify())

    var video = {
      like: 100
    };
    var copy = JSON.parse(JSON.stringify(video));
    copy.like = 10000;
    console.log(video);
    console.log(copy);

缺点：它是不可以拷贝 undefined ， function， RegExp 等等类型的

拷贝失败案例1：function

<script type="text/javascript">
        var obj = {
            name: '小明',
            age: 6,
            say: function() {
                console.log('我会打篮球')
            }
        }
        function deep(obj) {
            return JSON.parse(JSON.stringify(obj))
        }
        var newObj = deep(obj)
        console.log(obj)
        console.log(newObj)
</script>

结果1：

 拷贝失败案例2：undefined

<script type="text/javascript">
        var obj = undefined
                function deep(obj) {
            return JSON.parse(JSON.stringify(obj))
        }
        var newObj = deep(obj)
            console.log(obj)
            console.log(newObj)
</script>

结果2：

 其它：

3、递归拷贝，封装一个函数（推荐）

 let obj1 = {
        a: {
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
            console.log(this.a)
        },
        c: [
            {
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
    console.log(obj1);
    console.log(obj2);

封装的深拷贝函数如下：

// 定义一个深拷贝函数  接收目标target参数
    function deepClone(target) {
      // 定义一个变量
      let result;
      // 如果当前需要深拷贝的是一个对象的话
      if (typeof target === "object") {
        // 如果是一个数组的话
        if (Array.isArray(target)) {
          result = []; // 将result赋值为一个数组，并且执行遍历
          for (let i in target) {
            // 递归克隆数组中的每一项
            result.push(deepClone(target[i]));
          }
          // 判断如果当前的值是null的话；直接赋值为null
        } else if (target === null) {
          result = null;
          // 判断如果当前的值是一个RegExp对象的话，直接赋值
        } else if (target.constructor === RegExp) {
          result = target;
        } else {
          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {};
          for (let i in target) {
            result[i] = deepClone(target[i]);
          }
        }
        // 如果不是对象的话，就是基本数据类型，那么直接赋值
      } else {
        result = target;
      }
      // 返回最终结果
      return result;
    }