浅谈js中的浅拷贝与深拷贝

浅拷贝

浅拷贝是指只拷贝第一层的数据，如果有深层嵌套，那么只拷贝其深层的引用。

缺点：拷贝之后的复杂数据类型（如object等），如果改变其深层属性那么其原始对象的深层结构的属性值也会一并改变。

const {log} = console;
const shallowCopy = function (obj) {
    if (typeof obj === 'undefined') return;
    if (typeof obj === 'string' || typeof obj === 'number') return obj;
    let newObj = Array.isArray(obj) ? [] : {};
    if (typeof obj === 'object') {
        for(key in obj) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
const p = {
    name: '张三',
    age: 40,
    children: [{
        name: '张三三',
        age: 18
    }, {
        name: '张三彩',
        age: 19
    }]
};
p1 = shallowCopy(p);
p1.children[0].name = '张三丰';
p1.age = 41;
log(p,p1);

测试结果

深拷贝

所谓深拷贝是指对复杂数据结构的每一层结构里面的属性值都进行拷贝，从而使得操纵拷贝后的新对象，不影响旧对象各层的属性值。

const { log } = console;
const deepCopy = function (obj) {
    if (typeof obj === 'undefined') return;
    if (typeof obj === 'number') return obj;
    let newObj = Array.isArray(obj) ? [] : {};
    if (typeof obj === 'object') {
        for (key in obj) {
            newObj[key] = typeof obj[key] !== 'object' ? obj[key] : deepCopy(obj[key]);
        }
    }
    return newObj;
}
// test
const p = {
    name: '张三',
    age: 40,
    children: [{
        name: '张三三',
        age: 18
    }, {
        name: '张三彩',
        age: 19
    }]
};
p1 = deepCopy(p);
p1.children[0].name = '张三丰';
log(p);
log(p1);

测试结果