让你彻底理解浅拷贝和深拷贝的区别
在写js的时候经常会遇到复制对象,在复制对象的过程中往往会出现新对象改变原对象等等的一些问题,今天特意梳理一下,希望能帮助到遇到这些问题的开发人员。
- 什么是浅拷贝,深拷贝以及和他们之间的区别
- 赋值
- 浅拷贝
- 深拷贝
在开始梳理之前先说一下值类型和引用类型:
值类型(基本类型):字符串(string)、数值(number)、布尔值(boolean)、undefined、null ;
引用类型:对象(Object)、数组(Array)、函数(Function);
1、什么是浅拷贝,深拷贝以及和他们之间的区别
- 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 。
- 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象。
- 区别:浅拷贝基本类型之前互不影响,引用类型其中一个对象改变了地址,就会影响另一个对象;深拷贝
改变新对象不会影响原对象,他们之前互不影响。
2、赋值
//对象赋值
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = obj1;
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1)
// obj1 { name: '李四', action: { say: 'hello'}
console.log('obj2',obj2)
// obj2 { name: '李四', action: { say: 'hello'}
3、浅拷贝
原数据中包含子对象,改变新对象会使原数据一同改变
- Object.assign()
//浅拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = Object.assign({}, obj1);
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1)
// obj1 { name: '张三', action: { say: 'hello'}
console.log('obj2',obj2)
// obj2 { name: '李四', action: { say: 'hello'}
- 展开运算符…
展开运算符是一个 es6特性,它提供了一种非常方便的方式来执行浅拷贝,这与 Object.assign ()的功能相同。
//浅拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = {... obj1};
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1)
// obj1 { name: '张三', action: { say: 'hello'}
console.log('obj2',obj2)
// obj2 { name: '李四', action: { say: 'hello'}
注:concat(),slice()也属于浅拷贝
4、深拷贝
- JSON.parse(JSON.stringify())
//深拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1)
// obj1 { name: '张三', action: { say: 'hi'}
console.log('obj2',obj2)
// obj2 { name: '李四', action: { say: 'hello'}
- jQuery.extend()
$.extend(deepCopy, target, object1, [objectN])//第一个参数为true,就是深拷贝
//深拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = $.extend(true, {}, obj1);
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1)
// obj1 { name: '张三', action: { say: 'hi'}
console.log('obj2',obj2)
// obj2 { name: '李四', action: { say: 'hello'}
让你彻底理解浅拷贝和深拷贝的区别相关推荐
- 彻底理解Python中浅拷贝和深拷贝的区别
目录 前言 1. 浅拷贝和深拷贝的概念 2. is和==的区别 3. 赋值操作 4. copy模块里面的copy()方法 5. copy模块里面的deepcopy()方法 6.字典自带的copy方法 ...
- Python 赋值、浅拷贝、深拷贝的区别?
http://songlee24.github.io/2014/08/15/python-FAQ-02/ 在写Python过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出 ...
- 详细解析赋值、浅拷贝和深拷贝的区别
详细解析赋值.浅拷贝和深拷贝的区别 一.赋值(Copy) 赋值是将某一数值或对象赋给某个变量的过程,分为下面 2 部分 基本数据类型:赋值,赋值之后两个变量互不影响 引用数据类型:赋址,两个变量具有相 ...
- python赋值浅拷贝和深拷贝的区别_python赋值、浅拷贝、深拷贝区别
在写Python过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出现一些问题.所以,在这里按个人的理解谈谈它们之间的区别. 一.赋值(assignment) 在<Py ...
- 将对象拷贝一份备用,改变原对象的属性时,为啥备份数据也改变了?(赋值、浅拷贝和深拷贝的区别)
前言 前两天在写代码时碰到一个很奇怪的问题,我有一个对象person = {name: ''tianxin, age: 18};,我需要将person目前的数据拷贝一份备用let copyPerson ...
- python中浅拷贝和深拷贝的区别_Python中浅拷贝和深拷贝的区别
Python中浅拷贝和深拷贝的区别 浅拷贝和深拷贝示意图 如上图,简单点说 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deepcopy 深拷贝 拷贝 ...
- 前端面试:浅拷贝和深拷贝的区别?
前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转 那么大家晚上好,我是今天晚上的主讲老师,我是兔哥. 我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也 ...
- 浅拷贝和深拷贝的区别?如何实现深拷贝?
一.数据类型存储 JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用(也叫作IP ...
- 浅拷贝与深拷贝的区别(详解)
浅拷贝与深拷贝的区别 html 浅拷贝与深拷贝 一.数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型. 基 ...
最新文章
- 基于局部表面特征在杂乱场景中的三维物体识别
- 135.137.138.139.445端口分析
- java.math.BigDecimal的用法-商业计算
- Futura:从纳粹主义到月球-甚至更远
- maven中设置代理服务器
- python原类、类的创建过程与方法
- Codecov后门事件验证分析
- python 随机请求头_为了爬虫换个头,我用python实现三种随机请求头方式!
- 《CSS世界》:一本CSS领域的内功心法修炼手册
- matlab simulink 单气室油气弹簧阻尼特性分析
- matlab k-s检验,柯尔莫可洛夫-斯米洛夫检验(Kolmogorov–Smirnov test,K-S test)
- Linux查看占用内存的进程
- mysql拼音码自动生成_根据中文名,自动生成首字母的拼音码或拼音码(两种方法)...
- 大一结业项目之一(C#晨曦超市管理系统 )
- 怎样给WordPress友情链接添加nofollow
- (Cys-RGD)包被CdTe量子|3-巯基丙酸(MPA)包被近红外发光CdTe量子
- 又拍云叶靖:基于Docker的云处理服务平台
- 利用OpenCV实现图像矫正
- java实现上传文件夹
- php面试 猴子大王,php猴子选大王问题解决方法,猴子大王_PHP教程