JS中的浅拷贝和深拷贝

浅拷贝和深拷贝

我觉得深拷贝，浅拷贝一般是针对复杂（引用）数据来说的。
1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。
2.深拷贝拷贝所有层，每一层的数据都会拷贝。

1）浅拷贝

1. 使用for ... in来实现浅拷贝

// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
};
var o = {};
// 浅拷贝的第一种方式，使用for...in
for (var k in obj) {
    // k 是属性名   obj[k] 属性值
    // 对于对象来说，k是键值，obj[k]为键值对应的值
    // 对于数组来熟，k是数组的索引，arr[k]为索引对应的值
    o[k] = obj[k];
}
console.log(o);
//修改o中的age会影响obj中的age
o.msg.age = 20;
console.log(obj);

2. 使用Object.assign(target,source_1,...)进行浅拷贝
   该方法可以实现浅拷贝，也可以实现对一维对象的深拷贝。
   1）如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的同名属性会覆盖前面的属性。
   2）如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象返回。
   3）因为null和undefined不能转化为对象，所以第一个参数不能为null或者undefined，会报错。

// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
};
var o = {};
//浅拷贝的第二种方法，es6新增方法浅拷贝
//Object.assign(target,...source)，浅拷贝语法糖
Object.assign(o, obj);  // 浅拷贝 将obj拷贝给o
console.log(o);
//修改o中的age会影响obj中的age
o.msg.age = 20;
console.log(obj);

3. 使用扩展运算符

// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
};
//浅拷贝的第三种方法，扩展运算符
var o = {...obj}
console.log(o);
//修改o中的age会影响obj中的age
o.msg.age = 20;
console.log(obj);

2）深拷贝

1. 使用JSON.stringify()和JSON.parse()方法进行深拷贝
   这种方法可以简单粗暴的实现深拷贝，但是还是存在问题，拷贝的对象中如果有函数，undefined,symbol，当使用JSON.stringify()进行处理后，也会消失。

var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
};
var o = JSON.parse(JSON.stringify(obj))
console.log(obj)
console.log(o)
o.name = 'jack'
console.log(obj)
console.log(o)

2. 自己封装深拷贝函数

// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
};
var o = {};
// 封装函数 
function deepCopy(newobj, oldobj) {
    for (var k in oldobj) {
        // 判断我们的属性值属于那种数据类型
        // 1. 获取属性值  oldobj[k]
        var item = oldobj[k];
        // 2. 判断这个值是否是数组
        // 数组也是对象，所以需要先判断数组，再判断对象
        // 要不然数组就按照对象的方式处理就不对了
        if (item instanceof Array) {
            newobj[k] = [];
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
            // 3. 判断这个值是否是对象
            newobj[k] = {};
            deepCopy(newobj[k], item)
        } else {
            // 4. 属于简单数据类型
            newobj[k] = item;
        }

    }
}
deepCopy(o, obj);
console.log(obj)
console.log(o);
//深拷贝，拷贝后的对象不会影响原对象
o.msg.age = 20;
console.log(obj);
console.log(o)