理解JS中的深拷贝与浅拷贝

更新日期: 2019-08-25阅读: 2.3k标签: 拷贝

浅拷贝

浅拷贝是对象的逐位复制。创建一个新对象,该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。

大白话讲就是,浅拷贝是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。


深拷贝

深拷贝复制所有字段,并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。

大白话讲就是,深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。


Look See See 例子

浅拷贝:它将X的引用复制到Y中。因此,X和Y的地址是相同的,也就是说它们指向相同的内存位置。

深拷贝:复制X的所有成员,为Y分配不同的内存位置,然后将复制的成员分配给Y,实现深拷贝。这样,如果X消失了,Y在内存中仍然有效。

考虑下面的代码

var employeeDetailsOriginal = {  
  name: '前端小智', 
  age: 18,
  Profession: '前端开发' 
};

假设你想创建一个这个对象的副本,这样即使原始值被改变了,仍然可以通过副本得到原始对象的值。

我会这样做:

var employeeDetailsDuplicate = employeeDetailsOriginal; // 浅拷贝

如果咱们改变一个值:

employeeDetailsDuplicate.name = '王大治';

这样操作,咱们的原始对象 employeeDetailsOriginal 的属性 name 也会跟着改变,因为这里是一个浅拷贝。这样咱们就获取不到原始对象的值了。所以这种拷贝做法是不对的。

但是,通过使用原始employeeDetailsOriginal变量的属性创建一个全新的变量,就可以创建一个深拷贝副本。

var employeeDetailsDuplicate = {
  name: employeeDetailsOriginal.name,
  age: employeeDetailsOriginal.age, 
  Profession: employeeDetailsOriginal.Profession
}; // 深拷贝

现在,如果更改employeeDetailsDuplicate.name,它只会影响employeeDetailsDuplicate,而不会影响employeeDetailsOriginal。

clipboard.png


谈谈 Object.assign()

Object.assign()是咱们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。

var employeeDetailsOriginal = {  
  name: '前端小智',
  family: {
    name: '前端大家庭'
  }
};

var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal );

employeeDetailsDuplicate.name = '王大治'
employeeDetailsDuplicate.family.name = '后端大家庭'

console.log(employeeDetailsOriginal ); 
// { name: "前端小智", family: {name: "后端大家庭"} }
console.log(employeeDetailsDuplicate);
// { name: "王大冶智", family: {name: "后端大家庭"} }

看上面的例子,属性name的值并没有跟着变,但是属性中family的name的值跟着变了。


如何实现深拷贝

唯一的作法就是克隆这个对象。

对于简单的JSON对象,最简单的方法是

var objectIsNew  = JSON.parse(JSON.stringify(objectIsOld));

//如果使用jquery,可以使用:

// 浅拷贝
var objectIsNew = jQuery.extend({}, objectIsOld);

// 深拷贝
var objectIsNew = jQuery.extend(true, {}, objectIsOld);

纯JS方法来深拷贝对象(并非最佳方法)

function keepCloning(objectpassed) {
  if (objectpassed=== null || typeof objectpassed!== 'object') {
    return objectpassed;
  }
  
  // 临时存储原始的obj的构造
  var temporary_storage = objectpassed.constructor(); 
  for (var key in objectpassed) {
    temporary_storage[key] = keepCloning(objectpassed[key]);
  }
   return temporary_storage;
}

var employeeDetailsOriginal = {  
  name: '前端小智', 
  age: 18, 
  Profession: '前端开发' 
};

var employeeDetailsDuplicate = (keepCloning(employeeDetailsOriginal));

employeeDetailsOriginal.name = "前端大治";

console.log(employeeDetailsOriginal);
console.log(employeeDetailsDuplicate);


总结

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题,深拷贝能帮你更安全安心的去操作数据,根据实际情况来使用深拷贝,大概就是这个意思。

作者:Manjula Dube, 来源:Medium    
译者:前端小智
原文:https://we-are.bookmyshow.com/understanding-deep-and-shallow-copy-in-javascript-13438bad941c


链接: https://fly63.com/article/detial/5521

js中深拷贝和浅拷贝的区别及原理

javascript的深拷贝和浅拷贝主要是针对像Object, Array这样的复杂对象的,简单理解为浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

JSON.parse(),JSON.stringify()实现对对象的深拷贝以及兼容性问题,根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

使用jquery克隆对象_实现深、浅拷贝的简单实例

克隆JavaScript对象,首页想到的是obj = eval(uneval(obj)),但这是非标准的,推荐使用jquery提供的jQuery.extend方法,因为它包含了一些额外的类型验证逻辑,并且不会复制未定义的属性等。

JS中如何进行对象的深拷贝

在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?对象的深拷贝与浅拷贝的区别如下:浅拷贝:仅仅复制对象的引用,而不是对象本身;深拷贝:把复制的对象所引用的全部对象都复制一遍。

javascript实现数组或对象的深拷贝

可以看出来,改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;同样:改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;

关于内存拷贝(浅拷贝)和js链表的小知识点

记录一个做leetcode看答案学到的小知识。。。浅拷贝实现一些特殊的功能的一些应用场景,比如:我们有一个需求如下

js的浅拷贝 VS 深拷贝

我们常常会用到拷贝对象的功能,而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面:1: 浅拷贝和深拷贝的区别2: 浅拷贝和深拷贝的具体实现,拷贝我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。

Js实现深浅复制

JavaScript中有两种数据类型,基本数据类型如undefined、null、boolean、number、string,另一类是Object。简单数据类型只存储在内存中的栈区,复制的时候是值传递给新的索引。而复杂数据类型由栈区和堆区共同储存

14个JS数组拷贝技巧

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组,咱们不能简单地将旧数组分配给一个新变量

JS变量存储与深拷贝和浅拷贝

string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值 基本数据类型不存在拷贝,好比如说你无法修改数值1的值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!