javascript中深拷贝和浅拷贝的区别介绍

本篇文章给大家带来的内容是关于javascript中深拷贝和浅拷贝的区别介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本文解释javascript中深拷贝和浅拷贝的区别。

浅拷贝/Shallow Copy

浅拷贝指拷贝了引用值。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}var shallowCopy = original;console.log(JSON.stringify(shallowCopy));// {"prop1" : "Prop1", "prop2" : "prop2"}shallowCopy.prop1 = "ChangedProp1";console.log(JSON.stringify(original));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}console.log(JSON.stringify(shallowCopy));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

登录后复制

https://smoothprogramming.com…2106237797-5bc54eadef991_articlex.png

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

注意:

浅拷贝中,原始值和副本共享同样的属性。

浅拷贝只拷贝了对象引用。

浅拷贝中如果修改了拷贝对象会影响到原始对象,反之亦然。

js中,数组和对象的赋值默认为浅拷贝。

深拷贝/Deep Copy

深拷贝指递归的复制对象的属性给新对象。jquery中我们使用$.extend去进行深拷贝。

$.extend(deepCopy, target, object1, [objectN] )

登录后复制

第一个参数传入true,指明此为深拷贝,target为目标对象,object1,原对象。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}var deepCopy = $.extend(true, {}, original);console.log(JSON.stringify(deepCopy));// {"prop1" : "Prop1", "prop2" : "prop2"}deepCopy.prop1 = "ChangedProp1";console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}console.log(JSON.stringify(deepCopy));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

登录后复制

https://smoothprogramming.com…

2766025520-5bc55161199ad_articlex.png

注意:

深拷贝中,副本和原对象不共享属性

深拷贝递归的复制属性

深拷贝的副本不会影响到原对象,反之亦然

js中所有的原始数据类型默认执行深拷贝,比如Boolean, null, Undefined, Number,String等

以上就是javascript中深拷贝和浅拷贝的区别介绍的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2739223.html

(0)
上一篇 2025年3月8日 01:59:46
下一篇 2025年3月8日 01:59:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • $.ajax 、axios和fetch的简单介绍(附代码)

    本篇文章给大家带来的内容是关于$.ajax 、axios和fetch的简单介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Ajax 是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTT…

    编程技术 2025年3月8日
    200
  • js中获取时间的常用方法(代码)

    本篇文章给大家带来的内容是关于js中获取时间的常用方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、获取当前时间的时间戳 //第一种方法(精确到秒) var timestamp = Date.parse(ne…

    编程技术 2025年3月8日
    200
  • js线程机制与事件机制的详细介绍(图文)

    本篇文章给大家带来的内容是关于js线程机制与事件机制的详细介绍(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、进程与线程 1.进程 进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管…

    2025年3月8日 编程技术
    200
  • bootstrap datetimepicker日期插件美化的效果(代码)

    本篇文章给大家带来的内容是关于bootstrap datetimepicker日期插件美化的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 需求: (1)日期面板默认展开 (2)可以根据点击的日期,处理额外的信…

    2025年3月8日
    200
  • 九个常用的JavaScript图表库的介绍

    本篇文章给大家带来的内容是关于九个常用的javascript图表库的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化…

    2025年3月8日 编程技术
    200
  • css float的详细讲解(附实例)

    本篇文章给大家带来的内容是关于css float的详细讲解(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 div+css布局,是前端开发人员的核心技能,在工作中占很大的比重。良好的前端布局是进行javascrip…

    2025年3月8日 编程技术
    200
  • tab开发的一个简单实例(代码)

    本篇文章给大家带来的内容是关于tab开发的一个简单实例(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。使用了以下方法方法1-3中使用的changetabhandle函数 //当前点击按钮的索引function cha…

    编程技术 2025年3月8日
    200
  • JavaScript如何实现随机选人效果?(代码实例)

    javascript如何实现随机选人效果?本篇文章就给大家介绍javascript实现随机选人效果的方法(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 因工作需要,写了一个随机选人的小网页,先看效果图。 背景…

    2025年3月8日
    200
  • JavaScript学习之for循环与for/in循环介绍

    本篇文章就给大家带来javascript学习之for循环与for/in循环介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 循环可以将代码块执行指定的次数。 JavaScript 支持不同类型的循环: for &#82…

    编程技术 2025年3月8日
    200
  • JavaScript学习之什么是闭包?js闭包的介绍

    本篇文章就给大家带来javascript学习之什么是闭包?js闭包的介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 什么是闭包?  官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论