js中的深拷贝方法-笔记

三种办法可以实现深拷贝-笔记

参考来自： 听风是风-深拷贝与浅拷贝的区别，实现深拷贝的几种方法
↑↑↑↑原文讲得非常清晰透彻！推荐大家阅读！ ↑↑↑↑

分别是使用递归实现、使用JS中JSON实现、使用jQuery库的extend方法实现。

1.递归实现

思路：利用递归层层遍历复制所有层级的属性
封装深拷贝函数，遍历每个属性，若是复杂数据类型则递归调用深拷贝函数，若是简单的数据类型直接复制

function deepCopy1(obj){
  let newObj=Array.isArray(obj)?[]:{}
  for(let k in obj){
    let item=obj[k]
    if(typeof(item)==='object'){
      newObj[k]=deepCopy1(item)
    }
    else{
      newObj[k]=item
    }
  }
  return newObj
}

测试用例

var data1={
  name:'lucy',
  msg:{
    age:18,
    sex:'female',
    hobbies:['swimming','dancing','sleeping']
  },
  school:'ahu'
}
var data2=deepCopy1(data1)
//修改data1的某个数据，打印data1和data2，显示data2对应的数据不会受影响
data1.msg.age=16
console.log('data1',data1)
console.log('data2',data2)

输出结果

2.利用JSON.parse和JSON.stringify

先把要拷贝的对象用JSON.stringify转为字符串，再用JSON.parse把字符串转为对象。

function deepCopy2(obj){
  let obj2=JSON.stringify(obj)
  return JSON.parse(obj2)
}

测试用例

var data3=deepCopy2(data2)
//修改data2的某个数据，打印data2和data3，显示data3对应的数据不会受影响
data2.msg.age=14
console.log('data2',data2)
console.log('data3',data3)

输出结果

3.利用jQuery库的extend方法

该方法要引入jQuery库，请在HTML页面中使用

语法：$.extend([deep],target,object1[,objectN])

[deep] : 是否为深拷贝 true为深拷贝，false为浅拷贝 ，默认值为false
target: Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1: 可选。 Object类型 第一个被合并的对象
objectN: 可选。 Object类型 第N个被合并的对象。

//深拷贝1个数据
var data4=$.extend(true,[],data3)
//深拷贝多个数据
var data5=$.extend(true,{},[data1,data2,data3])

测试用例

console.log('data4',data4)
console.log('data5',data5)

输出结果

小结

• 深拷贝：利用递归层层遍历复制所有层级的属性。新拷贝的数据更改不会影响旧数据。
• 浅拷贝：对于复杂数据类型，相当于新数据的引用地址与旧数据的引用地址一致，两者指向同一份数据，数据的修改会影响彼此。