深浅拷贝

let a = {
     name: 'Dobby',
     age: 20
 };
 let b = a;
 a.age = 10;
 b.name = ' qzhang';
 console.log(b.age); // output:10
 console.log(a.name); // output:qzhang

从上面例子可以看出,当我们把一个对象赋值给一个变量的时候,两者的值会是同一个引用,其中一方改变,另一方也会改变。

通常我们在开发的过程中不希望出现这样的问题,我们可以使用浅拷贝来解决这个问题。

浅拷贝

首先,可以通过 Object.assign 来解决这个问题。

let a = { 
      name: 'Dobby', 
      age: 20   
};   
let b = Object.assign({}, a);   
a.age = 10;   
b.name = ' qzhang';  
console.log(b.age); // output:20 
console.log(a.name); // output:Dobby

还可以使用 展开运算符(...)来解决。

let a = { 
       name: 'Dobby', 
       age: 20   
};   
let b = {...a};   
a.age = 10;   
b.name = ' qzhang';  
console.log(b.age); // output:20 
console.log(a.name); // output:Dobby

通常浅拷贝可以解决大部分问题,但当我们在如下例子中对象中还有对象的话,就需要深拷贝了。

let a = {
     name: 'Dobby',
     age: 20,
     job: {
         first: 'web'
     }
 };
 let b = {...a};
 a.age = 10;
 a.job.first = 'java';
 console.log(b.age); // output:20
 console.log(b.job.first); // output:java

深拷贝

通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

let a = {
     name: 'Dobby',
     age: 20,
     job: {
         first: 'web'
     }
 };
 let b = JSON.parse(JSON.stringify(a));
 a.job.first = 'java';
 console.log(b.job.first); // output:web

但该方法有局限性:

1. 会忽略 undefined
2. 会忽略 symbol
3. 不能序列化函数
4. 不能解决循环引用的对象

通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问题,并且该函数是内置函数中处理深拷贝性能最快的。如果数据中有 undefined、symbol、函数三种情况,可以使用 lodash 的深拷贝函数

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • underscore 的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有...
    theCoder阅读 3,746评论 0 1
  • 代码输出 引用类型:对象,数组,函数,正则表达式非引用类型:数值,字符串,布尔值,undefined,null。v...
    倾国倾城的小饼干阅读 3,203评论 0 0
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 13,216评论 0 13
  • 真的是每天在记流水账。 1、昨天到今天,用自行车搬了两次家以后。我决定要用58速运了,太太太折腾了。花不了多少钱,...
    曼曼风雨阅读 937评论 0 0
  • 看完新的一期《国家宝藏》,陕博的厚重带给我无比的震撼,作为一个陕西人的骄傲瞬间在骨子里激荡。好想再回到陕西,再回到...
    布瓜_479a阅读 3,355评论 0 0

友情链接更多精彩内容