深拷贝方法⭐⭐⭐
//准备拷贝的数据
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)