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
}