关于数组的浅拷贝和深拷贝
  QwLmkesyjcaq 2023年11月02日 36 0

## ES5 只能用变通方法来深拷贝数组


```javascript

const a1 = [1, 2];

const a2 = a1.concat();


a2[0] = 2;

a1 // [1, 2]

```


上面代码中,`a1`会返回原数组的克隆,再修改`a2`就不会对`a1`产生影响。


## es6中扩展运算符提供了深拷贝数组的简便写法


```javascript

const a1 = [1, 2];

// 写法一

const a2 = [...a1];

// 写法二

const [...a2] = a1;

```


上面的两种写法,`a2`都是`a1`的克隆


## 合并数组浅拷贝


扩展运算符提供了数组合并的新写法。


```javascript

const arr1 = ['a', 'b'];

const arr2 = ['c'];

const arr3 = ['d', 'e'];


// ES5 的合并数组

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]


// ES6 的合并数组

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]

```


```javascript

const a1 = [{ foo: 1 }];

const a2 = [{ bar: 2 }];


const a3 = a1.concat(a2);

const a4 = [...a1, ...a2];


a3[0] === a1[0] // true

a4[0] === a1[0] // true

```


上面代码中,`a3``a4`是用两种不同方法合并而成的新数组,但是它们的成员都是对原数组成员的引用,这就是浅拷贝。如果修改了引用指向的值,会同步反映到新数组。


## 最简单的深拷贝方法


**JSON.stringify() 和JSON.parse()**


先用JSON.stringify()转为字符串,再用JSON.parse()转回去,用一个数组变量接一下便可。


```javascript

var list =  JSON.parse(JSON.stringify(obj))

```



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  f18CFixvrKz8   2024年05月20日   93   0   0 JavaScript
  fxrR9b8fJ5Wh   2024年05月17日   53   0   0 JavaScript
  2xk0JyO908yA   2024年04月28日   41   0   0 JavaScript
QwLmkesyjcaq
作者其他文章 更多