当前位置: 首页 > news >正文

JS中的深拷贝与浅拷贝了解一下

在使用Vue做项目的时候,通常会有许多组件间传递对象的情况。如果只是简单的赋值的话(浅拷贝),是很危险的,因为你不知道什么情况下这个值就被修改了,还一脸蒙蔽,所以我们需要进行深拷贝。深拷贝和浅拷贝的概念,需要一点数据结构的知识去了解。

声明一个object1对象
var object1 = {
  a:'a',
  b:'b' 
}
复制代码

这时候我们来画个内存图:声明一个对象后在内存内某个地址上存入对象object的内容,这个地址指向object1

然后把 对象1赋给对象2 var object2 = object1 这时候的内存 我们来看一下
内存内同一个地址指向了两个变量,其中一个变量内容的改变都会影响这个地址内存储内容的改变,这就是浅拷贝。 我们在组件间传递对象的时候,当然不能进行这么危险的操作,应该将内存拷贝出去,使得另一个地址指向object2,这样的拷贝就叫做深拷贝。深拷贝之后两个变量拥有相同的内容,但是内存地址不一样,互不影响。 那应该怎么进行深拷贝呢??

1、简单粗暴的对象深拷贝

var object2 = JSON.parse( JSON.stringify(object1) )
复制代码

简单粗暴法没有办法深拷贝函数,如果需要得自己封装一个方法,去递归的深拷贝对象属性。方法大家可以参考这篇文章 深入剖析 JavaScript 的深复制

2.在这里值得一提的是以下这种方式,这种方式看起来像是深拷贝,其实是浅拷贝

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
复制代码

Object.assign()方法将一个的对象上的属性枚举复制给另一个对象,但是当object2的值改变时也会改变object1。感兴趣的同学可以去看看object.assign()接口的源码,你会发现object.assign()只是深拷贝了源对象的顶层属性,并没有递归的去进行深拷贝,当源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。

3、 ES8中提供的新方法

ES8中提供了一个新方法: Object.getOwnPropertyDescriptors。MDN描述:该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)。应用如下:

let a = {name:'lili',age:9,birth:'1995-10-13',sex:'gril'}

console.info(Object.getOwnPropertyDescriptors(a))

/* {name: {…}, age: {…}, birth: {…}, sex: {…}}
age
:
{value: 9, writable: true, enumerable: true, configurable: true}
birth
:
{value: "1995-10-13", writable: true, enumerable: true, configurable: true}
name
:
{value: "lili", writable: true, enumerable: true, configurable: true}
sex
:
{value: "gril", writable: true, enumerable: true, configurable: true}*/
复制代码

结合Object.defineProperties()方法,该方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象,可以实现对象的深拷贝,结合上一个例子:

let obj1 = { a: 0 , b: { c: 0}};
console.info(Object.getOwnPropertyDescriptors(obj1))
/*  {a:0,b:{c:0}}*/
obj1.b.c = 233;
obj1.a = 22;
console.info(Object.getOwnPropertyDescriptors(obj1))
/*  {a:22,b:{c:233}}*/
let obj2 = {}
Object.defineProperties(obj2,Object.getOwnPropertyDescriptors(obj1))
console.info( obj2 )
/*  {a:22,b:{c:233}}*/
复制代码

相关文章:

  • Postfix邮件系统
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • MSSQL最佳实践:如何监控备份还原进度?
  • 项目依赖和生成顺序造成的问题
  • MySQL修改root密码的方法
  • 多线程事务回滚
  • 5.30 Tree Traversal + Tree manipulation
  • 网页视频加速播放
  • 阿里云新一代关系型数据库 PolarDB 剖析
  • 函数模板(四十七)
  • Springboot 整合 dubbo 的一些坑
  • 10 个 Python 初学者必知编码小技巧
  • CentOS7下安装NVIDIA独立显卡驱动出现X service error问题解决方法
  • python爬虫练习--爬取猫眼热映口碑榜
  • Python字符串capitalize center 方法
  • 收藏网友的 源程序下载网
  • [deviceone开发]-do_Webview的基本示例
  • __proto__ 和 prototype的关系
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • 78. Subsets
  • CentOS 7 修改主机名
  • CentOS从零开始部署Nodejs项目
  • Docker下部署自己的LNMP工作环境
  • Laravel Mix运行时关于es2015报错解决方案
  • mysql中InnoDB引擎中页的概念
  • 猴子数据域名防封接口降低小说被封的风险
  • 巧用 TypeScript (一)
  • 树莓派 - 使用须知
  • 微信小程序上拉加载:onReachBottom详解+设置触发距离
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 再次简单明了总结flex布局,一看就懂...
  • 阿里云ACE认证之理解CDN技术
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • # 安徽锐锋科技IDMS系统简介
  • ###STL(标准模板库)
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (4)事件处理——(7)简单事件(Simple events)
  • (Python第六天)文件处理
  • (附源码)springboot 校园学生兼职系统 毕业设计 742122
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (实战篇)如何缓存数据
  • (算法)Travel Information Center
  • (转)创业的注意事项
  • .bat批处理(二):%0 %1——给批处理脚本传递参数
  • .describe() python_Python-Win32com-Excel
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .md即markdown文件的基本常用编写语法
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .net 中viewstate的原理和使用
  • .NET 中小心嵌套等待的 Task,它可能会耗尽你线程池的现有资源,出现类似死锁的情况
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .Net多线程总结