一起了解JS中的深拷贝与浅拷贝_WEB前端开发

一起了解JS中的深拷贝与浅拷贝_WEB前端开发,第1张

ps如何去底色留文字?_WEB前端开发

方法:首先用ps打开需要处理的图片;接着“ctrl+j”复制一下,点击工具栏中的“魔棒工具”按钮;然后用“魔棒工具”将文字背景选中;最后按键盘上的“Delete”按钮删除背景即可。


一起了解JS中的深拷贝与浅拷贝_WEB前端开发,第2张

浅拷贝

浅拷贝是对象的逐位复制。


创建一个新对象,该对象具有原始对象中值的精确副本。


如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。


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


深拷贝

深拷贝复制所有字段,并复制字段所指向的动态分配内存。


深拷贝发生在对象及其引用的对象被复制时。


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


Look See See 例子

浅拷贝:它将X的引用复制到Y中。


因此,XY的地址是相同的,也就是说它们指向相同的内存位置。


深拷贝:复制X的所有成员,为Y分配不同的内存位置,然后将复制的成员分配给Y,实现深拷贝。


这样,如果X消失了,Y在内存中仍然有效。


考虑下面的代码:

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

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


我会这样做:

var employeeDetailsDuplicate = employeeDetailsOriginal; // 浅拷贝

如果咱们改变一个值:

vue组件通信的中8种方式介绍(收藏)_WEB前端开发

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式。


employeeDetailsDuplicate.name = '王大治';

这样 *** 作,咱们的原始对象 employeeDetailsOriginal 的属性 name 也会跟着改变,因为这里是一个浅拷贝。


这样咱们就获取不到原始对象的值了。


所以这种拷贝做法是不对的。


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


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

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


一起了解JS中的深拷贝与浅拷贝_WEB前端开发,第3张

谈谈 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的值并没有跟着变,但是属性中familyname的值跟着变了。


如何实现深拷贝

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


对于简单的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);

总结

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。


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


本文转载自:https://segmentfault.com/a/1190000020438346

相关教程推荐:JavaScript视频教程

以上就是一起了解JS中的深拷贝与浅拷贝的详细内容,更多请关注ki4网其它相关文章!

两分钟带你了解在CSS中三种使图片居中的方法_WEB前端开发

在做网页美化的时候,都会用到图片居中,那你知道在CSS中有哪三种使图片居中的方法吗?下面我们一起看看吧。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/561945.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020-07-09
下一篇 2020-07-09

发表评论

登录后才能评论

评论列表(0条)

保存