js_三种方法实现深拷贝

深拷贝（递归）

适用于需要完全独立于原始对象的场景，特别是当对象内部有引用类型时，为了避免修改拷贝后的对象影响到原始对象，就需要使用深拷贝。

// 原始对象
const obj = { 
      uname: 'Lily',
      age: 19,
      hobby: ['乒乓球', '篮球'],
      family:{
        baby:'老baby'
      }
    }
    // 新对象
    const o = {} 
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      for(let k in oldObj){
        // 递归优先级 Array → Object
        // 判断对象属性是否为数组类型
        if(oldObj[k] instanceof Array){
          newObj[k] = []  // newObj[k] === o.hobby
          deepCopy(newObj[k], oldObj[k])
        }else if (oldObj[k] instanceof Object) {
          newObj[k] = {}  // newObj[k] === o.family
          deepCopy(newObj[k], oldObj[k])
        }
        else{
        // newObj[k] === o.uname
          newObj[k] = oldObj[k]   
        }
      }
    }
    deepCopy(o, obj)
    o.age = 20
    o.hobby[0] = '足球'
    o.family.baby = '小baby' 
    console.log(o)   
    console.log(obj)

在这里插入图片描述

深拷贝( lodash )

Lodash 的 __.cloneDeep 方法可以实现深拷贝，它能够处理各种复杂的数据类型和嵌套结构。

语法规范：_.cloneDeep(value)

// 需要先在src中引入 lodash.min.js 文件
<script src="./js/lodash.min.js"></script>
<script>
	const obj = {
	      uname:'Lily',
	      age:18,
	      hobby:['乒乓球','足球'],
	      family:{
	        baby: '老baby'
	      }
	    }
	const o = _.cloneDeep(obj)
	o.family.baby = '小baby'
	console.log(o)  
	console.log(obj) 
</script>

lodash实现深拷贝

深拷贝( JSON )

JSON.stringify() 用于将JavaScript对象或值转换成一个JSON字符串

JSON.parse(text[, reviver]) 将一个符合JSON格式的字符串转换成JavaScript对象或数组

const obj = {
      uname:'Lily',
      age:18,
      hobby:['乒乓球','足球'],
      family:{
        baby: '老baby'
      }
    }
	const o = JSON.parse(JSON.stringify(obj))
	 // 将原对象转换成字符串后又转换为对象，这个新对象与原对象无关联
    console.log(o)
    o.hobby[0] = '篮球'
    o.family.baby = '小baby'
    console.log(obj)