js浅拷贝和深拷贝小记

发表于 | 更新于

新来实习的同事遇到个bug找我解决，我也懵逼了半天，才发现是深浅拷贝的问题。在此复习一下js深浅拷贝的相关知识

浅拷贝

我自己的理解是浅拷贝只是复制了一个内存的指针,复制的变量和旧的变量指向同一个内存地址。浅拷贝是指只复制一层对象，当对象的属性是引用类型时，实质复制的是其引用,只要变量变了,其他的变量也会跟着改变;

实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

//当一个对象属性的引用值改变时将导致另一个也改变
shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

深拷贝

深拷贝是指复制对象的所有层级,开辟了一个新的内存。

实现方法

通过递归实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
deepCopy(o) {
    if (o instanceof Array) {
      let n = [];
      for (let i = 0; i < o.length; ++i) {
        n[i] =deepCopy(o[i]);
      }
      return n;
    } else if (o instanceof Object) {
      let n = {}
      for (let i in o) {
        n[i] = deepCopy(o[i]);
      }
      return n;
    } else {
      return o;
    }
  }

通过JSON解析实现

1
JSON.parse(JSON.stringify(obj))
0%