# js 数组深度拷贝详解

## js 数组深度拷贝详解

1.我们已经知道的深拷贝和浅拷贝的区别，在于，深拷贝是拷贝值的同时拥有一个新的存储地址，而浅拷贝只是拷贝了值，而存储地址不变；这样会导致的问题是修改拷贝的值，会同时修改原数组；

    var arr = [1,2,3,4]
let newArr = arr  //浅拷贝
newArr.splice(0,1)
console.log(arr,'原数组');  //[2, 3, 4] "原数组"
console.log(newArr,'浅拷贝数组') //[2, 3, 4] "拷贝数组"



var arr = [1,2,3,4]
let newArr = arr.slice(0)  //深拷贝
newArr.splice(0,1)
console.log(arr,'原数组');  //[1, 2, 3, 4] "原数组"
console.log(newArr,'深拷贝数组') //[2, 3, 4] "拷贝数组"

//map
let newArr2 = arr.map(item=>{
return item
})
newArr2.splice(0,1)
console.log(arr,'原数组');  //[1, 2, 3, 4] "原数组"
console.log(newArr2,'深拷贝数组') //[2, 3, 4] "拷贝数组"



var arr = [1,2,3,4]
let newArr3 = []
for(var i=0 ;i<arr.length;i++){
newArr3.push(arr[i])
}
newArr3.splice(0,1)
console.log(arr,'原数组');  //[1, 2, 3, 4] "原数组"
console.log(newArr3,'拷贝数组') //[ 2, 3, 4] "拷贝数组"



var arr = [1,2,3,4]
let newArr4 =  JSON.parse(JSON.stringify(arr))
newArr4.splice(0,1)
console.log(arr,'原数组');  //[1, 2, 3, 4] "原数组"
console.log(newArr4,'拷贝数组') //[ 2, 3, 4] "拷贝数组"



   		var arr2 =  [1,2,3,function(){console.log(11)},undefined,null]
let newArr4 =  JSON.parse(JSON.stringify(arr2))
newArr4.splice(0,1)
console.log(arr2,'原数组');  //[1, 2, 3, ƒ] "原数组"
console.log(newArr4,'拷贝数组') // [2, 3, null,null,null] "拷贝数组"


#### 上述方法是能实现深拷贝，但我们需要了解当数组中有层级，是否能深拷贝呢？

 var arr1 = [{a:1,b:1}]
let newArr1 = arr1.slice(0)
newArr1.forEach(item=>{
delete item.a
})
console.log(arr1,'原数组');  //[{b:1}] "原数组"
console.log(newArr1,'拷贝数组') //[{b:1}] "拷贝数组"

//第二种
var arr2 = [[1,2,3],[2,3,4]]
let newArr2 = []
for(var i=0 ;i<arr2.length;i++){
newArr2.push(arr2[i])
}
newArr2.forEach(item=>{
item.splice(0,1)
})
console.log(arr2,'原数组');  //[[2,3],[3,4]] "原数组"
console.log(newArr2,'拷贝数组') //[[2,3],[3,4]] "拷贝数组"


 var arr1 = [{a:1,b:1}]
let newArr4 =  JSON.parse(JSON.stringify(arr1))
newArr4.forEach(item=>{
delete item.a
})
console.log(arr1,'原数组');  //[{a:1,b:1}] "原数组"
console.log(newArr4,'拷贝数组') //[{b:1}] "拷贝数组"


 var arr1 = [{a:1,b:1}]
function clone(obj){
if (obj instanceof Array) {
var copy = [];
for (var i = 0, len = obj.length; i < len; ++i) {
copy[i] = clone(obj[i]);
}
return copy;
}
}
let newArr5 = clone(arr1)
newArr5.forEach(item=>{
delete item.a
})
console.log(arr1,'原数组');  //[{a:1,b:1}] "原数组"
console.log(newArr5,'拷贝数组') //[{b:1}] "拷贝数组"


function clone(obj) {
// 判断是否为空未定义
if (null == obj || "object" != typeof obj) return obj;

//  Date
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}

//  Array
if (obj instanceof Array) {
var copy = [];
for (var i = 0, len = obj.length; i < len; ++i) {
copy[i] = clone(obj[i]);
}
return copy;
}

// Object
if (obj instanceof Object) {
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}

throw new Error("无法复制对象！不支持其类型。");
}

• 2
点赞
• 0
评论
• 4
收藏
• 一键三连
• 扫一扫，分享海报

10-30 8250
07-25 1万+

03-13 1万+
12-09 1万+
11-24 5468
06-06 2万+
03-06 291
06-26 288
05-16 1万+
11-11 967
03-07 215
03-27 244
12-20 37
04-21 214
02-23 1万+

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。