js对象的拷贝（浅拷贝与深拷贝）

JS有其中数据类型，六种原始（基本）类型和Object。

    六种基本数据类型String,Number,Boolean,Null,Undefind,Symbol。这六种类型的赋值，就是值传递。特殊类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值，会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象，而不是复制对象的引用，就要用到对象的深拷贝。

    

浅拷贝：

1.‘=’赋值。

最基础的赋值方式，只是将对象的引用赋值，属于浅拷贝范畴。

2.Object.assign()

Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

Object.assign(target, ...sources)

参数：
target：目标对象。
sources：任意多个源对象。
返回值：目标对象会被返回。

var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

需要注意的是：
Object.assign()可以处理一层的深度拷贝，如下：

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

深拷贝：

1.手动复制

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

这种方式只适用于自己清楚结构并且数据量小的情况； 

2.JSON做字符串转换

用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

这样做是真正的Deep Copy，这种方法简单易用。

但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

在拷贝的过程中还有可能造成部分数据损失。

var obj = {a: '', b: 0, c: undefined, d: null, e: false, f: true}
var js = JSON.parse(JSON.stringify(obj))
console.log(js) 
// {a: "", b: 0, d: null, e: false, f: true}
// c: undefined 损失了

也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun);
// 'function'
console.log(typeof obj2.fun);
// 'undefined' <-- 没复制

3.递归拷贝

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);

这种方法会出现value值为null时出错的情况。 

在这里我们可以使用穷尽对象种类的方法判断：

 function deepClone(obj){
        var result;
        switch(typeof obj){
            case 'undefined':
            break;
            case 'string':
            result = obj+'';
            break;
            case 'number':
            result = obj-0;
            break;
            case 'boolean':
            result =obj;
            break;
            case 'object':
                if(obj ===null){
                    result = null;
                } else {
                    if(Object.prototype.toString.call(obj).slice(8,-1)==='Array'){
                        result=[];
                        for(var i=0;i<obj.length;i++){
                            result.push(deepClone(obj[i]));
                        }
                    }else{
                        result={};
                        for(var k in obj){
                            result[k]=deepClone(obj[k]);
                            }
                        }
                };
                break;
             default:
                 result = obj;
                 break;
            
        }
        return result
    }

 

4.使用Object.create()方法

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

 这种方法会出现value值为null时出错的情况。 

5.jquery

jquery 有提供一个$.extend可以用来做 Deep Copy。

var $ = require('jquery');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);
// false

 

6.第三方函数

还有一些其它的第三方函数库有深拷贝function，如lodash。