文章目录
案例
let person = {
name: 'lhg',
sex: '男',
friends: {
name: '张三',
sex: '男'
}
}
let newPerson = person
newPerson.name = '前端的炮灰'
console.log(person);
console.log(newPerson);
输出结果:
这里输出的结果和我们大家想的都是一样的,修改newPerson的name属性,把person的name属性值也给改了。这其实很好解释,二者指向了同一个对象。
浅拷贝
我们不妨写个函数
let person = {
name: 'lhg',
sex: '男',
friends: {
name: '张三',
sex: '男'
}
}
/**
* 浅拷贝
* @param {*} obj
* @returns
*/
function clone(obj) {
if (typeof obj !== 'object' || obj == null) {
console.log(1);
return obj
}
let result
if (obj instanceof Array) {
result = []
} else {
result = {
}
}
for (let key in obj) {
result[key] = obj[key]
}
return result
}
let newPerson = clone(person)
newPerson.name = '前端的炮灰'
console.log(person);
console.log(newPerson);
输出结果
在这里我们可以看到我们要的效果出现了,但是又有新的问题出现了
我们把原来的修改
newPerson.name = '前端的炮灰'
改为修改子属性对象中的属性
newPerson.friends.name = '前端的炮灰'
结果为
可见我们只是拷贝了一层,所以我们要采用递归的形式实现拷贝,也就是深拷贝,才能实现拷贝完全
深拷贝
let person = {
name: 'lhg',
sex: '男',
friends: {
name: '张三',
sex: '男'
}
}
/**
* 深拷贝
* @param {*} obj
* @returns
*/
function clone(obj) {
if (typeof obj !== 'object' || obj == null) {
return obj
}
let result
if (obj instanceof Array) {
result = []
} else {
result = {
}
}
for (let key in obj) {
//递归处理,我们在这里可以进行处理,可以只拷贝obj上有的属性
//在这里就不这样写了
//if (obj.hasOwnProperty(key)) {
// result[key] = clone(obj[key])
//}
result[key] = clone(obj[key])
}
return result
}
let newPerson = clone(person)
newPerson.friends.name = '前端的炮灰'
console.log(person);
console.log(newPerson);
结果为
可见这回达到了我们所想要的结果
lodash(cloneDeep)
lodash里面已经实现了深拷贝,我们直接进行引入调用就可以了
lodash-cloneDeep
还有其他几种拷贝方式,你可以上去看看