先来普及一下深拷贝和浅拷贝的区别
浅拷贝:就是简单的复制,用等号即可完成


let a = {a: 1}
let b = a

这就完成了一个浅拷贝
但是当修改对象b的时候,我们发现对象a的值也被改变了


b.a = 10
console.log(a.a) => 10

这是因为浅拷贝只复制了指向对象的指针,新旧对象共用同一块内存,修改某一个对象的同时也会把另一个都一并修改了

深拷贝:跟浅拷贝最简单明了的区别就是修改拷贝的对象,不会改变源对象
利用Object.assign可以对只有一层的对象实现深拷贝,如下:


let a = {a: 1,b: 2,c: 3}
let b = Object.assign({}, a)
b.b = 100
console.log(a.b) => 2

可以看出来这样是完全可以做到对只有一层的对象实现深拷贝的
但是如果对象里面的元素还是对象的话就没作用了


let a = {a: 1,b: 2,c: 3, d: {a: 1}}
let b = Object.assign({}, a)
b.d.a = 100
console.log(a.d.a) => 100

对于这种比较复杂的对象,我们就可以利用递归的方式实现真正的对象深拷贝了


function deepClone (sourceObj, targetObj) {
let cloneObj = targetObj || {}
if(!sourceObj || typeof sourceObj !== "object" || sourceObj.length === undefined){
return sourceObj
}
for(let i in sourceObj){
if (typeof sourceObj[i] === 'object' && sourceObj[i].length !== undefined) {
cloneObj[i] = deepClone(sourceObj[i], {})
} else {
cloneObj[i] = sourceObj[i]
}
}
return cloneObj
}

简单的几行代码就可以轻松实现对象的深拷贝


简单的测试代码,如下:
let sourceObj = {
a: 1,
b: {
a: 1
},
c: {
a: 1,
b: {
a: 1
}
},
d: function() {
console.log('hello world')
},
e: [1, 2, 3]
}
let targetObj = deepClone(sourceObj, {})
targetObj.c.b.a = 9
console.log(sourceObj) => { a: 1, b: { a: 1 }, c: { a: 1, b: { a: 1 } }, d: [Function: d], e: [ 1, 2, 3 ] }
console.log(targetObj) => { a: 1, b: { a: 1 }, c: { a: 1, b: { a: 9 } }, d: [Function: d], e: [ 1, 2, 3 ] }

另外介绍两个用来做深拷贝的库


**jquery**
使用方法:
let targetObj = $.extent(true,{},sourceObj)
**lodash函数库**
使用方法:
npm install lodash
**es5写法**
let lodash = require('lodash')
**es6写法**
import lodash from 'lodash' let targetOj = lodash.cloneDeep(sourceObj)

各位看官觉得有什么地方不对的请多多指教。

来源:https://segmentfault.com/a/1190000015924675

JavaScript:利用递归实现对象深拷贝的更多相关文章

  1. JavaScript递归实现对象深拷贝

    let personOne = { name:"张三", age:18, sex:"male", children:{ first:{ name:"z ...

  2. javascript 利用匿名函数对象给你异步回调方法传参数

    先来创建一个匿名函数对象: /*** * 匿名函数 */ var callChangeBtn=new function(bugBtn){ this.chage=function(json){ bugB ...

  3. JavaScript利用递归和循环实现阶乘

    [实现方法] 1.利用while循环来做,当然for循环也可以. 2.递归 [代码内容] 偷懒,直接用onkeyup事件来限制来页面的输入 循环代码: //第一种方法 while循环 oCount.o ...

  4. javascript JS递归遍历对象 使用for(variable in object)或者叫for/in和forEach方式

    1.递归遍历查找特定key值(ie9以下不支持forEach) 原文http://www.cnblogs.com/ae6623/p/5938560.html var obj = { first: &q ...

  5. Javascript利用递归实现数组的快速排序

    // 定义快速排序方法 function quickSort(arr){ // 设置递归的终止条件 if( arr.length <= 1){ return arr; } // 获得数组arr的 ...

  6. javascript对象深拷贝,浅拷贝 ,支持数组

    javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...

  7. javascript学习总结之对象的深拷贝和浅拷贝

    前言 最近在写ES6的文章的时候发现重复遇到关于javascript深拷贝和浅拷贝的问题,然后查找了一些资料,根据资料和自己的理解做了以下笔记,毕竟javascript关于深拷贝和浅拷贝的问题在一些面 ...

  8. JavaScript对象---递归遍历对象

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 St ...

  9. JavaScript的 基本数据类型---对象

    第一:Javascript对象是 第二:Javascript中 第三:Javascript的对象是数据: 第四:JavaScript 中的对象可以简单理解成"名称:值"对(name ...

随机推荐

  1. centos7.5安装公版mysql5.7.25

    ######### 卸载原来系统安装的包 # yum remove -y java cvs libselinux-devel postgresql mysql ecj jna sinjdoc 依赖包安 ...

  2. C/C++获取系统当前时间

    C/C++获取系统当前时间   C库中与系统时间相关的函数定义在<time.h>头文件中, C++定义在<ctime>头文件中. 一.time(time_t*)函数 函数定义如 ...

  3. 深喉起底APP线下预装市场,如何一夜间拥有千万用户

    注:预装对于中国的移动互联网创业者有多重要?i黑马知道这样一个内幕,某商务告诉我他们公司的前2000万用户就是靠预装打下来的,总部在北京,直接派驻商务长期扎根在深圳搞定手机厂商.而这家公司初期发展得益 ...

  4. jmeter是什么

    Apache JMeter 是Apache 组织开发的基于 Java 的压力测试工具: 适用的测试领域:地方 用于对软件做压力测试,它可以用于测试静态和动态资源,例如:静态文件,Java 小程序.CG ...

  5. tensorflow/model下的各个参数的理解

    首先,这个对应的proto就是 然后config里面的image_resizer等等 就是proto里面的image_resizer 等等,对应的参数可以在proto里面寻找解释和默认值以及类型 再比 ...

  6. 评价目标检测(object detection)模型的参数:IOU,AP,mAP

    首先我们为什么要使用这些呢? 举个简单的例子,假设我们图像里面只有1个目标,但是定位出来10个框,1个正确的,9个错误的,那么你要按(识别出来的正确的目标/总的正确目标)来算,正确率100%,但是其实 ...

  7. springboot使用@Aspect实现AOP记录日志讲解

    AOPAOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.在日常开发当中经常用来记录日志,方法跟踪 ...

  8. 2018-11-19-windows-应用程序在关机时的退出代号

    title author date CreateTime categories windows 应用程序在关机时的退出代号 lindexi 2018-11-19 14:31:38 +0800 2018 ...

  9. Redis源码解析:27集群(三)主从复制、故障转移

    一:主从复制 在集群中,为了保证集群的健壮性,通常设置一部分集群节点为主节点,另一部分集群节点为这些主节点的从节点.一般情况下,需要保证每个主节点至少有一个从节点. 集群初始化时,每个集群节点都是以独 ...

  10. 【python之路33】开发模式单例模式及简单的服务器请求框架原理

    1.单例模式指的是创建单个实例,例如:数据库连接池中包含10个数据库连接,用户访问数据时随机从连接池中拿出一个进行连接,其他用户再次访问时不再创建对象进行连接 #!usr/bin/env python ...