我的编程空间,编程开发者的网络收藏夹
学习永远不晚

javaScript深拷贝和浅拷贝的简单介绍

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

javaScript深拷贝和浅拷贝的简单介绍

在了解深拷贝和浅拷贝之前,我们先梳理一下:

JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型

基本数据类型

数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt

基本数据类型在内存当中,是存储在栈Stack

在数据结构当中

  • 栈在内存上的分配的空间生命周期很短,当变量使用完毕,方法执行完成就被释放掉,因此在js当中,变量使用完毕之后,基本就被回收了,
  • 有一个场景比较例外,闭包的情况下,变量是始终存在内存当中不被释放.
  • 栈存储具有先进后出,后进先出的特点: 1,2,3,4,5,6 => 6,5,4,3,2,1

引用数据类型

日期Dete,对象Object,数组Array,方法Function, 正则regex,带键的集合:Maps, Sets, WeakMaps, WeakSets

引用数据类型与堆内存heap的一些关系

  • 在JavaScript中,不允许直接访问堆内存中的位置,不能直接操作对象的堆内存空间。
  • 对象的引用地址是存在栈内存中,在我们的日常编码过程中,操作对象的时候,读取对象的存在栈内存的引用地址而不是在堆中的对象,引用类型的值都是通过引用访问。

JavaScript中堆内存和栈内存简易示意图例

下面对于对象的操作,都可以参照上图进行思考

浅拷贝-深拷贝

浅拷贝

只是拷贝了某一层的属性,或者某一层,没有全部拷贝到另外的对象上

let userInfo = {
  name: "zhangsan",
  age: "29",
  say: function () {
    console.log("hello");
  },
  child: [
    {
      name: "zhangsan01",
    },
  ],
};

对象解构,只能拷贝第一层对象

// 对象解构...
let info = { ...userInfo };
info.name = "lisi";
info.child.name = "lisi001";
info.say();

console.log("userInfo", userInfo);
console.log("info", info);

userInfo和info中的child.name都改成了---->"lisi001"

Object.assign() 第一层是深拷贝,二级属性后就是浅拷贝

let info = {};
Object.assign(info, userInfo);
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

JSON.parse(JSON.stringify());

对象可以复制,但是当属性是function时,没有复制到新的对象上,因此在日常的开发过程中,涉及到数组对象,使用JSON.parse(JSON.stringify());还是没问题的

let info = JSON.parse(JSON.stringify(userInfo));
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

for in,第一层可以拷贝,第二层在修改的时候,还是使用的引用地址,前后的对象都发生了更改

let info = {};
for (let key in userInfo) {
  info[key] = userInfo[key];
}
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

浅拷贝小结

以上浅拷贝方法,有些拷贝只能拷贝第一层,有些可以拷贝多层,

但是当属性类型是方法时,还是浅拷贝,

因此我们在开发中,使用浅拷贝,需要注意,同时,出了拷贝function,类似正则,date等数据类型没有一一列举,感兴趣的同学可以自己写一些demo,去校验更为复杂和数据类型更丰富的数据。

深拷贝

所有的属性都拷贝到新的对象上

使用递归遍历每一个属性,在递归遍历的时候,针对每一种数据类型处理和拷贝

lodash深拷贝方法,感兴趣的同学,可以去阅读lodash深拷贝的实现源码

文档地址:深拷贝cloneDeep https://www.lodashjs.com/docs/lodash.cloneDeep

更多方法,有待补充

结尾

当我们操作复杂数据类型的时候,都是在操作栈内存Stack的内存地址,指针指向对象在堆内存heap的数据。

传入的对象是使用对象字面量{}创建的对象还是由构造函数生成的对象

如果对象是由构造函数创建出来的,那么是否要拷贝原型链上的属性

如果要拷贝原型链上的属性,那么如果原型链上存在多个同名的属性,保留哪个

针对的数据类型,属性的数据类型,各自的缺陷,适用的业务场景,自己造轮子or使用原生方法,工具类

到此这篇关于javaScript深拷贝和浅拷贝的文章就介绍到这了,更多相关js深拷贝和浅拷贝内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

源码地址

码云 https://gitee.com/lewyon/vue-note

githup https://github.com/akari16/vue-note

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

javaScript深拷贝和浅拷贝的简单介绍

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript深浅拷贝的介绍

本篇内容介绍了“JavaScript深浅拷贝的介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!了解拷贝背后的过程,避免不必要的错误,Js专
2023-06-07

Javascript中的深拷贝和浅拷贝

数据复制是我们编程中经常会使用到的技术,对于普通数值数据来说,复制很简单,但是对于复杂类型比如对象的复制,就会有很多需要考虑的东西,比如我们经常说到的深拷贝和浅拷贝。

python深拷贝和浅拷贝之简单分析

title: python 深拷贝和浅拷贝tags: python,copy,deepcopygrammar_cjkRuby: true---python 深拷贝和浅拷贝python的变量的赋值都是引用把一个变量赋值给一个变量,不是拷贝这个
2023-01-30

分析JavaScript浅拷贝和深拷贝

本篇内容主要讲解“分析JavaScript浅拷贝和深拷贝”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析JavaScript浅拷贝和深拷贝”吧!一、直接赋值对象是引用类型,如果直接赋值给另外一
2023-06-25

简单聊聊对象浅拷贝和深拷贝,真不简单!

本文主要围绕对象的浅拷贝和深拷贝,从使用方面做了一次简单的内容总结。浅拷贝下,原对象和目标对象,引用都是同一个对象,当被引用的对象数据发生变化时,相关的引用者也会跟着一起变。

python浅拷贝和深拷贝

python中的赋值是按引用来传递的,如果不是赋值而是拷贝,那就需要用到copy模块了,这就不得不谈浅拷贝和深拷贝了。 浅拷贝copy() #!/usr/bin/python  import copy  class MyClass:    
2023-01-31

JavaScript深拷贝和浅拷贝如何使用

本篇内容主要讲解“JavaScript深拷贝和浅拷贝如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript深拷贝和浅拷贝如何使用”吧!拷贝(又名克隆,复制等),但是又分深拷贝
2023-06-21

理解JavaScript中的浅拷贝与深拷贝

本文给大家介绍JavaScript中的浅拷贝与深拷贝
JavaScript2024-12-10

JavaScript深拷贝与浅拷贝是什么

这篇文章主要介绍了JavaScript深拷贝与浅拷贝是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1 浅拷贝概念深拷贝和浅拷贝是只针对Object和Array这样的引用
2023-06-29

编程热搜

目录