如何实现深拷贝?

121 阅读1分钟

(1)用JSON. stringify把对象转成字符串,再用JSON. parse把字符串转成新的对象。

let obj = {
  name:"小华",
  age:15,
  sex:"男"
}
let obj1 = JSON.parse(JSON.stringify(obj))
console.log(obj); //{ name:'小华', age:15, sex:'男' }
console.log(obj1); //{ name:'小华', age:15, sex:'男' }
console.log(obj === obj1); //false

缺点:函数,日期格式,正则,在JSON.stringify的转换下会出问题

(2)使用递归的方法实现深拷贝

function deepClone(obj){
 let objClone =  Array.isArray(obj) ? [] : {};
 if (obj && typeof obj === 'object') {
   for(let key in obj){
      //判断对象的这条属性是否为对象
    if (obj[key] && typeof obj[key] === 'object'){
        //若是对象进行嵌套调用   
     objClone[key] = deepClone(obj[key]); 
    }else{
     objClone[key] = obj[key]
     }
   }
 }
 return objClone; //返回深度克隆后的对象
}

(3)通过jQuery的extend方法实现深拷贝

let array = [1,2,3,4];
let newArray = $.extend(true,[],array);
console.log(array === newArray);  //false
console.log(newArray);  //[1,2,3,4]

(4)Object. assign()

 //当对象中只有基本数据类型的时候,此方法为深拷贝
let obj = {
  name:"小华",
  age:15,
  sex:"男"
}
let obj1 = {}
Object.assign(obj1,obj)
console.log(obj1) //{ name: '小华', age: 15, sex: '男' }
console.log(obj === obj1); //false

(5)展开运算符

//当对象中只有基本数据类型的时候,此方法为深拷贝
let obj = {name:"李华",sex:"男"}
let obj1 = {...obj}
console.log(obj1) //{name:"李华",sex:"男"}
console.log(obj === obj1) //false
console.log(obj.name === obj1.name)  //false

(6)lodash函数库实现深拷贝
利用lodash. cloneDeep()实现深拷贝