浅析js中的深拷贝与浅拷贝

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

关于深拷贝和浅拷贝其实是两个比较基础的概念,但是我还是想整理一下,因为里面有很多小细节还是很有意思的。

深拷贝和浅拷贝的区别

深拷贝和浅拷贝是大家经常听到的两个名词,两者到底有什么不同呢?

先看看什么是浅拷贝。

var obj1 = { a: 1, b: 2 };var obj2 = obj1;obj2.a = 3;console.log(obj1); // { a: 3, b: 2 }console.log(obj2); // { a: 3, b: 2 }

登录后复制

这是一个最简单的浅拷贝的例子,我把obj1赋值给obj2,改变了obj2中的一个属性值,obj1中的相应属性值也跟着变化了,这是为什么呢?

因为浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址。简而言之,就是obj1和obj2其实指向的是同一个对象。打个比方,就像一个房间把门牌号1换成了门牌号2,但是这个房间还是这个房间。

深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝。拿上面的房间举例子,就是你真的重新开了一间房,并不是只是换门牌号。

谈谈Object.assign()

Object.assign()是我们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。

var obj1 = { a: 1, b: { c: 2 } };var obj2 = Object.assign({}, obj1);obj2.a = 3;obj2.b.c = 3;console.log(obj1); // { a: 1, b: { c: 3 } }console.log(obj2); // { a: 3, b: { c: 3 } }

登录后复制

看上面的例子,属性a的值并没有跟着变,但是属性b中的c的值跟着变了。

常用的实现深拷贝的方式

JSON

这是最常用的实现深拷贝的方式,直接看例子:

var obj1 = { a: { b: 1 } };var obj2 = JSON.parse(JSON.stringify(obj1));

登录后复制

这种方法很简单而且好用,但是有一点点瑕疵,它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。

而且这种方法能正确处理的对象只有 Number, String, Boolean, Array,即那些能够被JSON直接表示的数据结构。RegExp对象或者function是无法通过这种方式深拷贝。

lodash

这是我个人目前使用的方法,只需要一行var obj2 = _.cloneDeep(obj1)就能实现。而且lodash是一个功能很强大的库,提供的方法可靠又简单,真的是懒人必备.

以上就是浅析js中的深拷贝与浅拷贝的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 01:52:55
下一篇 2025年3月3日 04:40:35

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

相关推荐

  • React首次渲染的解析一(纯DOM元素)

    本篇文章给大家带来的内容是关于react首次渲染的解析(纯dom元素),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 React 是一个十分庞大的库,由于要同时考虑 ReactDom 和 ReactNative ,还有服务…

    2025年3月8日
    200
  • React首次渲染解析二(纯DOM元素)

    本篇文章给大家带来的内容是关于react首次渲染解析二(纯dom元素),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 上一篇文章中,介绍了顶层对象ReactCompositeComponent[T]是如何构造的,接下来我们…

    2025年3月8日
    200
  • javascript原型链需要注意的地方的总结

    本篇文章给大家带来的内容是关于javascript原型链需要注意的地方的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,…

    编程技术 2025年3月8日
    200
  • ES6中对象的新功能与解构赋值的详解(代码示例)

    本篇文章给大家带来的内容是关于es6中对象的新功能与解构赋值的详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据…

    编程技术 2025年3月8日
    200
  • 详解javascript浏览器的事件循环机制

    本篇文章给大家带来的内容是关于详解javascript浏览器的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 抛在前面的问题: 单线程如何做到异步 事件循环的过程是怎样的 macrotask 和 microta…

    2025年3月8日 编程技术
    200
  • 解析Node.js的事件循环机制

    本篇文章给大家带来的内容是关于解析node.js的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在浏览器篇已经对事件循环机制和一些相关的概念作了详细介绍,但主要是针对浏览器端的研究,Node环境是否也一样呢?…

    2025年3月8日 编程技术
    200
  • Javascript中什么是流程控制(代码实例)

    本篇文章给大家带来的内容是介绍javascript中什么是流程控制(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成。在正常情况下,程序…

    编程技术 2025年3月8日
    200
  • JavaScript异步编程的详细介绍(附示例)

    本篇文章给大家带来的内容是关于php协成实现的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言 自己着手准备写这篇文章的初衷是觉得如果想要更深入的理解 JS,异步编程则是必须要跨过的一道坎。由于这里面涉及…

    2025年3月8日
    200
  • javascript中原型和原型链的简单介绍

    本篇文章给大家带来的内容是关于javascript中原型和原型链的简单介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 [[Prototype]] 几乎所有对象在创建的时候都会生成[[Prototype]]链,就是人们…

    编程技术 2025年3月8日
    200
  • JavaScript如何给数组添加元素?js数组添加元素的3种方法(代码实例)

    数组是javascrip中中一个比较重要的部分,在学习js数组时,数组元素的操作是不可缺少的部分,那么你知道数组元素如何添加吗?本篇文章就给大家介绍如何往js数组(一维)中添加元素,让大家了解往js数组中添加元素的方法。有一定的参考价值,有…

    2025年3月8日
    200

发表回复

登录后才能评论