常用的js数组复制(浅拷贝和深拷贝)
在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用“=”来直接把一个数组赋值给一个变量,Array是引用类型,如果只是通过 arrayA = arrayB 简单的赋值,arrayA 和 arrayB 指向的是同一个地址,其实际的值是同一块东西,举个例子
let A = [ 1, 2, 3 ]
let B = A
B[0] = 2 // 此时改变B中a的值
console.log(A) // [ 2, 2, 3 ]
console.log(B) // [ 2, 2, 3 ]
此时,A 也跟着改变,我们在实际应用中就容易受影响。这明显不是我们所想要的结果。所以,我们想要的是两个互不影响的数组才对。
情况有两种,深拷贝以及浅拷贝
一、浅拷贝
(适用于数组并不复杂、即数组中没有数组嵌套了对象或者数组的情况)
1.直接解构赋值
let A = [ 1, 2, 3 ]
let B = [ ...A ]
2.Object.assign()
let A = [ 1, 2, 3 ]
let B = Object.assign( [], A );
3.concat()
let A = [ 1, 2, 3 ]
let B = A.concat();
4.slice()
// arrayObject.slice(start,end),该方法返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素
let A = [ 1, 2, 3 ]
let B = A.slice(0);
上面四种方式,当数组复杂一些就有点问题了,比如说:
let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = A.concat();
A[0].a = 2
B[1][0] = 2
B[2] = 2 // 第一层简单的不会互相影响
console.log(A); // [ { a: 2 }, [ 2, 2 ], 3 ];
console.log(B); // [ { a: 2 }, [ 2, 2 ], 2 ];
5.通用方法(数组或对象),遍历对象,把属性和属性值都放在一个新的对象里
(参考:https://blog.csdn.net/qq_37268201/article/details/80448848)
var shallowCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
也就是说数组里更深层的还是会相互影响,所以我们才需要深拷贝
二、深拷贝
1.通过JSON.stringify转化成字符串再通过JSON.parse()解析成原数组
let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = JSON.parse( JSON.stringify( A ) );
2.利用jQuery的$.extend方法
let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = $.extend( true , [] , A ); // 默认为false,是浅拷贝,true为深拷贝
3.通用方法(数组或对象),拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数
(参考:https://blog.csdn.net/qq_37268201/article/details/80448848)
var deepCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型,如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}
OK,常用的js数组复制就先记录这些