入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

ES6(JavaScript)的深复制和浅复制

创建时间:2017-12-06 投稿人: 浏览次数:2060

React中,我们会遇到一个有趣的问题,那就是对象的复制,为什么说有趣,是因为直觉和结果差距很大。

我们看一下这个例子:

let a={tile:"深复制"};
let b=a;
a.title="浅复制";

那么我们会获得两个对象,一个a,一个b,a的title是浅复制,b的title是深复制。

但结果真是这样吗?

我们console.log一下


咦,为啥嘞!!!!!!为啥两个都是输出"浅复制"。。。。

其实,a,b是共用同一个地址,所以虽然看起来是两个对象,其实就是一个对象,a===b,这就是深复制,复制的不仅仅是数据,而且连地址一起复制过来了,相当于Windows的快捷方式,表面上看起来一个在C盘,一个在D盘,其实都是一个文件。

那么,如果我们仅仅想复制”深复制“这三个字呢?a的title和b的title要不同,我们如何来做。

let a={title:"深复制"};
let b={...a,content:"一个教程"};
a.title="浅复制";
console.log(a.title);
console.log(b.title);

我们再来看打印结果

这样我们虽然复制了a的所有数据,但是a和b是不同的对象,更改任意一个的数据,不会影响到第二个,而且b还可以对a 进行拓展,比如加了content一个字段。


阅读更多
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。