概念和定义

  1. 定义: 深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
  2. 浅拷贝:仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅复制出来的对象也会相应的改变。
  3. 深拷贝:在计算机中开辟一块新的内存地址用于存放复制的对象。

实际的例子

1.浅拷贝例子

  1. var obj = {
  2. name:'wsscat',
  3. age:0
  4. }
  5. var obj2 = obj;
  6. obj2['c'] = 5;
  7. console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
  8. console.log(obj2);////Object {name: "wsscat", age: 0, c: 5}
  9. var arr1 = [1,2,3,4];
  10. var arr2 = arr1;
  11. arr2.push(5);
  12. console.log(arr1); // [1,2,3,4,5]
  13. console.log(arr2); // [1,2,3,4,5]

2.深拷贝方法一: 完全拷贝

  1. var obj = {
  2. a:2,
  3. b:3,
  4. o: {
  5. x: 100
  6. }
  7. }
  8. var objStr = JSON.stringify(obj);
  9. var obj2 = JSON.parse(objStr);
  10. obj2.o.x = 1000;
  11. consolo.log(obj2.o.x); // 1000
  12. consolo.log(obj.o.x); // 100

3.深拷贝方法二: 完全拷贝

  1. var obj = {
  2. name: 'wsscat',
  3. age: 0
  4. }
  5. var deepCopy = function(source) {
  6. var result = {};
  7. for(var key in source) {
  8. if(typeof source[key] === 'object') {
  9. result[key] = deepCopy(source[key])
  10. } else {
  11. result[key] = source[key]
  12. }
  13. }
  14. return result;
  15. }
  16. var obj3 = deepCopy(obj)
  17. obj.name = 'autumns';
  18. console.log(obj);//Object {name: "autumns", age: 0}
  19. console.log(obj3);//Object {name: "wsscat", age: 0}

4. 深拷贝方法3 for in 的方法只能拷贝第一层

  1. // for in 的方法只能拷贝第一层, 引用数据类型无法拷贝
  2. var obj = {
  3. name: 'wsscat',
  4. age: 0,
  5. arr: [1, 2, 3]
  6. }
  7. var obj2 = {};
  8. for (var p in obj) {
  9. obj2[p] = obj[p];
  10. }
  11. obj2.age = 100;
  12. console.log(obj.age);
  13. obj2.arr.push(4);
  14. console.log(obj.arr);

5.使用es6的扩展运算符得到的对象也是只拷贝第一层

  1. var obj1 = {
  2. name: 'zs',
  3. age: 18,
  4. arr: [1, 2, 3]
  5. }
  6. var obj2 = {
  7. ...obj1
  8. }
  9. obj2.age = 20;
  10. console.log(obj1.age);
  11. obj2.arr.push(4);
  12. console.log(obj1.arr);