JavaScript深拷贝全解

最新推荐文章于 2023-08-06 23:17:30 发布
最新推荐文章于 2023-08-06 23:17:30 发布
阅读量334 收藏
点赞数
分类专栏： 前端技术笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145258/article/details/105973658
版权

文章目录

什么是深拷贝？

深浅拷贝都是对于复杂数据类型Object来说的，而对象涉及到传值传址的问题
下列浅拷贝

let obj1 = {
  a: 1,
  b: 2,
}

let obj2 = obj1

浅拷贝就是单纯的传值，obj1对象的地址值赋值给obj2
这就会导致obj1，obj2操作的是同一个对象

深拷贝就是在堆内存中重新开辟一块地址空间，实现两者互不影响的拷贝

方法一：JSON序列化与反序列化

var obj = {
  a: 1,
  b: [1,2,3],
  c: {
    d: 4,
    e: 5,
  },
}

var obj2 = JSON.parse(JSON.stringify(obj))

obj2.a = 2;
obj2.c.e = 555;
console.log(obj, obj2)

在这里插入图片描述

缺点

  1. 不支持function

  2. 不支持undefined
    在这里插入图片描述

  3. 不支持引用，环状结构

    var obj = {
  name: 'lc'
}
obj.self = obj;
var obj2 = JSON.parse(JSON.stringify(obj))

console.log(obj, obj2)

    在这里插入图片描述

    1. 不支持正则表达式
      在这里插入图片描述

JSON不支持的数据类型都无法拷贝
JSON只支持：string, boolean, array, object, null五种类型

方法二：递归克隆

思路

递归

  1. 看结点的类型（7种）number，string，bool，undefined，null，object，symbol（arry以及function是object的子类型）
  2. 如果是基本类型就直接赋值
  3. 如果是object就分情况讨论

object

  1. 普通 object：for in
    for in 有个问题，他会遍历原型里的键
  2. 数组 Array初始化
  3. 函数，闭包如何拷贝？
  4. 日期Date 如何拷贝？

实现

1 拷贝普通类型

function deepClone(source) {
    return source;
}

2 拷贝对象object以及数组类型

function deepClone(source) {
    if (source instanceof Object) {
        // 判断是对象还是子类型数组，分别处理返回结果的类型
        const dist = source instanceof Array ? new Array() : new Object()
        for (let key in source) {    // for in 会遍历source原型上的属性
            dist[key] = deepClone(source[key]);
        }
        return dist
    }
    return source;
}

3 拷贝函数function

function deepClone(source) {
    if (source instanceof Object) {
        let dist = {};
        if (source instanceof Array) {
            dist = [];
        } else if (source instanceof Function) {
            dist = function () {
                return source.apply(this, arguments);
            }
        }
        for (let key in source) {    // for in 会遍历source原型上的属性
            dist[key] = deepClone(source[key]);
        }
        return dist
    }
    return source;
}

let source = {
    deep: 1,
    common: '普通数据类型',
    arr: [1, 2, 3],
    obj: {
        deep: 2,
        obj: {
            deep: 3,
        }
    },
    func: function (x, y) { return x + y },
}
let source2 = deepClone(source);
// console.log(source)
// console.log(source2)
console.log(source.func(1, 2))
console.log(source2.func(1, 2))

4. 解决闭环问题

闭环问题

以上对象总会有一个结尾，递归会终止
但是如果对象有一个环，就会死循环
比如说window对象其实就是一个环
在这里插入图片描述

let source = {
    circle: {},
}
source.circle.self = source.circle;

let source2 = deepClone(source);

在这里插入图片描述

解决

记录已经遍历过的对象，每次深拷贝之前判断是否走过就行了
如果已经是拷贝过的，注意要返回的是之前已经拷贝过的对象
这样才能实现独立的新环
所以保存原对象时要同时保存拷贝对象

let cache = []; // 保存已经克隆的对象

function findCache(source) {
    for (let i = 0; i < cache.length; i++) {
        if (cache[i][0] === source) {
            // 返回之前的拷贝
            return cache[i][1];
        }
    }
}
function deepClone(source) {
    if (source instanceof Object) {
        let cacheDist = findCache(source);
        // 判断是否拷贝过
        if (cacheDist) {
            return cacheDist;
        }

        let dist = {};  // 默认为对象
        if (source instanceof Array) {
            dist = [];
        } else if (source instanceof Function) {
            dist = function () {
                return source.apply(this, arguments);
            }
        }
        cache.push([source, dist]);

        for (let key in source) {    // for in 会遍历source原型上的属性
            dist[key] = deepClone(source[key]);
        }
        return dist;
    }
    return source;
}

circle = {
    a: 1
}
circle.self = circle;

let circle2 = deepClone(circle);
circle2.a = 1111111;
console.log(circle.self)
console.log(circle2.self)
console.log(circle !== circle2)
console.log(circle.a === circle2.a)
console.log(circle.self !== circle2.self)

5 解决爆栈问题（一般不考虑）

如果一个对象里有很多对象，递归会调用栈，如果栈的长度高于2万，就会出现爆栈问题
通过for循环模拟一个无限级对象

let a = {
    child: null,
}
let b = a;
for (let i = 0; i < 20000; i++) {
    b.child = {
        child: null
    }
    b = b.child;
}
解决方法

将竖向的递归改为横向的队列，依次深拷贝，一般来说不用考虑爆栈

6 拷贝正则表达式和Date()

正则表达式

有两个重要属性
在这里插入图片描述
只需要获取这两个属性重新声明正则就行了

 else if (source instanceof RegExp) {
     dist = new RegExp(source.source, source.flags)
 }
拷贝Date()
else if (source instanceof Date) {
  dist = new Date(source);
}
由此可得

如果对象是一些特殊子对象
只能else if 来判断，并new一个新的这个特殊对象

完整代码

let cache = []; // 保存已经克隆的对象

function findCache(source) {
    for (let i = 0; i < cache.length; i++) {
        if (cache[i][0] === source) {
            // 返回之前的拷贝
            return cache[i][1];
        }
    }
}
function deepClone(source) {
    if (source instanceof Object) {
        let cacheDist = findCache(source);
        // 判断是否拷贝过
        if (cacheDist) {
            return cacheDist;
        }

        let dist = {};  // 默认为对象
        if (source instanceof Array) {
            dist = [];
        } else if (source instanceof Function) {
            dist = function () {
                return source.apply(this, arguments);
            }
        } else if (source instanceof RegExp) {
            dist = new RegExp(source.source, source.flags)
        } else if (source instanceof Date) {
            dist = new Date(source);
        }
        cache.push([source, dist]);

        for (let key in source) {    // for in 会遍历source原型上的属性
            // 如果不是本身的属性就跳过
            if (!source.hasOwnProperty(key)) continue;
            dist[key] = deepClone(source[key]);
        }
        return dist;
    }
    return source;
}

其他问题（面试技巧）

可以留下这些问题给面试官，并且想好解决方案

1 是否需要拷贝原型属性？

  • 不需要，内存太大
  • 所以需要跳过原型属性
  • 解决for in 遍历原型的问题

给源对象一个原型属性

let a = Object.create({ name: 'a' });
a.xxx = { yyy: { zzz: 1 } };
let b = deepClone(a);
console.log(a.__proto__)
console.log(b.__proto__)

深拷贝的遍历中，不是自身属性就跳过

if (!source.hasOwnProperty(key)) continue;

2 解决目前cache的问题

cache在进行一次深拷贝后没有清空，会造成全局变量污染问题
面向对象来解决，封装成一个class

class Cloner {
    constructor() {
        this.cache = []; // 保存已经克隆的对象
    }

    findCache(source) {
        for (let i = 0; i < this.cache.length; i++) {
            if (this.cache[i][0] === source) {
                // 返回之前的拷贝
                return this.cache[i][1];
            }
        }
    }
    deepClone(source) {
        if (source instanceof Object) {
            let cacheDist = this.findCache(source);
            // 判断是否拷贝过
            if (cacheDist) {
                return cacheDist;
            }

            let dist = {};  // 默认为对象
            if (source instanceof Array) {
                dist = [];
            } else if (source instanceof Function) {
                dist = function () {
                    return source.apply(this, arguments);
                }
            } else if (source instanceof RegExp) {
                dist = new RegExp(source.source, source.flags)
            } else if (source instanceof Date) {
                dist = new Date(source);
            }
            this.cache.push([source, dist]);

            for (let key in source) {    // for in 会遍历source原型上的属性
                // 如果不是本身的属性就跳过
                if (!source.hasOwnProperty(key)) continue;
                dist[key] = this.deepClone(source[key]);
            }
            return dist;
        }
        return source;
    }
}


let obj1 = {
    a:1,
    obj: {
        a: 1,
    },
    func: function(){},
}
let dc = new Cloner();
let obj2 = dc.deepClone(obj1);
obj2.a = 111111;
obj2.obj.a = 2222222;
obj2.func = function(){console.log('成功')};
console.log(obj1)
console.log(obj2)
obj2.func();
斜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript深拷贝的方法
从来无所求，所得皆惊喜！
03-20 2442
深拷贝会将原始对象及其所有子对象都复制到堆中，并返回一个指向新对象的引用。这样，新的对象与原始对象之间**不存在任何关联**，修改其中一个对象不会影响另一个对象。
javascript 深拷贝
10-29
JavaScript中的深拷贝是一种创建一个全新对象的过程，这个新对象完全独立于源对象，拥有与源对象相同的属性和值，包括嵌套的对象和数组。在JavaScript中，浅拷贝（shallow copy）只是简单地复制对象引用，而深拷贝会...
JavaScript实现深拷贝
weixin_41198447的博客
07-27 208
JavaScript实现深拷贝
4种JavaScript深拷贝的方法
web前端开发
05-16 349
来源 |https://www.fly63.com/浅拷贝与深拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的是内存地址 。如果不进行深拷贝，其中一个对象改变了对象的值，就会影响到另一个对象的值。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新...
javascript深拷贝
CreeSteve的博客
04-15 487
方法进行深拷贝时，会丢失对象中的函数、正则表达式和 undefined 值。如果需要保留这些值，可以使用其他方法来实现深拷贝，例如递归遍历对象并手动创建新对象。JavaScript 中的深拷贝指的是创建一个新对象，该对象与原对象完全独立，即使修改新对象也不会影响到原对象。在 JavaScript 中，可以使用 JSON 库中的。
关于JS实现深拷贝的几种方法
hdxx2022的博客
08-06 2339
那么到这里，我们知道了深拷贝与浅拷贝的区别，同时从数据存储规则来解释，也明白了为什么要使用深拷贝；其次，我们知道了几种简单粗暴的深拷贝办法，也明白在何种情况下我们应该使用深拷贝。到此这篇关于JS实现深拷贝的文章就介绍到这了，希望对大家的学习有所帮助。转自：微点阅读。
javascript深拷贝的原理与实现方法分析
10-20
JavaScript中的深拷贝是创建一个全新的对象，这个新对象与其原始对象具有相同的属性和值，但它们在内存中是独立的，互不影响。这与浅拷贝不同，浅拷贝只复制对象的引用，而不是创建完全独立的副本。在JavaScript中，...
JavaScript 深拷贝 递归 手写
01-08
今天的学习笔记写在了自己的网页笔记本上，没有记录到博客，但是学到一个有关深拷贝的实现方法，为加深印象，这里给大家分享一下： 深拷贝：就是拷贝到最底层的属性。 function deepCopy(object){ //这里传入一个...
JavaScript深拷贝和浅拷贝概念与用法实例分析
10-18
主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
Javascript 浅拷贝、深拷贝的实现代码
10-30
总结来说，浅拷贝和深拷贝是JavaScript中处理对象复制的关键概念，它们在处理复杂数据结构时尤为重要，特别是在需要保持原始数据不变性的场景下。了解和掌握这两种拷贝方式，能够帮助开发者更好地理解和控制对象之间...
javascript深拷贝(deepClone)详解
11-25
javascript深拷贝是初学者甚至有经验的开发着，都会经常遇到问题，并不能很好的理解javascript的深拷贝。 深拷贝(deepClone)？ 与深拷贝相对的就是浅拷贝，很多初学者在接触这个感念的时候，是很懵逼的。 为啥要用深拷贝？ 在很多情况下，我们都需要给变量赋值，给内存地址赋予一个值，但是在赋值引用值类型的时候，只是共享一个内存区域，导致赋值的时候，还跟之前的值保持一直性。 看一个具体的例子 // 给test赋值了一个对象 var test = { a: 'a', b: 'b' }; // 将test赋值给test2 // 此时test和test2是共享了同一块内
JavaScript深拷贝的一些坑
weixin_34390105的博客
06-15 374
前言 之前去一家公司面试的时候，面试官问了我一个问题，说:"如何才能深拷贝一个对象"。当时我心里有些窃喜，这么简单的问题还用想吗？于是脱口而出:"平时常用的有两种办法，第一种用JSON.parse(JSON.stringify(obj))，第二种可以使用for...in加递归完成"。面试官听了以后点了点头觉得挺满意的。 当时我也并没有太过在乎这个问题，直到前段时间又想起这个问题，发现上面说的两种...
深拷贝和浅拷贝的区别、垃圾回收机制、缓存策略、输入URL到显示页面的步骤(简述)、事件循环(event loop)、
weixin_44423378的博客
05-09 77
深拷贝和浅拷贝的区别、垃圾回收机制、缓存策略、输入URL到显示页面的步骤(简述)、事件循环(event loop)
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法
热门推荐
FungLeo's Blog
02-08 13万+
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法前言在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示： 如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。 因此，数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马，实现数组的深拷贝，是有好几种方法的。举例如下：for 循环
js 深拷贝函数
zhengzhengwang的专栏
08-25 722
// 定义一个深拷贝函数 接收目标target参数 function deepClone(target) { // 定义一个变量 let result; // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object') { // 如果是一个数组的话 if (Array.isArray(target)) { result = []; // 将result赋值为一个数组，并且执行遍历 .
JavaScript中深克隆（深拷贝）的三种实现方式
qq_39410252的博客
11-26 1万+
由于Object类型与Array类型是引用类型，而引用类型在变量间的相互赋值是将指向内存的指针赋予过去，这样就会导致，当改变b的数据会将a的数据一同改变。 而在实际的开发过程中，有很多时候需要将两个变量间的关联断开，所以需要用到深克隆断开这个联系。 1、使用延展操作符（…）实现深克隆 这种方式是最简单且便捷的一种方式，但是只能深克隆一层，第二层的引用依然指向原来的位置。 2、使用JSON实现深克隆 这种方式也比较简便，并且可以实现多层的深克隆，但是无法复制function，无法适用全部场景。 3、使用
javascript 深拷贝浅拷贝
最新发布
05-28
在 JavaScript 中，深拷贝和浅拷贝是两种不同的对象复制方式。 浅拷贝是指将原对象的引用复制到新对象中，新对象只是原始对象的一个浅表副本。也就是说，对新对象所做的更改也会反映到原始对象中。JavaScript 中最...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值