1、浅拷贝
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址(简单理解:如果是单层对象,没问题,如果有多层就有问题)
- 示例1
const obj = {
name: 'Jack',
age: 18
}
const o = { ...obj }
console.log(o) // {name: 'Jack', age: 18}
o.age = 20
console.log(o) // {name: 'Jack', age: 20}
console.log(obj) // {name: 'Jack', age: 18}
- 示例2
const obj = {
name: 'Jack',
age: 18
}
const o = {}
Object.assign(o, obj)
o.age = 20
console.log(o) // {name: 'Jack', age: 20}
console.log(obj) // {name: 'Jack', age: 18}
- 示例3:复杂数据类型不适用
const obj = {
name: 'Jack',
age: 28,
family: {
baby: '小Jack',
age: 1
}
}
const o = {}
Object.assign(o, obj)
o.family.age = 2
console.log(o)
// 打印结果
//{
// name: "Jack",
// age: 28,
// family: {
// baby: "小Jack",
// age: 2
// }
//}
console.log(obj)
//打印结果
//{
// name: "Jack",
// age: 28,
// family: {
// baby: "小Jack",
// age: 2
// }
//}
2、深拷贝
拷贝的是对象,不是地址
常见方法:
1.通过递归实现深拷贝
2. lodash / cloneDeep
3.通过JSON.stringify()文现
(1)递归函数
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数
示例:简易深拷贝
const obj = {
name: 'Jack',
age: 18,
hobby: ['兵乓球', '足球'],
family: {
baby: '小Jack'
}
}
const o = {}
// 拷贝函数
function deepCopy(newObj, oldObj) {
for (let k in oldObj) {
if (oldObj[k] instanceof Array) { // 处理数组的问题(数组要写在前面,因为Array也属于Object)
newObj[k] = []
deepCopy(newObj[k], oldObj[k])
} else if (oldObj[k] instanceof Object) { //处理对象
newObj[k] = {}
deepCopy(newObj[k], oldObj[k])
}
else {
// k 是属性名,值是 oldObj[k]
newObj[k] = oldObj[k]
}
}
}
deepCopy(o, obj) // o 是新对象,obj是旧对象
o.age = 20;
o.hobby[0] = '篮球'
o.family.baby = '宝宝'
console.log(o)
// 打印结果:新对象
// {
// name: "Jack",
// age: 20,
// hobby: ["篮球","足球"],
// family: {baby: '宝宝'}
// }
console.log(obj)
// 打印结果:旧对象
// {
// name: "Jack",
// age: 20,
// hobby: ["兵乓球","足球"],
// family: {baby: '小Jack'}
// }
(2)lodash方法
下载地址:https://www.cdnpkg.com/ld-min/file/lodash.min.js/
官网:https://www.lodashjs.com/
(3)JSON.stringify()和JSON.parse()
示例
const obj = {
name: 'Jack',
age: 18,
hobby: ['兵乓球', '足球'],
family: {
baby: '小Jack'
}
}
// 把对象转换为JSON字符串
const o = JSON.parse(JSON.stringify(obj))
o.family.baby = '宝宝'
// 打印结果:新对象
// {
// name: "Jack",
// age: 20,
// hobby: ["篮球","足球"],
// family: {baby: '宝宝'}
// }
console.log(obj)
// 打印结果:旧对象
// {
// name: "Jack",
// age: 20,
// hobby: ["兵乓球","足球"],
// family: {baby: '小Jack'}
// }