美文网首页
javascript 对象的深度复制

javascript 对象的深度复制

作者: faye0907 | 来源:发表于2018-01-04 23:09 被阅读0次

    在组件直接的通讯中,我们经常需要传递复杂的数据对象data,如果接收的组件直接对data进行处理,其处理结果将是发送方和接收方的数据data都被改变,如果你需要发送方和接收方各自保留自己的数据格式和处理结果,互不影响,接收方就需要对data进行深度copy,断开数据的引用关系,然后再对copy后的对象进行处理。
    一、简单对象的复制
    1.json对象 Object.assign
    对于简单的json对象(只有一层结构)可以直接用Object.assign();
    let person={ name:'Tom', age:25};
    let person2=Object.assign({},person);
    person2.name='Jim';
    运行结果:
    person==>{ name:'Tom', age:25}
    person2==>{ name:'Jim', age:25}

    2.数组对象 concat/filter
    let arr1=[1,2,4,5,6];
    let arr2=arr1.concat(9);
    let arr3=arr1.filter(i=>{return i!=4;});
    运行结果:
    arr2==>[1,2,4,5,6,9]
    arr3==>[1,2,5,6]

    然后对arr2和arr3加入数据:
    arr2.push(11);
    arr3.push(7);
    运行结果:
    arr1==>[1,2,4,5,6]
    arr2==>[1,2,4,5,6,9,11]
    arr3==>[1,2,5,6,7]

    二、复杂对象的复制(对象的深度超过2层,并包含json和数组等类型)
    let person={ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ]};
    let person2=Object.assign({},person});
    运行结果:
    person==>{ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ]}
    person2==>{ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ]}

    如果直接用Object.assign复制,对name和age的更改还好,但是如果对属性friends修改,将会破坏person的数据。
    person2.name='Li';
    person2.friends=['Jack', 'Tim' , 'Hp','Sam'] ;
    运行结果:
    person==>{ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp','Sam' ]}
    person2==>{ name:'Li', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ,'Sam']}

    这种情况下可以用json对象转字符串的方式来实现复制:
    let person={ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ]};
    let person2=JSON.stringify(person);
    person2=JSON.parse(person2);
    person2.name='Li';
    person2.friends=['Jack', 'Tim' , 'Hp','Sam'] ;
    运行结果:
    person==>{ name:'Tom', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ]}
    person2==>{ name:'Li', age:25, friends:[ 'Jack', 'Tim' , 'Hp' ,'Sam']}

    相关文章

      网友评论

          本文标题:javascript 对象的深度复制

          本文链接:https://www.haomeiwen.com/subject/ofidnxtx.html