Javascript如何进行深拷贝与浅拷贝?

浅拷贝只复制第一层属性,新旧对象共享嵌套引用;深拷贝递归复制所有层级,完全独立。常用浅拷贝有展开运算符、Object.assign()、slice()/concat();深拷贝推荐structuredClone,其次JSON法,特殊需求可手写递归函数

javascript如何进行深拷贝与浅拷贝?

JavaScript中浅拷贝只复制对象的第一层属性,新旧对象共享嵌套的引用;深拷贝则递归复制所有层级,新对象与原对象完全独立。

浅拷贝的常见方式

适用于只有一层结构的对象或数组,修改嵌套内容会影响原对象。

展开运算符(…):如 const newObj = {...oldObj}const newArr = [...oldArr] Object.assign():如 const newObj = Object.assign({}, oldObj) Array.prototype.slice() / concat():仅对数组有效,如 arr.slice()

深拷贝的实用方法

需要完整隔离嵌套结构时使用,注意性能和特殊值限制。

JSON.parse(JSON.stringify()):简单快捷,但不支持函数、undefined、Symbol、Date、RegExp、循环引用等 structuredClone():现代浏览器支持(Chrome 98+、Firefox 94+),能处理 Map、Set、Date、RegExp 等,但不支持函数和 window 对象 手写递归函数:可控性强,可定制忽略属性、处理循环引用、兼容特殊类型

什么时候该用哪种?

多数场景下优先用 structuredClone(如有兼容性要求再降级);若只操作简单数据且需兼容老环境,JSON 方法够用;频繁操作或有特殊需求(如过滤字段、处理 BigInt),建议封装自定义深拷贝函数。

立即学习“Java免费学习笔记(深入)”;

基本上就这些,不复杂但容易忽略嵌套影响和边界情况。

以上就是Javascript如何进行深拷贝与浅拷贝?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542253.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 14:02:22
下一篇 2025年12月21日 14:02:31

相关推荐

  • javascript中的函数是什么_如何定义和调用?

    JavaScript函数是可复用代码块,具有一等公民特性;定义方式有函数声明(提升)、函数表达式(不提升)和箭头函数(无this、不可构造);调用需用()传参,支持IIFE、默认参数与剩余参数。 JavaScript 中的函数是一段可重复使用的代码块,用来执行特定任务或计算并返回结果。它既是行为的封…

    2025年12月21日
    000
  • 在客户端脚本中正确初始化和使用 @replit/database

    本文旨在解决在浏览器环境(客户端脚本)中直接使用 `@replit/database` 导致 `ReferenceError: database is not defined` 的问题。我们将深入探讨 `@replit/database` 的运行环境,阐明其作为 Node.js 模块的特性,并提供一…

    2025年12月21日
    000
  • Mongoose聚合管道中实现字符串匹配与筛选的教程

    本教程详细讲解如何在mongoose聚合管道中高效地实现字符串匹配与筛选功能。通过结合$group、$match聚合阶段和$regex查询操作符,我们可以在服务器端对聚合后的数据进行灵活、大小写不敏感的搜索,从而优化应用性能并减少客户端处理负担。 引言 在开发数据驱动的应用程序时,搜索和过滤功能是不…

    2025年12月21日
    000
  • 深入理解React状态管理:为何直接修改数组/对象不触发更新及解决方案

    本文深入探讨react/nextjs中状态更新不生效的常见问题,特别是直接修改数组或对象状态导致组件不重新渲染的现象。我们将解释react的浅层比较机制,并提供通过创建状态副本实现不可变更新的正确方法,确保组件按预期响应状态变化,从而避免因状态未更新而引发的ui异常。 在React应用开发中,状态(…

    2025年12月21日
    000
  • 什么是javascript数组_如何遍历数组元素?

    JavaScript数组是存储多个值的有序集合,用方括号创建(如[“苹果”,”香蕉”]),通过索引访问修改元素,常用for、for…of及map/filter/reduce遍历,避免for…in和遍历时修改数组。 JavaScr…

    2025年12月21日
    000
  • JavaScript生成器是什么_yield关键字怎么用?

    JavaScript生成器是用function定义的特殊函数,返回迭代器对象;yield暂停执行并返回值,next()恢复并可传入参数;yield委托其他可迭代对象,支持按需计算与异步流程控制。 JavaScript生成器是一种特殊函数,能暂停和恢复执行,适合处理异步操作、大数据流或需要按需计算的场…

    2025年12月21日
    000
  • 如何实现动画效果_javascript控制CSS动画的方法是什么?

    JavaScript控制CSS动画的核心是通过class切换触发动画并监听animationend事件,辅以style动态调整和play-state暂停/恢复,实现高效协作。 JavaScript 控制 CSS 动画,核心是通过操作元素的 class 或 style 属性来触发动画,再配合事件监听或…

    2025年12月21日
    000
  • 如何理解作用域链_javascript中的作用域如何查找?

    作用域链是函数定义时确定的词法作用域查找路径,从当前函数作用域逐级向上指向全局对象;变量读取时按此链由近及远查找,未找到则报ReferenceError;闭包即函数持有该链对父级变量的引用。 JavaScript 中的作用域链,本质是函数在定义时就确定的一条“词法作用域的查找路径”。它决定了变量和函…

    2025年12月21日
    000
  • javascript中的拖放功能如何实现_如何使元素可拖动

    JavaScript拖放功能分原生Drag and Drop API(需draggable=”true”,监听dragstart/dragover/drop)和手动鼠标/触摸事件实现(mousedown→mousemove→mouseup,用transform位移),前者语义…

    2025年12月21日
    000
  • 如何实现吸顶效果_javascript中固定导航栏怎么做?

    吸顶效果是导航栏滚动至顶部后固定显示,核心为监听滚动事件并动态切换position: fixed状态;需用offsetTop获取初始位置、添加占位元素防页面跳动、CSS控制样式、requestAnimationFrame节流优化性能,并注意移动端兼容性。 吸顶效果就是当页面滚动到某个位置时,导航栏自…

    2025年12月21日
    000
  • javascript有哪些数据类型_如何区分原始类型与引用类型

    JavaScript有6种原始类型:string、number、boolean、null、undefined、symbol、bigint;引用类型包括Object、Array、Function等对象结构,核心区别在于赋值、比较、可变性和检测方式。 JavaScript 有 7 种数据类型:6 种原始…

    2025年12月21日
    000
  • javascript库是什么_jQuery还有使用的必要吗

    jQuery已非新项目必需,因现代浏览器原生API成熟、主流框架减少DOM操作、体积负担与维护成本高;仅老系统、特定插件依赖或极简静态页等场景暂难替代。 JavaScript 库是一组预先编写好的、可复用的 JavaScript 代码集合,用来简化常见任务,比如操作 DOM、处理事件、发送网络请求、…

    2025年12月21日
    000
  • 什么是javascript树结构_如何遍历DOM树?

    JavaScript中的“树结构”指DOM这种分层数据组织方式,以document为根节点,HTML元素按父子、兄弟关系嵌套构成树;常用遍历法包括childNodes/children、parentNode、next/previousElementSibling、querySelector及递归DF…

    2025年12月21日
    000
  • javascript_如何实现搜索引擎

    实现一个简单的搜索引擎需先准备数据源,如包含id、标题和内容的文档数组;接着编写搜索函数,将用户输入转为小写关键词数组,遍历每条文档的内容与标题,统计关键词出现次数并计算匹配得分;然后通过事件监听实时获取输入框内容,调用搜索函数并按得分降序排列结果;最后将匹配项以高亮形式展示在页面中,并可通过防抖优…

    2025年12月21日
    000
  • React useState 对象状态与表单输入绑定指南

    本文深入探讨了在react中将`usestate`管理的对象状态直接绑定到表单输入`value`属性时,出现`[object, object]`显示错误的原因及解决方案。核心在于,表单输入期望接收字符串或数字等基本类型值,而非整个对象。教程将详细讲解如何正确访问对象属性进行绑定,并提供完整的示例代码…

    2025年12月21日
    000
  • React中利用map函数动态渲染背景图片的正确姿势与常见陷阱

    本文旨在深入探讨在react应用中,如何正确使用`map`函数动态加载并显示背景图片。文章将详细解释初学者常犯的错误——将图片路径数组错误地应用于单个元素,而非为每个数据项生成独立的元素并设置其背景图片。通过对比错误与正确的代码示例,并结合react渲染列表的关键注意事项,帮助开发者掌握高效且符合r…

    2025年12月21日 好文分享
    000
  • JavaScript文件上传类型校验:告别模糊,拥抱MIME类型

    本文深入探讨了JavaScript中文件上传类型校验的常见误区,即错误地依赖`input.value`(文件名)进行判断,导致校验不准确且行为异常。我们将详细介绍如何通过访问`inputElement.files[0].type`获取文件的MIME类型,并结合正则表达式进行可靠的客户端校验。文章提供…

    2025年12月21日
    000
  • 动态修改图片画廊弹出层背景色的教程

    本教程详细介绍了如何使用javascript动态修改图片画廊弹出层的背景颜色,以在用户切换图片时提供更丰富的视觉反馈。通过直接操作dom元素的style.background属性,结合事件监听器,可以轻松实现背景色的实时切换,并可配合css过渡效果增强用户体验。 引言:实现交互式图片画廊的背景色动态…

    2025年12月21日 好文分享
    000
  • JavaScript中call_apply_bind的区别_如何使用

    call和apply立即执行函数,bind返回绑定this的新函数;call参数逐个传,apply参数用数组传,bind可预设参数并延迟调用。 三者都能改函数里的 this,但用法和时机完全不同。核心就三点:谁立刻执行、参数怎么传、返回值是什么。 call:立刻执行,参数一个个列出来 第一个参数是你…

    2025年12月21日
    000
  • JavaScript如何操作Shadow DOM?

    JavaScript操作Shadow DOM需先用attachShadow()创建影子根并指定open/closed模式,再通过shadowRoot使用标准DOM方法操作;两者与主DOM隔离,可通过自定义事件、slot和:host等机制通信与样式穿透。 JavaScript操作Shadow DOM主…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信