JS数据类型可以分为(ES5,暂时不考虑ES6):

  简单数据类型:Number、String、undefined、boolean

  复杂数据类型:Object、Array

简单的数据类型,往往是赋值操作,而复杂数据类型是引用操作。

赋值操作我们就不讲了,主要看看引用操作把

    var arr = [1,2,3];
var arr2 = arr;
arr2.push(4);
console.log(arr);//输出[1,2,3,4]

明明是对arr2进行的操作,为什么arr也变化了呢?因为js存储对象都是存地址的,所以arr2实际存储的是:"arr在内存中的地址";

由此我们可以明白,既然都是指向同一个内存地址,当我们改变任何一个的时候,都会改变。

知道这个基本的特性那么我们可以试图来理解下浅复制和深复制

首先看一段代码,我们再来讲解下概念

    var obj ={a:1,b:2,c:[1,2]};
var shallowCopy = shallow(obj);
function shallow(obj){
var shallowObj = {};
for(var name in obj){
if(obj.hasOwnProperty(name)){
shallowObj[name] = obj[name]
}
}
return shallowObj
}
console.log(shallowCopy);//输出的就是这个对象,我们实现了简单的浅复制;

浅复制:只会将对象的各个属性进行依次复制,并不会进行递归复制,而js存储对象都是存地址的,所以浅复制会导致obj.c和shallowCopy.c 指向同一块内存地址;会导致引用。

深复制:它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面obj和shallowCopy的c属性指向同一个对象的问题。(待会贴出深复制的代码,这是个复杂的问题)

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

我现在给出一个简单版本的深复制,可以复制对象和数组(不考虑循环引用问题,函数对象问题),如果想深入研究的话可以看下这篇文章:http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

在这里我们只理解思想和简单的实现,实际项目中可以考虑使用lodash(http://lodashjs.com/docs/),或者jQuery的extend的方法也同样可以

    function deepClone(obj){
var newObj = obj.constructor === Array ? []:{};
if(typeof obj !== 'object'){
return
}else{
for(var i in obj){
if(obj.hasOwnProperty(i)){
newObj[i] = typeof obj[i] === 'object'?deepClone(obj[i]):obj[i];
}
}
}
return newObj
}

最核心的思想还是采用递归的方式,不断进行,直到基本数据类型后,再复制

方法还有很多种,譬如还有使用JSON.stringify进行序列化,JSON.parse进行反序列化,实现"偷懒版"的深复制...等等

js对象的深浅拷贝的更多相关文章

  1. js中的深浅拷贝

    js中的深浅拷贝 js中有深拷贝.浅拷贝一说,所谓的深浅拷贝是针对value类型为引用类型(函数.对象.数组)而言的,大概理解的就是: 浅拷贝: 拷贝出的对象c和原始对象o,c和o在key对应的val ...

  2. 关于Java的Object.clone()方法与对象的深浅拷贝

    文章同步更新在个人博客:关于Java的Object.clone()方法与对象的深浅拷贝 引言 在某些场景中,我们需要获取到一个对象的拷贝用于某些处理.这时候就可以用到Java中的Object.clon ...

  3. 【 js 基础 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

  4. JS复习之深浅拷贝

    一.复习导论(数据类型相关) 想掌握JS的深浅拷贝,首先来回顾一下JS的数据类型,JS中数据类型分为基本数据类型和引用数据类型. 基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以 ...

  5. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  6. Object.clone()方法与对象的深浅拷贝

    转载:[https://www.cnblogs.com/nickhan/p/8569329.html] 引言 在某些场景中,我们需要获取到一个对象的拷贝用于某些处理.这时候就可以用到Java中的Obj ...

  7. js对象的深度拷贝

    //判断对象的类型 Array Object Function String Number ..... function getObjType(obj){ return Object.prototyp ...

  8. 总结JavaScript对象的深浅拷贝

    十四.对象的浅拷贝与深拷贝 什么是对象的拷贝? 将一个对象赋值给另外一个对象, 我们称之为对象的拷贝 什么是深拷贝, 什么是浅拷贝? 我们假设将A对象赋值给B对象 浅拷贝是指, 修改B对象的属性和方法 ...

  9. js对象深潜拷贝(从requirejs中抠出来的)

    var op = Object.prototype, ostring = op.toString, hasOwn = op.hasOwnProperty; function isFunction(it ...

随机推荐

  1. Tex 括号的反思

    在Tex中,左双引号是“,右双引号是”,输入一篇包含双引号的文章,你的任务是把它转换成Tex的格式. 样例输入: “To be or not to be,”quoth the Bard,"t ...

  2. ov2640数据

    问题部分解决,数据错误的原因是太快了.将0x11->3f  0xd3->7f 哈哈 问题解决 直接降低7670输出频率 调0x11到最大分频比 现在能完整抓拍QVGA的图像 不过就是采集速 ...

  3. python学习笔记(二):python数据类型

    上一篇博客写了python的入门和简单流程控制,这次写python的数据类型和各种数据类型的内置方法.一.数据类型是什么鬼?计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各 ...

  4. c# webapi2 实用详解

    本文介绍webapi的使用知识 发布webapi的问题 配置问题 webapi的项目要前端访问,需要在web.config配置文件中添加如下配置 在system.webServer节点下面添加 < ...

  5. MySQL组合索引最左匹配原则

    几个重要的概念 1.对于mysql来说,一条sql中,一个表无论其蕴含的索引有多少,但是有且只用一条. 2.对于多列索引来说(a,b,c)其相当于3个索引(a),(a,b),(a,b,c)3个索引,又 ...

  6. Android 4学习(3):概述 - Resources

    在应用程序中,处理与代码逻辑无关资源的最佳实践是将其放到程序的外部,典型的资源包括字符串,图片等.Android中的资源文件都在res文件夹中,这些资源包括字符串,颜色,主题,样式,图画,布局,动画, ...

  7. latex如何进行多行注释

    单行注释:当LATEX 处理一个源文件时,如果遇到一个百分号%,LATEX 将忽略% 后的该行内容,换11行符以及下一行前的空白字符.多行注释:\begin{comment}rather stupid ...

  8. 1、序列化 2、转义 3、eval 4、正则表达式 5、时间处理

    1.序列化 JSON.stringify(obj)   序列化 JSON.parse(str)        反序列化 2.转义 decodeURI( )                   URl中 ...

  9. NIO/AIO

    1 NIO NEW IO 的简称,新的java I/O标准,jdk1.4纳入,有以下特点: (1)NIO基于block块,以块(硬盘数据块)为单位处理数据,比旧式的io基于流的效率高. (2)为各个基 ...

  10. LVS+keepalived搭建负载均衡

    安装环境:环境 centos4.4 LB:192.168.2.158(VIP:192.168.2.188) real-server1:192.168.2.187 real-server2:192.16 ...