浅拷贝的使用，以及注意注意问题

最新推荐文章于 2024-07-31 17:14:32 发布

xu　yan　

最新推荐文章于 2024-07-31 17:14:32 发布

阅读量435

点赞数 13

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zheng_yang_liu/article/details/136035867

版权

本文探讨了JavaScript中非基本数据类型的浅拷贝机制，如何影响对象引用，并通过实例展示了如何在处理树形结构数据时进行转换，以保持数据独立性。

摘要由CSDN通过智能技术生成

当赋值右方js数据类型不为7种数据类型时，没有特定的处理
赋值行为默认为浅拷贝(仅拷贝objec的指针(内存地址)，两者数据相互影响)
下面的例子中对ass和uaer赋值为浅拷贝，tmep的变化会影响user进而影响ass

    let temp = {};
    let ass = {};
    let user = {
        name:'John',
        sex:'男',
        age:30,
        sizes:{
            height:180,
            width:50
        },
        address:[]
    }
    temp = user;//给temp赋值,由于对方不是js基础属性，触发浅拷贝，仅仅赋值user对象的指针(内存地址),导致后续的user更改会导致temp内容的更改
    for (let i = 0; i < 2; i++) {
        if(i<1){
            user.address.push({id:2,name:"北京"})//更改temp的值,由于存在浅拷贝
        }else{
            //给tree赋temp的初始值,由于对方不是js基础属性，触发浅拷贝，仅仅赋值user对象的指针(内存地址),导致后续的temp更改会导致ass内容的更改
            ass = temp
        }
    }

    return ass;
}

console.log(setass());

实例 – 单树形结构，数据转换

var obj = [

    { id:3, parent:2 },

    { id:1, parent:null },

    { id:2, parent:1 },

];

/**

 * 目标效果

{

    obj: {

        id: 1,

        parent: null,

        child: [

            {

                id: 2,

                parent: 1,

                child: [

                    {id:3,parent: 2,child:[]}

                [

            }

        ]

    }

}

*/

function treeObj(obj) {

    let temp = {};

    let tree = {};

    for (let i = 0; i < obj.length; i++) {

        temp[obj[i].id] = obj[i];

    }

    for (let i in temp) {

        if (temp[i].parent) {

            if (!temp[temp[i].parent].child) {

                temp[temp[i].parent].child = new Array();

            }

            temp[temp[i].parent].child.push(temp[i]);

        } else {

            tree = temp[i];

        }

    }

    return tree;

}
console.log(treeObj(obj));