JavaScript 拷贝的深拷贝和浅拷贝有什么区别

首页 / 常见问题 / 低代码开发 / JavaScript 拷贝的深拷贝和浅拷贝有什么区别
作者:代码开发工具 发布时间:2小时前 浏览量:5342
logo
织信企业级低代码开发平台
提供表单、流程、仪表盘、API等功能,非IT用户可通过设计表单来收集数据,设计流程来进行业务协作,使用仪表盘来进行数据分析与展示,IT用户可通过API集成第三方系统平台数据。
免费试用

在JavaScript中,深拷贝浅拷贝主要区别体现在对象类型(如数组、对象等)的复制方式上。浅拷贝只复制一层对象的属性,而不会对对象内部的深层次对象做拷贝。因此,如果原始对象的属性值是对象或数组,浅拷贝会导致拷贝的对象和原始对象的相应值指向同一块内存地址。相反,深拷贝会递归复制所有层级的属性,生成一份完全独立的副本。当原始对象变化时,深拷贝产生的对象不会受影响,因为它们引用不同的地址。

对于浅拷贝的应用而言,Object.assign()和展开运算符(…)是两个非常常见的例子。这些方法都只能复制对象的一层属性,进一步的嵌套对象则不会被递归复制。在实践中,使用这些方法会导致一个问题:如果原对象内部属性也是对象,那么这些内部对象的引用不会改变。相反,深拷贝通常需要自定义函数或使用JSON.parse(JSON.stringify(object))等技巧实现所有层次属性的完全复制。

以下正文内容,我们会详细探讨这两种拷贝方式的概念、实现方法以及它们的适用场景。

一、浅拷贝的实现方式

浅拷贝方法简述

浅拷贝可以通过多种方法实现,包括但不限于Object.assign()、展开运算符(…)、Array.prototype.slice()、Array.prototype.concat()等。

Object.assign()的使用

Object.assign(target, …sources)方法可以将所有可枚举属性的值从一个或多个源对象复制到目标对象。它会返回目标对象。这种方法是基本的浅拷贝实现,只会拷贝源对象的第一层属性。

let obj1 = { a: 1, b: { c: 2 } };

let obj2 = Object.assign({}, obj1);

obj1.a = 3;

obj1.b.c = 4;

console.log(obj2.a); // 输出:1

console.log(obj2.b.c); // 输出:4

从以上代码可以看到,修改obj1的a属性并不会影响到obj2的a属性,但是修改obj1的b属性中的c属性时,obj2的c属性也会跟着变化,说明这是一种浅层的复制。

二、深拷贝的实现方式

深拷贝方法简述

深拷贝可以通过自定义递归函数实现,也可以利用JSON.parse和JSON.stringify进行实现。不过,需要注意的是,后者无法复制函数、undefined或循环引用。

JSON方法实现深拷贝

使用JSON的转换方法实现深拷贝是一个简单的技巧。先将对象转换为JSON字符串,再将此字符串解析成新对象。

let obj1 = { a: 1, b: { c: 2 } };

let obj2 = JSON.parse(JSON.stringify(obj1));

obj1.a = 3;

obj1.b.c = 4;

console.log(obj2.a); // 输出:1

console.log(obj2.b.c); // 输出:2

在上述代码中,obj2是对obj1的深拷贝,在变更obj1的任意属性后,obj2的属性都保持不变,从而证明了深拷贝的效果。

三、浅拷贝与深拷贝的场景应用

浅拷贝的适用场景

浅拷贝通常适用于那些对象结构简单、没有嵌套对象或对原始数据维护没有严格要求的场景。比如,当仅仅需要复制对象的几个基本类型属性时,可以使用浅拷贝来创建一个新的对象。

深拷贝的适用场景

深拷贝适合复杂对象或需要完全独立于原始数据的场合,例如在进行状态管理、避免对象间的影响或在函数编程中避免副作用时。深拷贝能够确保所做的任何修改都不会影响到原始对象,这在很多编程问题中是一个非常重要的特性。

四、注意事项与问题解决

浅拷贝的限制

由于浅拷贝只复制对象的第一层属性,当源对象的属性是另一个对象时,这将成为一个潜在的问题源。后续的操作能够影响到所有共享引用对象的状态,这可能导致难以追踪的bug。

深拷贝的问题处理

深拷贝虽然保证了数据的独立性和安全性,但也不是没有问题。例如,JSON方法无法复制函数属性、原型链上的属性和循环引用的对象。对于这些复杂情况,通常需要自定义递归拷贝函数来处理,或者使用第三方库来实现深拷贝,如lodash的_.cloneDeep()方法。

五、拷贝性能的考量

浅拷贝的性能优势

浅拷贝由于仅仅复制了第一层属性,所以在处理大型对象或数组时,会比深拷贝更快更节省内存。当对性能有要求,而又能确认不会修改任何嵌套对象时,浅拷贝是更优的选择。

深拷贝的性能代价

深拷贝需要复制对象的所有层级属性,这会占用更多的内存并且耗用更多的处理时间。尤其是当对象非常巨大或结构非常复杂时,深拷贝可能会导致性能问题。

六、结论与最佳实践

在JavaScript编程中,理解深拷贝和浅拷贝的区别及其对应的适用场景是十分重要的。开发者应当根据具体的需要选择适合的拷贝方法,同时注意可能出现的问题和性能影响。使用浅拷贝时要留心不可变性的破坏,而在使用深拷贝时又要考虑到额外的资源消耗。在实践中,往往需要根据应用的具体场景权衡两者之间的差异,合理安排代码以获得最佳性能和可维护性。

相关问答FAQs:

有什么方法可以使用JavaScript进行深拷贝和浅拷贝?

深拷贝和浅拷贝是JavaScript中用于拷贝对象或数组的两种主要方式。它们之间的区别在于,深拷贝会创建一个全新的对象或数组,并将原对象或数组中的所有值都复制到新对象或数组中,而浅拷贝只会创建一个引用,指向原对象或数组的内存地址。具体区别如下:

  1. 深拷贝:深拷贝会递归地复制原对象或数组中的所有值和嵌套对象或数组。这意味着新对象或数组与原对象或数组完全独立,它们互不影响。如果原对象或数组发生变化,不会影响到新对象或数组。

  2. 浅拷贝:浅拷贝只复制原对象或数组的第一层,如果原对象或数组中有嵌套对象或数组,浅拷贝会将它们的引用复制到新对象或数组中。这意味着新对象或数组和原对象或数组共享嵌套对象或数组,如果嵌套对象或数组发生变化,会影响到原对象或数组。

为了实现深拷贝和浅拷贝,可以使用以下方法:

  • 深拷贝:使用JSON.parse(JSON.stringify(object))可以实现深拷贝。这种方法会将对象或数组转换成JSON字符串,然后再将JSON字符串转换成新的对象或数组,这样可以确保创建一个全新的副本。

  • 浅拷贝:使用Object.assign({}, object)可以实现浅拷贝。这种方法会将原对象的所有可枚举属性复制到目标对象中,如果原对象有嵌套对象或数组,只会复制它们的引用。

综上所述,深拷贝和浅拷贝在处理对象和数组时有着不同的效果和使用场景。根据实际需求选择合适的拷贝方式可以提高代码的效率和可维护性。

最后建议,企业在引入信息化系统初期,切记要合理有效地运用好工具,这样一来不仅可以让公司业务高效地运行,还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业,可以采用我们公司自研的企业级低代码平台织信Informat。 织信平台基于数据模型优先的设计理念,提供大量标准化的组件,内置AI助手、组件设计器、自动化(图形化编程)、脚本、工作流引擎(BPMN2.0)、自定义API、表单设计器、权限、仪表盘等功能,能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景,全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们微信:Informat_5 处理,核实后本网站将在24小时内删除。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系邮箱:hopper@cornerstone365.cn 处理,核实后本网站将在24小时内删除。

最近更新

JavaScript 能通过类创建对象数组
12-19 11:03
JavaScript 内存管理技巧有哪些
12-19 11:03
JavaScript 进阶性学习该看哪些书
12-19 11:03
javascript 函数内部变量如何在函数外调用
12-19 11:03
JavaScript 编程程序中怎么使用 Class 语法
12-19 11:03
JavaScript 和 Elm 响应式的状态是什么样的
12-19 11:03
JavaScript 能否实现 VBS 中的 SendKeys 功能
12-19 11:03
JAVA 开发中常用的工具有哪些
12-19 11:03
JavaScript 拷贝的深拷贝和浅拷贝有什么区别
12-19 11:03

立即开启你的数字化管理

用心为每一位用户提供专业的数字化解决方案及业务咨询

  • 深圳市基石协作科技有限公司
  • 地址:深圳市南山区科技中一路大族激光科技中心909室
  • 座机:400-185-5850
  • 手机:137-1379-6908
  • 邮箱:sales@cornerstone365.cn
  • 微信公众号二维码

© copyright 2019-2024. 织信INFORMAT 深圳市基石协作科技有限公司 版权所有 | 粤ICP备15078182号

前往Gitee仓库
微信公众号二维码
咨询织信数字化顾问获取最新资料
数字化咨询热线
400-185-5850
申请预约演示
立即与行业专家交流