浅拷贝
1、...扩展运算符拷贝
let copy = { ...obj }
2、Object.assign 复制一个对象
const obj = { a: 1, b: 2 }
const copy = Object.assign({}, obj);
深拷贝
针对深拷贝,需要使用其他办法,因为 Object.assign()
拷贝的是(可枚举)属性值。
1、最简单的方法(但是有局限性,不能序列化函数,会忽略undefined,和Symbol)
// 使用JSON.stringify序列化,再用JSON.parse反序列化
JSON.parse(JSON.stringify(obj1))
2、最好的做法是定义函数并利用递归的方法实现对象的深拷贝
// 1.1 判断是否是对象
const isObject = obj => (typeof obj === 'object' || typeof obj === 'function') && obj !== 'null'
// 1.2 定义深克隆的方法
function cloneDeep(obj) {
if(!isObject(obj)) throw new Error('参数不是对象')
// 1.3 如果参数为数组,则复制数组各元素,否则复制对象属性
const newObject = Array.isArray(obj) ? [ ...obj ] : { ...obj }
// 1.4 迭代
Object.keys(newObject).forEach(key => {
// 1.5 判断如果遍历到的属性值为对象,则继续递归cloneDeep
if(isObject(newObject[key])) {
newObject[key] = cloneDeep(newObject[key])
}
})
return newObject
}
// 1.6 测试
let test = {a: 1, b: {c: 2}}
let xm = cloneDeep(test)
xm.b.c = '二'
console.log(xm)
console.log(test)