JavaScript：利用递归实现对象深拷贝

Airy 发布于2019-08-23 10:49 / 664人阅读

摘要：先来普及一下深拷贝和浅拷贝的区别浅拷贝就是简单的复制，用等号即可完成这就完成了一个浅拷贝但是当修改对象的时候，我们发现对象的值也被改变了这是因为浅拷贝只复制了指向对象的指针，新旧对象共用同一块内存，修改某一个对象的同时也会把另一个都一并修改

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

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
    }
    if(sourceObj instanceof Array){
        cloneObj = sourceObj.concat()
    } else {
        for(let i in sourceObj){
            if (typeof sourceObj[i] === "object") {
                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)

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

GPU云服务器云服务器 javascript深拷贝深拷贝深拷贝和浅拷贝 javascript浅拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96712.html

JavaScript中的浅拷贝和深拷贝

摘要：在中可以通过添加一个参数来实现递归，调用就可以实现一个深拷贝。利用序列化实现一个深拷贝在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。这种拷贝分为两种情况：拷贝引用和拷贝实例，也就是我们说的浅拷贝和深拷贝浅拷贝（shallow...

ernest.wang 2019-08-21 11:34 评论0 收藏0
JavaScript基础心法——深浅拷贝

摘要：原文地址基础心法深浅拷贝欢迎。上面的代码是最简单的利用赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着和改变，和也随着发生了变化。展开运算符结论实现的是对象第一层的深拷贝。原文地址：JavaScript基础心法——深浅拷贝欢迎star。如果有错误的地方欢迎指正。浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生...

keithxiaoy 2019-08-21 17:22 评论0 收藏0
浅谈JavaScript 中深拷贝实现的方法

摘要：相信人很多学习的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。中的深拷贝也是用类似方法实现。相信人很多学习js的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。比较简单的拷贝方式可以借用浏览器的Json对象去实现，先把对象转化为json字符串，在解析回对...

Vicky 2019-08-20 13:50 评论0 收藏0
JavaScript之浅、深拷贝

摘要：前言里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。对象的拷贝又分为浅拷贝和深拷贝。印证了上述所说的对于所有的基本类型，简单的赋值已经是实现了深拷贝。前言 JavaScript里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。深浅拷贝的区别拷贝：其实就是一个对象复制给另外...

leanxi 2019-08-26 10:37 评论0 收藏0
javascript的深拷贝VS浅拷贝

摘要：深拷贝浅拷贝本文主要对深拷贝浅拷贝的解释及实现做一下简单记录。之所以会有深拷贝与浅拷贝之分，是因为不同数据类型的数据在内存中的存储区域不一样。但注意，只能做一层属性的浅拷贝。深拷贝VS浅拷贝本文主要对深拷贝&浅拷贝的解释及实现做一下简单记录。原文链接，欢迎star。之所以会有深拷贝与浅拷贝之分，是因为不同数据类型的数据在内存中的存储区域不一样。堆和栈是计算机中划分出来用来存储的...

Nekron 2019-08-23 15:08 评论0 收藏0