面试点: 浅拷贝与深拷贝

69 阅读1分钟

1.浅拷贝 : 拷贝的是地址. 修改拷贝后的数据,对原数据有影响

   let obj = {
            name:'张三',
            age:20,
            hobby:['学习','上课','敲代码']
        }
   let obj1 = obj
   obj1.name = '李四'
   console.log(obj,obj1)
       // { name:'李四',age:20,hobby:['学习','上课','敲代码']}
      // { name:'李四',age:20,hobby:['学习','上课','敲代码']}      

2.深拷贝 : 拷贝的是数据. 修改拷贝后的数据,对原数据没有影响

2.1 转json方法 : let obj1 = JSON.parse( JSON.stringify( 对象 ) )

     let obj = {
                name:'张三',
                age:20,
                hobby:['学习','上课','敲代码']
            }
    //(1)先把对象 -> JSON
        // 对象转json的时候,会自动深拷贝
        let json = JSON.stringify( obj )
        //(2)后把json->对象
        let obj1 = JSON.parse( json )

       // 上面步骤可以简写成一行
        let obj1 = JSON.parse( JSON.stringify(obj) )
        obj1.name = '李四'
        obj1.hobby[0] = '游戏'
        console.log(obj,obj1)
       // { name:'张三',age:20,hobby:['学习','上课','敲代码']}
      // { name:'李四',age:20,hobby:['游戏','上课','敲代码']}    

2.2 递归方法

    let obj = {
                name: '张三',
                age: 20,
                hobby: ['学习', '上课', '敲代码'],
                student:{
                    name:'班长',
                    age:30
                }
            }
   //声明深拷贝函数
    function kaobei(obj, newObj) {
        //遍历obj数据
        for (let key in obj) {
            //如果obj[key]是数组,还需要继续遍历拷贝数据
            if (obj[key] instanceof Array) {
                //(1)给newObj声明空数组
                newObj[key] = []
                //(2)循环遍历拷贝数组每一个元素
                // for(let i in obj[key] ){
                //     newObj[key][i] = obj[key][i]
                // }
                kaobei( obj[key] , newObj[key] )
            } else if( obj[key] instanceof Object){
                newObj[key] = {}
                kaobei( obj[key] , newObj[key] )
            }else {
                newObj[key] = obj[key]
            }
        }
    }

    //声明一个空对象,存储拷贝后的数据
    let newObj = {}
    kaobei(obj, newObj)

    newObj.name = '李四'
    newObj.hobby[0] = '游戏'
    newObj.student.name = '666'
    console.log(obj, newObj)
    //{ name: '张三',age: 20,hobby: ['学习', '上课', '敲代码'],student:{ name:'班长', age:30}}
    //{ name: '李四',age: 20,hobby: ['游戏', '上课', '敲代码'],student:{ name:'666', age:30}}

Snipaste_2022-06-19_23-55-07.png