JS拷贝简单数组,拷贝复杂数组

数组是引用变量类型，所以存储数组的过程实际上是存储的一个指向堆内存的地址 。

当拷贝简单数组时，直觉上可以这样操作。

let a=[1,2,3,4]
let b=a;

但是输出打印一下进行验证。

console.log('a:',a,'b:',b)
a.pop()
console.log('a:',a,'b:',b)

 

明显不符合我们的预期。

可以用以下方法解决。

1.利用concat()

let a=[1,2,3,4]
let b=a.concat();

再输出打印一下。

 

符合预期。

2.利用slice()

let a=[1,2,3,4]
let b=a.slice();

输出打印一下， 也是符合预期的。

3.es6提供的拓展运算符

let a=[1,2,3,4]
let b=[...a];

//或者这样写
let a=[1,2,3,4]
let [...b]=a;

都是可以的。 

 

总结下：因为是引用数据类型，所以常规复制方式得到的是指向内存的一个地址。而上方方式是新建了一个相同的数据，彼此有不同的地址，彼此独立。所以之后可以各自进行不同的逻辑操作。

 

但是如果是多维数组，

let a = [
      { childMenu: [{ childMenu: [], component: "c1" }], component: "f1" },
      { childMenu: [], component: "f2" }
    ];
    let [...b] = a;

此时删除a数组中某项的一个属性值

delete a[1].childMenu

此时输出打印得到

也就是说此时数组b并没有成功复制a 。

 

let a = [
      { childMenu: [{ childMenu: [], component: "c1" }], component: "f1" },
      { childMenu: [], component: "f2" }
    ];
    let b =  JSON.parse(JSON.stringify(a));

此时输出打印 

 两次编译JSON.parse(JSON.stringify(array))可以将多维数组进行复制。