两个相等的数组,修改其中一个怎么做到不改变另外一个

4 篇文章 0 订阅
2 篇文章 0 订阅

现有 :

let arrA = [1, 2, 3];
let arrB = arrA;
console.log(arrA);//[1, 2, 3]
console.log(arrB);//[1, 2, 3]1, 2, 3];
let arrB = arrA;
console.log(arrA);//[1, 2, 3]
console.log(arrB);//[1, 2, 3]

1. 如果改变arrA,则arrB也会改变:

arrA[0] = 10; 
console.log(arrA);//[10, 2, 3]
console.log(arrB);//[10, 2, 3]
//[10, 2, 3]
console.log(arrB);//[10, 2, 3]

2. 如果改变arrB,则arrA也会改变:

 

arrB.push(4);
console.log(arrA);//[1, 2, 3, 4] 
console.log(arrB);//[1, 2, 3, 4] //[1, 2, 3, 4] 
console.log(arrB);//[1, 2, 3, 4] 

原因:js中array是引用类型,也就是arrA和arrB的原数据存储地址是一样的,arrA和arrB都是对原数据的引用,所以修改其中一个,另一个也会改变。这就好像是现在有一个房间,两扇门,AB两人分别从不同的门进去所看到的的房间是一样的,此时A拿走一个苹果,B会看到房间里少了一个苹果;B从外面带了一瓶饮料回到房间,A也会看到这个房间多了一瓶饮料。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

那么两个相等的数组,修改其中一个怎么做到不改变另外一个呢?也就是说仅仅是arrA赋值给arrB,而不是把引用赋给它。

我所知道的解决方案有以下4种:

  • 方法一: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]赋值也是会互相影响的:
    let a=[{name:'zhangsan',age:20}]let b = Object.assign([],a)   //或者 let b = [...a]  或者 let b = [].concat(a) 
    b[0].age=25;   //b:[{name:'zhangsan',age:25}]    a:[{name:'zhangsan',age:25}]
    此时用方法二的先JSON.stringify( ) 后 JSON.parse( )
  • 10
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值