深拷贝的方法

深拷贝方法⭐⭐⭐

//准备拷贝的数据 
let obj={
        name:'lht',
        study:[
            {
                id:'vue2',
                dgree:'***'
            },
            {
                id:'AntdVue',
                dgree:'***'
            }
        ],
        girlFriends:{
            _name:'xxx',
            agx:18,
        },
    	call(){
            console.log('gg')
        }
    }

#date内置对象和正则未测试    

JSON--(无法拷贝function)

// 第一种 JSON
  let objClone=JSON.parse(JSON.stringify(obj));
  console.log(objClone);
//打印结果
	{
        name:'lht',
        study:[
            {
                id:'vue2',
                dgree:'***'
            },
            {
                id:'AntdVue',
                dgree:'***'
            }
        ],
        girlFriends:{
            _name:'xxx',
            agx:18,
        }
    }

Object.assign()--(只能拷贝一层)

// 第一种 JSON
  let objClone2=Object.assign(obj);
  console.log(objClone2);
//打印结果
	{ //
        name:'lht',
        study:[
            {
                id:'vue2',
                dgree:'***'
            },
            {
                id:'AntdVue',
                dgree:'***'
            }
        ],
        girlFriends:{//这里的对象只显示了一层
            _name:'xxx',
            agx:18,
        }
    }

递归函数--(真正深拷贝)

//第三钟 递归函数
function deepCopy(obj){
  var copyObj={ };
  for(var key in obj){
    if(obj.hasOwnProperty(key) == true){
       if(obj[key] instanceof Object){
	 copyObj[key] = deepCopy(obj[key])
       else{
	 copyObj[key] = obj[key]
	}
       }
    }
   return copyObj;
}

let objClone3 = deepCopy(obj)
console.log(objClone3)
//打印结果
	{
        name:'lht',
        study:[
            {
                id:'vue2',
                dgree:'***'
            },
            {
                id:'AntdVue',
                dgree:'***'
            }
        ],
        girlFriends:{
            _name:'xxx',
            agx:18,
        }
    }
//或  递归函数实现深拷贝写法二
// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
  // 定义一个变量
  let result;
  // 如果当前需要深拷贝的是一个对象的话
  if (typeof target === "object") {
    // 如果是一个数组的话
    if (Array.isArray(target)) {
      result = []; // 将result赋值为一个数组,并且执行遍历
      for (const i in target) {
        // 递归克隆数组中的每一项
        result.push(deepClone(target[i]));
      }
      // 判断如果当前的值是null的话;直接赋值为null
    } else if (target === null) {
      result = null;
      // 判断如果当前的值是一个RegExp对象的话,直接赋值
    } else if (target.constructor === RegExp) {
      result = target;
    } else {
      // 否则是普通对象,直接for in循环,递归赋值对象的所有值
      result = {};
      for (const i in target) {
        result[i] = deepClone(target[i]);
      }
    }
    // 如果不是对象的话,就是基本数据类型,那么直接赋值
  } else {
    result = target;
  }
  // 返回最终结果
  return result;
}

jQuery的extend方法--(基于jQuery)

#不推荐使用
$.extend(true, targetObj, obj);
三个参数
deep:如果值为true,为深拷贝,否则浅拷贝。默认是浅拷贝
targetObj:拷贝的对象
obj:被拷贝的对象

Lodash深拷贝--(安装依赖)

//将使用的lodash引入使用的组件中
  import _ from 'lodash'
//使用_.cloneDeep深拷贝(变量)
  const objClone = _.cloneDeep(this.obj)
posted @ 2022-03-29 09:13  残星落影  阅读(109)  评论(0)    收藏  举报