js深复制一个数组

225 篇文章 1 订阅
31 篇文章 1 订阅

Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的。
比如:

  let arr = [1, 2, 3];
  let newArr = arr;
  arr.push(4);
  console.log(newArr1);  // [1, 2, 3, 4]

若我们改变了一个数组的值,但是另一个数组的值不想发生改变,可以使用以下的方法,注:仅适用于数组的浅复制。数组中元素不包含数组类型和对象类型。

1.使用concat方法:

var arr = [1, 2, 3];
var newArr = arr.concat();
arr.push(4)
console.log(newArr);//[1,2,3]
console.log(arr);//[1,2,3,4]

2.slice(start,end)方法。(我经常使用这个方法对数组进行复制)
1.从start开始截取到end但是不包括end;
2.返回值为截取的元素集合;

  var arr = [1, 2, 3];
  var newArr = arr.slice();
  arr[0] = 10;
  console.log(arr);// [10, 2, 3]
  console.log(newArr);// [1, 2, 3]

3.使用扩展运算符

  var arr = [1, 2, 3];
  var [ ...newArr ] = arr;
  arr[0] = 10;
  console.log(arr); // [10, 2, 3]
  console.log(newArr);// [1, 2, 3]

4.Object.assign()

 var arr = [1, 2, 3];
 var newArr = Object.assign([], arr);
 arr[0] = 10;
 console.log(arr);// [10, 2, 3]
 console.log(newArr);// [1, 2, 3]

如果数组元素是对象或者数组,上面四种方法就会只拷贝数组或者对象的引用,如果我们对其中一个数组进行修改,另一个数组也会发生变化。比如:

 var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
  let newArr = arr.concat();
  arr[0].a = 2;
  console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
  console.log(newArr);// [ { a: 2 }, [ 1, 2 ], 3 ] 另一数组的值也会发生改变

下面是深复制(可以完全拷贝一个数组,即使嵌套了对象或者数组,两者也不会互相影响)
方法一:JSON.parse(JSON.stringify(arr))

  var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
  let newArr = JSON.parse(JSON.stringify(arr));
  arr[0].a = 2;
  console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
  console.log(newArr);// [ { a: 1 }, [ 1, 2 ], 3 ] 新数组的值不会发生改变
  

但是该方法是有一定的缺陷的,比如:

循环应用的对象
会忽略undefined
不能序列化函数
会忽略symbol

通用方法,若元素是对象或者数组,继续调用深拷贝

 var deepCopy = function(obj) {
    // 判断是否是对象
    if (typeof obj !== 'object') return;
    // 判断obj类型,根据类型新建一个对象或者数组
    var newObj = obj instanceof Array ? [] : {}
    // 遍历对象,进行赋值
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        let val = obj[key];
        // 判断属性值的类型,如果是对象,递归调用deepCopy
        newObj[key] = typeof val === 'object' ? deepCopy(val) : val
      }
    }
    return newObj
  }

或者利用lodash中的深度copy

import cloneDeep from 'lodash/cloneDeep'
let newArr= clobeDeep(arr);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值