最简js深浅拷贝说明
1.浅拷贝
浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响。
浅拷贝分两种情况:
1、直接拷贝源对象的引用
2、 源对象拷贝实例,但其属性对象(类型为Object,Array的属性)拷贝引用
直接拷贝源对象的引用
//最简单的例子
var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = ;
console.log(b.c); // 输出 2,,这里就是拷贝了对象的引用,从而两边都改变了
源对象拷贝实例,其属性对象拷贝引用
说明:外层源对象是拷贝实例,当其属性元素为复杂数据类型时,内层元素拷贝引用。这时对源对象直接操作,不影响两对象,但是对其属性操作时候,会改变两对象的属性的值。
常用方法为:Array.prototype.slice(), Array.prototype.concat(), jQury的$.extend({},obj)
var a = [{c:1}, {d:2},2];
var b = a.slice();
console.log(a === b); // 输出false,说明外层数组拷贝的是实例
a[].c = ;
console.log(b[].c); // 输出 3,说明其元素拷贝的是引用
a[2]=4;
console.log(b[2]); //输出 2,不是复杂数据类型,所以没有变,没有引用
2.深拷贝
将重新分配内存,并且把源对象所有属性都进行新建拷贝,以保证对象的引用图不包含任何原有对象或对象图上的任何对象,拷贝后的对象与原来的对象是完全隔离,互不影响。
深拷贝
说明:深拷贝后,两个对象,包括其内部的元素互不干扰。常见方法有JSON.parse(),JSON.stringify(),jQury的$.extend(true,{},obj):
b = JSON.parse( JSON.stringify(a) )//最简单的深拷贝
但有局限性:
- 无法复制函数
- 原型链没了,对象就是object,所属的类没了
jQury的$.extend(true,{},obj):
var a = {c: {d: }};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = ;
console.log(b.c.d); // 输出 1,没有改变。
深拷贝本质理解:将原对象各个属性所包含的对象也依次采用深复制的方法“递归复制”到新对象上。这就不会存在上面 obj 和 shadowObj 的 arr 属性指向同一个对象的问题。例:
var deepCopy= function(source) {
var result={};
for (var key in source) {
result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
}
return result;
}//通过递归调用复制对对象上的每一个子类进行复制,从而达到时属性指向不同对象
复杂全面的代码,可以学习借鉴
function() {
function _type(value) {
return Object.prototype.toString.call(value).slice().slice(, -).toLowerCase();
}
function isArray(value) {
return _type(value) == 'array';
}
function isObject(value) {
return _type(value) == 'object';
}
function cloneArray(src, dest) {
src.forEach(function(item, index) {
if (isArray(item)) {
console.log('yes')
dest[index] = [];
copy(src[index], dest[index]);
} else {
dest[index] = src[index];
}
});
}
function cloneObject(src, dest) {
for (var key in src) {
// filter 原型链上面的属性
if (src.hasOwnProperty(key)) {
if (isObject(src[key])) {
// 判断循环引用的问题
if (src[key] === src) {
dest[key] = src;
} else {
dest[key] = {};
copy(src[key], dest[key]);
}
} else if (isArray(src[key])) {
dest[key] = [];
cloneArray(src[key], dest[key])
} else {
dest[key] = src[key];
}
}
}
}
function cloneDeep(src) {
if (isArray(src)) {
var dest = [];
cloneArray(src, dest);
}
if (isObject(src)) {
var dest = {};
cloneObject(src, dest);
}
return dest;
}
window.clone = cloneDeep;
})();
如有错误欢迎留言改正……
最简js深浅拷贝说明的更多相关文章
- js 深浅拷贝 笔记总结
一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...
- JS深浅拷贝及其实现
基本数据类型和引用数据类型 JS数据分为基本数据类型和引用数据类型.基本数据类型的变量存储在栈中,引用数据类型则存储在堆中,引用数据类型的存储地址则保存在栈中. 下面来看一个小例子 // 基本数据类型 ...
- jQuery开发插件的两个方法 js 深浅拷贝
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...
- js深浅拷贝
作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况.通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况. 浅拷贝 首先可以通过O ...
- JS 深浅拷贝
首先理解概念 浅拷贝: 只复制对象的基本类型, 对象类型, 仍属于原来的引用. 深拷贝: 不紧复制对象的基本类, 同时也复制原对象中的对象.就是说完全是新对象产生的. 首先看浅拷贝 //浅拷贝 var ...
- JS中深浅拷贝 函数封装代码
一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
- js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题
js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...
- JS--变量及深浅拷贝
JS变量分为基本类型和引用类型 基本类型数据包括Number, String, Boolean, Null, Undefined五种类型: 引用数据类型包括Array, Date, RegExp, F ...
- 【 js 基础 】 深浅拷贝
underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...
随机推荐
- ffmpeg,rtmpdump和nginx rtmp实现录屏,直播和录制
公司最近在做视频直播的项目,我这里分配到对直播的视频进行录制,录制的方式是通过rtmpdump对rtmp的视频流进行录制 前置的知识 ffmpeg: 用于实现把录屏工具发出的视频和音频流,转换成我们需 ...
- python学习笔记(十)完善数据库操作
1.cur = coon.cursor(cursor=pymysql.cursors.DictCursor)的用法 建立游标,指定cursor类型返回的是字典,如果不指定类型,返回的是元组类型数据 i ...
- 利用ssh的私钥登录Linux server
[https://blog.csdn.net/hello0370/article/details/41650513] 1.创建一个private key的文件,我使用vim编辑器,创建vi my_pr ...
- python 中字典的操作(增、删、改、查)
字典是另一种可变容器模型,且可存储任意类型对象,下标从0开始,最后一个为-1. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({}) ...
- SVN无法Cleanup
错误如下: 原因:svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了 解决方法:清空svn的队列 1.下载Sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc ...
- 在Idea中连接数据库并生成实体类(mybatis逆向生成实体类)
1.连接数据库 (1)按下图 , 点击view-----选择tool windows----------选择database并点击 (2)弹出Database窗口 点击加号------------选 ...
- ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat (树链剖分-线性变换线段树)
树链剖分若不会的话可自行学习一下. 前两种操作是线性变换,模\(2^{64}\)可将线段树全部用unsigned long long 保存,另其自然溢出. 而取反操作比较不能直接处理,因为其模\(2^ ...
- cocostudio 在VS模拟器中加载资源显示混乱问题
这个是由于cocos2d-x的资源是统一按照文件名管理的,所以游戏全局不能有重名. PS:所有用到的素材名字必须单一.
- JVM调优总结(转)
本文转自:http://my.oschina.net/xishuixixia/blog/132395 常用的调优参数. 1.堆大小 -Xms和-Xmx用于指定堆大小,我们需要将他们俩设置为一样的值,以 ...
- nginx添加sticky cookie 分流模块
需要下载nginx源码和sticky,在nginx配置文件中添加sticky模块,然后重新编译nginx. #准备安装基础环境:yum install gcc openssl-devel pcre-d ...