带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(3)

简介: 带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(3)

带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(2)https://developer.aliyun.com/article/1349577?groupCode=tech_library


3) 数组浅拷贝

对于数组的浅拷贝,可以使用 slice() 或展开语法。

 

const sourceArray = [1, 2, 3];const targetArray1 = sourceArray.slice();const targetArray2 = [...sourceArray];
console.log(targetArray1); // 输出:[1, 2, 3]
console.log(targetArray2); // 输出:[1, 2, 3]

 

在上述代码中,我们使用 slice() 方法和展开语法将源数组的元素复制到目标数组中。targetArray1 targetArray2 都是 sourceArray 的浅拷贝副本。

3. 深拷贝与浅拷贝的应用场景

深拷贝和浅拷贝各有适用的场景:

 

  • 深拷贝的应用场景:
  • 当需要创建一个对象的完全独立副本时,以防止对原始对象的修改。
  • 在对象状态管理中,需要创建对象的副本以记录历史状态、实现撤销和重做等操作。
  • 在数据变换和处理过程中,创建对象的副本以避免对原始数据的修改。

 

  • 浅拷贝的应用场景:
  • 当只需要复制对象的引用,而不需要创建对象的副本时。
  • 在一些简单的数据处理场景中,浅拷贝可以更高效地完成任务。

4. 注意事项

在使用深拷贝和浅拷贝时,需要注意以下几个问题:

 

  • 循环引用:深拷贝和浅拷贝都需要注意循环引用的问题。循环引用是指对象之间相互引用,导致无限循环。在处理循环引用时,深拷贝需要使用额外的数据结构(如 Map 或 WeakMap)进行记录和判断,而浅拷贝则无法解决循环引用的问题。
  • 特殊类型的处理:在实现深拷贝和浅拷贝时,需要注意特殊类型的处理。特殊类型包括函数、正则表达式等。对于特殊类型,深拷贝可以选择直接引用原始对象,而浅拷贝只会复制引用。
  • 性能开销:深拷贝是一项相对耗费性能的操作,特别是在处理大型对象或嵌套层次很深的对象时。在实际应用中,需要根据场景权衡性能和需求。
  1. 结论

深拷贝和浅拷贝是JavaScript中常用的拷贝方式,每种方式都有其适用的场景和注意事项。通过实现一个完整而优雅的深拷贝函数,我们可以轻松地创建对象的独立副本,并处理循环引用和特殊类型。浅拷贝则提供了一种快速复制对象的方式,适用于简单的数据处理场景。根据实际需求和性能要求,选择适合的拷贝方式,可以更好地满足业务需求。

  1. 参考资料
  • MDN Web Docs: Object.assign()open in new window
  • MDN Web Docs: Spread Syntax
相关文章
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
193 19
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
6547 24
|
11月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
390 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
200 4
|
JavaScript 前端开发
js教程——函数
js教程——函数
269 4
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
179 3
|
JavaScript NoSQL 前端开发
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
153 0
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
122 2
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
288 1

热门文章

最新文章