深浅拷贝几种常用的方法

1.概念

深拷贝和浅拷贝是对象拷贝操作中的两个概念。

浅拷贝是创建一个新对象，然后将原对象的属性值复制给新对象。如果属性值是基本类型（例如数字、字符串、布尔类型等），则直接复制其值；如果属性值是引用类型（例如数组、对象、函数等），则复制的是引用，即新对象和原对象将引用同一块内存。因此，修改新对象的属性值可能会影响原对象。

2.浅拷贝

2.1对象拷贝

2.1.1 Object.assign()

Object调用assign静态方法后,将第二个参数传入的对象复制到第一个参数,也就是新的对象.同时静态方法调用后返回的也是复制产生的新对象

 const source = { a: 1, b: 2 }
 const target = {}
 Object.assign(target, source)
 console.log(target, 'target')
 //结果 {a: 1, b: 2} 'target'

2.1.2 展开运算符

 const source = { a: 1, b: 2 }
 const target = { ...source }
 console.log(target, 'target')
 //结果 {a: 1, b: 2} 'target'

2.2数组拷贝

2.2.1 Array.prototype.concat()

Array.prototype.concat() 方法用于合并两个或多个数组，并返回一个新数组，而不会修改原始数组。它将原始数组与传入的参数数组连接起来，按照参数数组的顺序排列。

const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const newArr = arr1.concat(arr2)
console.log(newArr, 'newArr')
//结果 [1, 2, 3, 4, 5] 'newArr'

2.2.2 展开运算符

参考对象的拷贝方式

3.深拷贝

3.1 json序列化

缺点:遇到function和undefined在序列化中会被忽略,在序列化的过程中直接被丢弃

const obj = {
	a:1,
	b:{
		c:2
	}
	d:['1','2']
}

const newObj = JSON.parse(JSON.stringify(obj))

3.2 lodash库

<script src="lodash.js"></script>
const obj = {
	a:1,
	b:{
		c:2
	}
	d:['1','2']
}
const newObj = ._cloneDeep(obj)

3.3 递归

function cloneDeep (oldobj) {
  // 判断指定的对象是否是数组
   const newObj = Array.isArray(oldobj) ? [] : {}
   // 2.将旧对象的属性复制给新对象
   for (const k in oldobj) {
     if (typeof oldobj[k] === 'object') {
       newObj[k] = cloneDeep(oldobj[k])
     } else {
       newObj[k] = oldobj[k]
     }
   }
   return newObj
 }

4.文档

lodash官方文档