深拷贝与浅拷贝的实例与区别 #3

nianxiongdi · 2019-08-04T09:34:14Z

浅拷贝

只是copy一层,更深层次的为引用

实现方式1 - for...in

    let obj = {
        name: 'qy',
        sno: '123456',
        info: {
            address: 'this is beijing',
        }
    }

    let new_obj = {};
    for(let item in obj) {
        new_obj[item] = obj[item];
    }

    new_obj.info.address = 'zhejiang';
    // { name: 'qy', sno: '123456', info: { address: 'zhejiang' } }
    console.log(new_obj);
    console.log(obj);

实现方式2 - es6中的...

    let obj = {
        name: 'qy',
        sno: '123456',
        info: {
            address: 'this is beijing',
        }
    }

    let new_obj = {...obj};

    new_obj.info.address = 'zhejiang';
    // { name: 'qy', sno: '123456', info: { address: 'zhejiang' } }
    console.log(new_obj);
    console.log(obj);

实现方式3 - Object.assign

    let obj = {
        name: 'qy',
        sno: '123456',
        info: {
            address: 'this is beijing',
        }
    }

    let new_obj = Object.assign({}, obj);

    new_obj.info.address = 'zhejiang';
    // { name: 'qy', sno: '123456', info: { address: 'zhejiang' } }
    console.log(new_obj);
    console.log(obj);

深拷贝

拷贝多层,每一级别的数据都要拷贝

实现方式1 - JSON方法

    let obj = {
        name: 'qy',
        sno: '123456',
        info: {
            address: 'this is beijing',
        }
    }

    let new_obj = JSON.parse(JSON.stringify(obj));
    new_obj.info.address = 'zhejiang';

    console.log(new_obj);
    //{ name: 'qy', sno: '123456', info: { address: 'zhejiang' } }
    console.log(obj);
    // { name: 'qy', sno: '123456', info: { address: 'this is beijing' } }

实现方式2 - 递归

function deepCopy(new_obj, old_obj) {

    for(let k in old_obj) {
        let item = old_obj[k];
        
        if(item instanceof Array) { //数组
            new_obj[k] = [];
            deepCopy(new_obj[k], item);
        }else if(item instanceof Object) { //对象
            new_obj[k] = {};
            deepCopy(new_obj[k], item);
        }else { //普通数据
            new_obj[k] = item;
        }
    }


}

let obj = {
    name: 'qy',
    sno: '123456',
    info: {
        address: 'this is beijing',
    }
}

new_obj = {};
deepCopy(new_obj, obj);
new_obj.info.address = 'zhejiang'
console.log(new_obj);
//{ name: 'qy', sno: '123456', info: { address: 'zhejiang' } }
console.log(obj);
// { name: 'qy', sno: '123456', info: { address: 'this is beijing' } }

递归方式3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function deepCopy(source) { 
           if(source instanceof Array) {
                let arr = [];
                for(let i=0;i<source.length; i++){
                    arr.push(deepCopy(source[i]));
                }
                return arr;
           }else if(source instanceof Object) {
                let obj = {}
                for(let k in source) {
                    obj[k] = deepCopy(source[k]);
                }
                return obj;
            }else {
                return source;
            }
        }


        const list = {
            name: 'qy',
            list: [1,2,3,4,5],
            age: 18,
            school: {
                name: 'aaa',
                address: {
                    add1: 'a',
                    add2: 'b'
                }
            }
        }

        const obj = deepCopy(list);
        obj.school.address.add1 = 'ad';
        obj.list = [2,4,5];

        console.log(list);
        console.log(obj);
    </script>
</head>
<body>
    
</body>
</html>

The text was updated successfully, but these errors were encountered:

nianxiongdi added the learing Learning articles label Aug 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

深拷贝与浅拷贝的实例与区别 #3

深拷贝与浅拷贝的实例与区别 #3

nianxiongdi commented Aug 4, 2019 •

edited

Loading

深拷贝与浅拷贝的实例与区别 #3

深拷贝与浅拷贝的实例与区别 #3

Comments

nianxiongdi commented Aug 4, 2019 • edited Loading

浅拷贝

深拷贝

nianxiongdi commented Aug 4, 2019 •

edited

Loading