问题
两个数组互相赋值后,其中一个数组中的值发生改变另外一个数组也会发生相应改变的。
原因
数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的。实际的数组元素被存储在堆(heap)内存中;数组引用变量是一个引用类型的变量,被存储在栈(stack)内存中。这就好像是现在有一个房间,两扇门,AB两人分别从不同的门进去所看到的的房间是一样的,此时A拿走一个苹果,B会看到房间里少了一个苹果;B从外面带了一瓶饮料回到房间,A也会看到这个房间多了一瓶饮料。
解决
方法一:concat()用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
let arrA = [1, 2, 3];
let arrB = [].concat(arrA);
console.log(arrA,arrB); //[1, 2, 3],[1, 2, 3]
//如果改变arrA, arrB不会改变
arrA.splice(0,1);
console.log(arrA,arrB); //[2, 3],[1, 2, 3]
//如果改变arrB, arrA不会改变
arrB[0] = 0;
console.log(arrA,arrB); //[1, 2, 3],[0, 2, 3]
方法二:先JSON.stringify( ) 后 JSON.parse( )
let arrA = [1, 2, 3];
let arrB = JSON.parse(JSON.stringify(arrA)); //arrB: [1, 2, 3]
//如果 arrB.pop(); //arrB:[1,2], arrA:[1,2,3]
//如果 arrA.shift(); //arrA:[2,3], arrB:[1,2,3]
方法三:jQuery的extend方法
let a = [1,2,3];
let b = $.extend(true,[],a)
b[0]++ //b:[2,2,3] a:[1,2,3]
方法四:Object.assign()方法 或者 […arr]
let a = [1,2,3];
let b = Object.assign([],a) //或者 let b = […a]
b[0]++ //b:[2,2,3] a:[1,2,3]
注意
如果是对象数组,即使是用方法一的concat、方法四的Object.assign()或者[…arr]赋值也是会互相影响的:
JS数组互相赋值问题
于 2021-03-24 22:42:29 首次发布