地址可收藏:
https://blog.csdn.net/Wave_explosion/article/details/121858994
收藏地址方便复用:
拖拽:https://blog.csdn.net/Wave_explosion/article/details/121921522
深拷贝
首先就是数组:
**
1.concat方法
**
var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()//复制当前数组并返回实现深拷贝的副本,arr1不会受影响
console.log(arr2);[1, 2, 3, 4]
var arr3 = arr1.concat([5, 6, 7])//将数组中的每一项都添加到深拷贝的副本数组中
console.log(arr3);//[1, 2, 3, 4, 5, 6, 7]
**
2.slice方法
**
var arr = [1, 2, 3, 4]
var arr1 = arr.slice(1)//接收1到2个参数,一个参数时,返回参数指定调用方法数组位置到末尾的值组成的深拷贝副本
console.log(arr1);//[2, 3, 4]
var arr2 = arr.slice(0, 1)
console.log(arr2);//[1]
**
3.扩展运算符
**
扩展运算符将一个数组转为用逗号分隔的参数序列
const arr = [1, 2, 3]
const arr1 = [...arr]
arr1.push(4)
console.log(arr1);//[1, 2, 3, 4]
console.log(arr);//[1, 2, 3]
注意,对于数组项是引用类型的数据,就无法实现深拷贝了。
const arr = [1, 2, 3, [4, 5, 6]]
const arr1 = [...arr]
console.log(arr1);
arr1[3].push(7)
console.log(arr1);
console.log(arr);//[1, 2, 3, [4, 5, 6, 7]]更改副本,原数组也被改变
对象深拷贝:
先举个栗子 浅拷贝
var obj = {
a: 1,
b: 2
}
var obj1 = {}
obj1 = obj//浅拷贝
console.log(obj1);//{a: 1, b: 2}
obj1.c = 3
console.log(obj);//{a: 1, b: 2, c: 3},更改obj1,obj也被改变
**
1.Object.assign(目标对象, 源对象),源对象的所有可枚举属性都复制到目标对象上
**
var obj = {
a: 1,
b: 2
}
var obj1 = {}
Object.assign(obj1, obj)
console.log(obj1);//{a: 1, b: 2}
obj1.c = 3
console.log(obj1);//{a: 1, b: 2, c: 3}
console.log(obj);//{a: 1, b: 2},obj没有被改变,实现了深拷贝
**
2.JSON
**
var obj = {
a: 1,
b: 2
}
// 将javascript值转为JSON字符串
var jsonText = JSON.stringify(obj)
console.log(jsonText);//{"a":1,"b":2}
// 把JSON字符串转为javascript值
var obj1 = JSON.parse(jsonText)
console.log(obj1);//{a: 1, b: 2}
// 修改obj1,看原对象值是否被改变
obj1.c = 3
console.log(obj1);//{a: 1, b: 2, c: 3}
console.log(obj);//{a: 1, b: 2},没被改变,实现了深拷贝
**
3.扩展运算符
**
var obj = {
a: 1,
b: 2
}
var obj1 = {...obj}
console.log(obj);//{a: 1, b: 2}
console.log(obj1);//{a: 1, b: 2}
obj.a = 33
console.log(obj);//{a: 33, b: 2}
console.log(obj1);//{a: 1, b: 2}没改变,实现了深拷贝
二、以上都不能完全实现深拷贝,下面方法请注意
**
1.JSON方法
**
var obj = {
a: {
c: 2,
d: [9, 8, 7]
},
b: 4
}
var jsontext = JSON.stringify(obj)
var obj1 =JSON.parse(jsontext)
console.log(obj);
console.log(obj1);
obj.a.d[0] = 666
console.log(obj);
console.log(obj1);
**
2.函数库lodash的_.cloneDeep方法
**
var _ = require('lodash')
var obj = {
a: {
c: 2,
d: [9, 8, 7]
},
b: 4
}
var obj1 = _.cloneDeep(obj)
console.log(obj === obj1);//false
**
3.递归实现深拷贝
**
function copy(object) {
// 判断传入的参数是数组还是对象
let target = object instanceof Array ? [] : {}
for (const [k ,v] of Object.entries(object)) {
target[k] = typeof v == 'object' ? copy(v) : v
}
return target
}
var obj1 = copy(obj)
console.log(obj.a.d === obj1.a.d);//false