深拷贝和浅拷贝

发表于 | 分类于 | |
字数统计: 字 | 阅读时长 ≈ 分钟

从下述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。

通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。

1
2
3
4
5
6
let a = {
    age: 1
}
let b = a
a.age = 2
console.log(b.age) // 2

浅拷贝

简单的引用复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function shallowClone(copyObj) {
  var obj = {};
  for ( var i in copyObj) {
    obj[i] = copyObj[i];
  }
  return obj;
}
var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = shallowClone(x);
console.log(y.b.f === x.b.f);     // true

Array的slice和concat方法

Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝：

  • 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响。例子如下：

1
2
3
4
5
6
7
var array = [1,2,3]; 
var array_shallow = array; 
var array_concat = array.concat(); 
var array_slice = array.slice(0); 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false，“看起来”像深拷贝
console.log(array === array_concat); //false，“看起来”像深拷贝

可以看出，concat和slice返回的不同的数组实例，这与直接的引用复制是不同的。而从另一个例子可以看出Array的concat和slice并不是真正的深复制，数组中的对象元素(Object,Array等)只是复制了引用。如下：

1
2
3
4
5
6
7
8
9
var array = [1, [1,2,3], {name:"array"}]; 
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5;  //改变array_concat中数组元素的值 
console.log(array[1]); //[5,2,3] 
console.log(array_slice[1]); //[5,2,3] 
array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值 
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice

Object.assign()

首先可以通过 Object.assign 来解决这个问题。

1
2
3
4
5
6
let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

展开运算符

当然我们也可以通过展开运算符（…）来解决

1
2
3
4
5
6
let a = {
    age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) // 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了

1
2
3
4
5
6
7
8
9
let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
let b = {...a}
a.jobs.first = 'native'
console.log(b.jobs.first) // native

请注意，Object.assign()会触发setter，而展开操作符则不会。

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。

深拷贝

JSON对象的parse和stringify

这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

1
2
3
4
5
6
7
8
9
let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是该方法也是有局限性的：

  • 会忽略 undefined
  • 不能序列化函数
  • 不能解决循环引用的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)

如果你有这么一个循环引用对象，你会发现你不能通过该方法深拷贝

img

在遇到函数或者 undefined 的时候，该对象也不能正常的序列化

1
2
3
4
5
6
7
let a = {
    age: undefined,
    jobs: function() {},
    name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}

你会发现在上述情况中，该方法会忽略掉函数和 undefined 。

zepto中的深拷贝代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 内部方法：用户合并一个或多个对象到第一个对象
   // 参数：
   // target 目标对象  对象都合并到target里
   // source 合并对象
   // deep 是否执行深度合并
   function extend(target, source, deep) {
       for (key in source)
           if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
               // source[key] 是对象，而 target[key] 不是对象， 则 target[key] = {} 初始化一下，否则递归会出错的
               if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                   target[key] = {}

               // source[key] 是数组，而 target[key] 不是数组，则 target[key] = [] 初始化一下，否则递归会出错的
               if (isArray(source[key]) && !isArray(target[key]))
                   target[key] = []
               // 执行递归
               extend(target[key], source[key], deep)
           }
           // 不满足以上条件，说明 source[key] 是一般的值类型，直接赋值给 target 就是了
           else if (source[key] !== undefined) target[key] = source[key]
   }

   // Copy all but undefined properties from one or more
   // objects to the `target` object.
   $.extend = function(target){
       var deep, args = slice.call(arguments, 1);

       //第一个参数为boolean值时，表示是否深度合并
       if (typeof target == 'boolean') {
           deep = target;
           //target取第二个参数
           target = args.shift()
       }
       // 遍历后面的参数，都合并到target上
       args.forEach(function(arg){ extend(target, arg, deep) })
       return target

MessageChannel

但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝性能最快的。当然如果你的数据中含有以上三种情况下，可以使用 lodash 的深拷贝函数。

如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 MessageChannel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

var obj = {a: 1, b: {
    c: b
}}
// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const clone = await structuralClone(obj);

自己实现深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function checkType(obj) {
      return Object.prototype.toString.call(obj).slice(8, -1);
    }
    function deepClone(obj) {
      let result, getObjClass = checkType(obj);
  //判断拷贝的数据类型
  //初始化变量result成为最终克隆的数据
      if (getObjClass === 'Object') {
        result = {};
      } else if (getObjClass === 'Array') {
        result = [];
      } else {
        return obj;// 如果是其他数据类型不复制，直接将数据返回
      }
       // 遍历目标对象
      for (let key in obj) {
        let value = obj[key];
        //判断目标结构里的每一项是否存在对象/数组
        if (checkType(value) === 'Object' || checkType(value) === 'Array') {
          result[key] = deepClone(value);
        } else {//获取到的value是基本的数据类型或者是函数
          result[key] = value;
        }
      }
      return result;
    }
    //测试代码
    let obj1 = ['a',{'name': 'lisi'},[1,2]];
    console.log(obj1);
    let obj2 = deepClone(obj1);
    obj2[1].name = 'andy';
    console.log(obj2)

参考链接：

js 深拷贝 vs 浅拷贝

interviewmap

javaScript中浅拷贝和深拷贝的实现

对象初始化-mdn

坚持原创技术分享，您的支持将鼓励我继续创作！