当前位置: 首页 > 编程日记 > 正文

js浅拷贝和深拷贝

浅度拷贝:复制一层对象的属性,并不包括对象里面的为引用类型的数据,当改变拷贝的对象里面的引用类型时,源对象也会改变。·

深度拷贝:重新开辟一个内存空间,需要递归拷贝对象里的引用,直到子属性都为基本类型。两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

1、javaScript的变量类型

(1)基本类型:
5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。

(2)引用类型:
存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。

JavaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。

浅拷贝和深拷贝的区分

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

抛开jQuery,上代码例子。下面是一个简单的浅复制实现:

var obj = { a:1, arr: [2,3] }; var shallowObj = shallowCopy(obj); function shallowCopy(src) { var dst = {}; for (var prop in src) { if (src.hasOwnProperty(prop)) { dst[prop] = src[prop]; } } return dst; } 

因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址,大概的示意图如下。

v2-39761dfd012733879e0d100ec260a5d7_hd

导致的结果就是:

shallowObj.arr[1] = 5; obj.arr[1] // = 5 

而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { a:1, arr: [1,2] }; var obj2 = deepCopy(obj); 

结果如下面的示意图所示:

6604224933c95787764d941432a1f968_hd

需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。

2、浅拷贝的实现

2.1、简单的引用复制

function shallowClone(copyObj) {var obj = {};for ( var i in copyObj) {obj[i] = copyObj[i];}return obj;
}
var x = {a: 1,b: { f: { g: 1 } },c: [ 1, 2, 3 ]
};
var y = shallowClone(x);
console.log(y.b.f === x.b.f);     // true

2.2、Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

var x = {a: 1,b: { f: { g: 1 } },c: [ 1, 2, 3 ]
};
var y = Object.assign({}, x);
console.log(y.b.f === x.b.f);     // true

3、深拷贝的实现

3.1、Array的slice和concat方法

Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。之所以把它放在深拷贝里,是因为它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

如果向两个数组任一中添加了新元素,则另一个不会受到影响。例子如下:

var array = [1,2,3]; 
var array_shallow = array; 
var array_concat = array.concat(); 
var array_slice = array.slice(0); 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false,“看起来”像深拷贝
console.log(array === array_concat); //false,“看起来”像深拷贝

可以看出,concat和slice返回的不同的数组实例,这与直接的引用复制是不同的。而从另一个例子可以看出Array的concat和slice并不是真正的深复制,数组中的对象元素(Object,Array等)只是复制了引用。如下:

var array = [1, [1,2,3], {name:"array"}]; 
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5;  //改变array_concat中数组元素的值 
console.log(array[1]); //[5,2,3] 
console.log(array_slice[1]); //[5,2,3] 
array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值 
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice

3.2、JSON对象的parse和stringify

JSON对象是ES5中引入的新的类型(支持的浏览器为IE8+),JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,也可以实现对象的深拷贝。

//例1
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改变target的name属性
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; //改变target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
//例3
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
console.log(target.child); //Object {}

这种方法使用较为简单,可以满足基本的深拷贝需求,而且能够处理JSON格式能表示的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。还有一点不好的地方是它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。

4、jQuery.extend()方法源码实现

jQuery的源码 - src/core.js #L121源码及分析如下:

jQuery.extend = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},i = 1,length = arguments.length,deep = false;//以上其中的变量:options是一个缓存变量,用来缓存arguments[i],name是用来接收将要被扩展对象的key,src改变之前target对象上每个key对应的value。//copy传入对象上每个key对应的value,copyIsArray判定copy是否为一个数组,clone深拷贝中用来临时存对象或数组的src。// 处理深拷贝的情况if (typeof target === "boolean") {deep = target;target = arguments[1] || {};//跳过布尔值和目标 i++;}// 控制当target不是object或者function的情况if (typeof target !== "object" && !jQuery.isFunction(target)) {target = {};}// 当参数列表长度等于i的时候,扩展jQuery对象自身。if (length === i) {target = this; --i;}for (; i < length; i++) {if ((options = arguments[i]) != null) {// 扩展基础对象for (name in options) {src = target[name];	copy = options[name];// 防止永无止境的循环,这里举个例子,如var i = {};i.a = i;$.extend(true,{},i);如果没有这个判断变成死循环了if (target === copy) {continue;}if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {if (copyIsArray) {copyIsArray = false;clone = src && jQuery.isArray(src) ? src: []; // 如果src存在且是数组的话就让clone副本等于src否则等于空数组。} else {clone = src && jQuery.isPlainObject(src) ? src: {}; // 如果src存在且是对象的话就让clone副本等于src否则等于空数组。}// 递归拷贝target[name] = jQuery.extend(deep, clone, copy);} else if (copy !== undefined) {target[name] = copy; // 若原对象存在name属性,则直接覆盖掉;若不存在,则创建新的属性。}}}}// 返回修改的对象return target;
};

jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝,但是这个方法也无法处理源对象内部循环引用,例如:

var a = {"name":"aaa"};
var b = {"name":"bbb"};
a.child = b;
b.parent = a;
$.extend(true,{},a);//直接报了栈溢出。Uncaught RangeError: Maximum call stack size exceeded

5、自己动手实现一个拷贝方法

var $ = (function () {'use strict';var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');function type () {return Object.prototype.toString.call(this).slice(8, -1);}for (var i = types.length; i--;) {$['is' + types[i]] = (function (self) {return function (elem) {return type.call(elem) === self;};})(types[i]);}return $;
})();//类型判断function copy (obj,deep) { if (obj === null || (typeof obj !== "object" && !$.isFunction(obj))) { return obj; } if ($.isFunction(obj)) {return new Function("return " + obj.toString())();}else {var name, target = $.isArray(obj) ? [] : {}, value; for (name in obj) { value = obj[name]; if (value === obj) {continue;}if (deep && ($.isArray(value) || $.isObject(value))) {target[name] = copy(value,deep);}else {target[name] = value;} } return target;}         
}

原文:javascript中的深拷贝和浅拷贝区分以及实现 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/javascript-object-clone.html)

转载于:https://www.cnblogs.com/zshno1/p/10812075.html

相关文章:

关于 fallocate 文件系统预分配 的一些细粒度测试

文章目录Rocksdb 中的预分配Fallocate in rocksdb 性能测试Fallocate 使用 以及 对应配置的行为API 使用不同 Mode 的行为分配磁盘空间释放磁盘空间折叠/裁剪 文件内容清零文件 扩容文件Rocksdb 中的预分配 预分配文件存储空间 在存储引擎中用的还是比较频繁的&#xff0c;尤…

mac 使用nvm安装node

1.curl https://raw.github.com/creationix/nvm/master/install.sh | sh2。vi ~/.bash_profile 添加&#xff1a;source /Users/dujie/.nvm/nvm.sh nvm install 0.10.24 nvm use 0.10.24 # 默認使用 0.10.24 版本&#xff0c;否則每次關掉 Terminal 就得重新 nvm use 一次 $…

Java项目:人事管理系统(java+javaweb+jdbc)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能介绍&#xff1a; 登录、新增、修改、离职 员工管理控制层&#xff1a; Controller RequestMapping("/employee") public class EmployeeController {Autowiredprivate IEmployeeService em…

转:async await 的前世今生 ; 异步 线程 多线程

写的非常好,改天搬过来

ubuntu14.04初体会

2014年4月17日ubuntu新的长期支持版14.04公布了&#xff0c;中国时间18日一早就能够下载到。18日晚。在我的X200上安装上了14.04&#xff0c;算是比較早一批体会到14.04正式版的人吧。对照12.04&#xff0c;14.04提升的执行速度非常明显&#xff0c;界面改善也是令人眼前一亮&a…

Linux 下获取本机所有网卡 以及 网卡对应ip 列表

简单record 一下 #include <arpa/inet.h> // struct sockaddr_in #include <errno.h> #include <net/if.h> // struct ifreq and struct if_nameindex #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/i…

Java项目:植物大战僵尸(java+swing)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能简介&#xff1a; 植物大战僵尸、冒险模式、生存模式、解谜模式 小车服务类&#xff1a; public class CarThread extends Thread{private boolean flagtrue;private int x;private int y;private JL…

秋实大哥の恋爱物语

//裸kmp&#xff0c;劳资居然不会写&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 题意&#xff1a;中文题面自己看 解&#xff1a;差分裸kmp 因为可以上下移动&#xff0c;所以只要变化趋势相符就行&#xff0c;于是我们先做一个差分&#xff0c…

《马哥出品高薪linux运维教程》wingkeung学习笔记-linux基础入门课程5

命令&#xff1a;内部命令&#xff1a;由shell程序自带的命令叫做内部命令&#xff1b;外部命令&#xff1a;在系统的某个路径下&#xff0c;有一个与命令同名的可执行程序叫做外部命令。查看内外部命令的命令&#xff1a;type 命令命令选项&#xff1a;用于调整命令执行行为的…

八、LaTex中的表格

转载于:https://www.cnblogs.com/invisible2/p/10813964.html

基于持久内存的 单机上亿(128B)QPS -- 持久化 k/v 存储引擎

文章目录性能数据设计背景设计架构Hash 索引结构 及 PMEM空间管理形态基本API 及 实现API初始化流程写流程读流程删除流程PMEM Allocator设计主要组件空间分配流程空间释放图数据库 on KVDK 性能性能数据 这个kv 存储引擎是持久化的存储引擎&#xff0c;存储介质是PMEM&#x…

SCALA当的trait

不是特别懂&#xff0c;但感觉和RUBY当中的MIX-IN功能有几分相似&#xff0c;这又扯到了多重继承及JAVA当中的接口虚拟类了。。 package com.hengheng.scalaclass UseTrait {} trait Logger {def log(msg : String) {println("log : " msg)} } trait ConsoleLogger …

Java项目:贪吃蛇游戏(java+swing)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能简介&#xff1a; 贪吃蛇游戏 大嘴鱼洁面类。完成大嘴鱼的界面的绘制: /*** 大嘴鱼洁面类。完成大嘴鱼的界面的绘制。*/ public class BigMouthFishFrame extends JFrame{private FishPool pool null;…

使用Ext Form自动绑定Html中的Form元素

2019独角兽企业重金招聘Python工程师标准>>> Java代码 //把ext 对象绑定在Html Form元素时的ext属性中 Ext.override(Ext.Component, { initComponent :function(){ this.on(render, function(){ if(this.el) Ext.getDom(this.el).ext this; …

Directx11 教程(2) 基本的windows应用程序框架(2)

Directx11 教程(2) 基本的windows应用程序框架(2) 原文:Directx11 教程(2) 基本的windows应用程序框架(2)在本教程中&#xff0c;我们把前面一个教程的代码&#xff0c;进行封装。把初始化函数&#xff0c;Run函数&#xff0c;窗口回调函数&#xff0c;ShutdownWindows函数等封…

Rocksdb的事务(二):完整事务体系的 详细实现

文章目录1. 基本事务操作1.1 TransactionDB -- Pessimistic1.2 OptimisticTransactionDB1.3 Read Uncommitted1.4 SavePoint 回滚部分事务操作1.5 SetSnapshot1.6 GetForUpdate1.7 RepeatableRead2. 实现2.1 WBWI(write batch with index) & WB(write batch)2.2 Pessimisti…

关于学习编程的一些看法

1、看书&#xff0c;书上的代码一串一串的对吧&#xff1f;是不是很不好记&#xff1f;是不是觉得如果自己把这些代码都敲一遍很浪费时间&#xff1f;其实对于一些完全没有任何基础的人来说&#xff0c;全部敲一遍不失为一种简单的入门方法。对于有一点基础的人来说&#xff0c…

Java项目:日历万年历(java+swing)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能简介&#xff1a; 万年历 启动类&#xff1a; public class CalendarMainClass { public static void main(String args[]) { try { UIManager.setLookAndFeel("com.sun.java.swing.pl…

求大神给解释一下H3C ospf 双塔奇兵

转载于:https://blog.51cto.com/2807200/1364566

活着是为了什么?

活着是为了死亡&#xff0c;死亡才是完美&#xff0c;才是永恒。 死亡时将一无所有&#xff0c;所以活着不是为了能带走什么&#xff0c;而应该是能留下什么&#xff0c;这才是人活着的意义&#xff0c;多少人能想明白呢&#xff1f; 胡建龙转载于:https://www.cnblogs.com/hjl…

XFS 文件系统 (一) :设计概览

文章目录0 前言1 设计背景2. 需要解决的问题2.1 异常恢复太慢2.2 不支持大文件系统2.3 不支持大型稀疏文件2.4 不支持大型连续文件2.5 不支持大目录2.6 不支持过多文件个数3 XFS 架构4 痛点解决4.1 Allocation Groups4.2 Manging Free Space4.3 大文件的支持5 总结0 前言 虽然…

WebApi2官网学习记录---异常处理

HttpResponseException 当WebAPI的控制器抛出一个未捕获的异常时&#xff0c;默认情况下&#xff0c;大多数异常被转为status code为500的http response即服务端错误。 HttpResonseException是一个特别的情况&#xff0c;这个异常可以返回任意指定的http status code&#xff0…

Java项目:资源下载工具(java+swing)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能简介&#xff1a; 下载地址、保存位置、下载设置、下载进度 文件仓库控制器&#xff1a; /*** ClassName: FileStoreController* Description: 文件仓库控制器**/ Controller public class FileStoreC…

江南Style之---西湖

西湖古称“钱塘湖”&#xff0c;又名“西子湖”&#xff0c;古代诗人苏轼就对它评价道&#xff1a;“欲把西湖比西子&#xff0c;淡妆浓抹总相宜。西湖&#xff0c;是一首诗&#xff0c;一幅天然图画&#xff0c;一个美丽动人的故事&#xff0c;不论是多年居住在这里的人还是匆…

mimikatz

下载后&#xff0c;在目标机直接运行 常用命令&#xff1a; 提升权限&#xff1a;privilege::debug 获取用户登录明文账号密码&#xff1a;sekurlsa::logonPasswords 获取用户密码hash值&#xff1a;lsadump::sam 转载于:https://www.cnblogs.com/xiaoqiyue/p/10824169.html

通过 RDTSC 指令从 CPU 寄存器中直接获取系统时钟

很多时候我们使用函数 gettimeofday 以及 clock_gettime 作为我们获取 wall lock的时钟函数。 因为这两种函数是 glibc 提供的用户封装&#xff0c;简单易用&#xff0c;而且能够精确到 ns&#xff0c;对于大多数的时钟需求场景都已经够用了。 但是如果 我们的应用 调用时钟频…

Java项目:星际争霸游戏(java+swing+awt界面编程+IO输入输出流+socket+udp网络通信)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 功能简介&#xff1a; 星际争霸游戏项目&#xff0c;该项目实现了单人模式和多人合作模式&#xff0c;可记录游戏进度&#xff0c;新建游戏&#xff0c;载入历史记录等功能&#xff0c;多人模式下可以创建一…

GTONE清理维护建议方案

1、日志清理/home/gtone/AppGov/analyzer/log//home/gtone/AppGov/analyzer/SRC/temp//home/gtone/AppGov/WAS/logs/ 2、扩容现有磁盘空间至200GB转载于:https://www.cnblogs.com/arcer/p/4461018.html

[C#]委托和事件(讲解的非常不错)

引言 委托 和 事件在 .Net Framework中的应用非常广泛&#xff0c;然而&#xff0c;较好地理解委托和事件对很多接触C#时间不长的人来说并不容易。它们就像是一道槛儿&#xff0c;过了这个槛的人&#xff0c;觉得真是太容易了&#xff0c;而没有过去的人每次见到委托和事件就觉…

BZOJ1460: Pku2114 Boatherds

题目链接&#xff1a;点这里 题目描述&#xff1a;给你一棵n个点的带权有根树&#xff0c;有p个询问&#xff0c;每次询问树中是否存在一条长度为Len的路径&#xff0c;如果是&#xff0c;输出Yes否输出No. 数据范围&#xff1a;\(n\le1e5\,,p\le100\,,长度\le1e5\) Solution: …