JS深拷贝的实现

xinhaip 发布于2019-08-23 15:36 / 629人阅读

摘要：深拷贝和浅拷贝的区别深拷贝在于引用类型的时候，浅拷贝只复制地址值，实际上还是指向同一堆内存中的数据，深拷贝则是重新创建了一个相同的数据，二者指向的堆内存的地址值是不同的。深拷贝的实现通过递归方式实现深拷贝通过的方式实现通过实现

基本类型和引用类型

学习js的深拷贝和浅拷贝首先要了解js的基本类型和引用类型。

基本类型

基本类型的数据存放在栈内存中，复制的时候是值传递，直接把5赋值给了number2

var number1 = 5;
var number2 = number1;

引用类型

引用类型的数据存放在堆内存中，栈内存中只存放具体的地址值，把object1赋值给object2的时候是把object1的地址值赋值给了object2，这个时候两个对象同时指向堆内存中的同一数据。

var object1 = new Object();
var object2 = object1;

深拷贝和浅拷贝的区别

深拷贝在于引用类型的时候，浅拷贝只复制地址值，实际上还是指向同一堆内存中的数据，深拷贝则是重新创建了一个相同的数据，二者指向的堆内存的地址值是不同的。这个时候修改赋值前的变量数据不会影响赋值后的变量。

深拷贝的实现

通过递归方式实现深拷贝

function deepClone(obj) {
    var target = {};
    for(var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === "object") {
                target[key] = deepClone(obj[key]); 
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}

通过json的方式实现

function (obj) {
    let tmp = JSON.stringify(obj); 
    let result = JSON.parse(tmp); 
    return result;
}

通过Object.create()实现

function deepCopy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);
  
  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  
  return copy;
}

var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
var obj2 = deepCopy(obj1);
console.log(obj2)
obj1.a = 20;
console.log(obj1)
console.log(obj2)
//Object {a: 1, b: Object}
//Object {a: 20, b: Object}
//Object {a: 1, b: Object}

GPU云服务器云服务器深拷贝深拷贝和浅拷贝 javascript深拷贝 java实现文件拷贝

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

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

一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

J4ck_Chan 2019-08-01 18:22 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

lakeside 2019-08-22 13:48 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

big_cat 2019-08-29 14:12 评论0 收藏0
JS每日一题：深拷贝与浅拷贝的区别？如何实现一个深拷贝

摘要：期深拷贝与浅拷贝的区别如何实现一个深拷贝在回答这个问题前，我们先来回顾一下中两大数据类型基本类型引用类型基本类型基本类型就是值类型存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配引用类型引用类型存放在堆内存中的对象，变量实际保 20190311期深拷贝与浅拷贝的区别？如何实现一个深拷贝在回答这个问题前，我们先来回顾一下ＪＳ中两大数据类型基本类型 Undefined...

MiracleWong 2019-08-26 13:37 评论0 收藏0
浅探js深拷贝和浅拷贝

摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样...

habren 2019-08-23 13:01 评论0 收藏0
深入理解JS深浅拷贝

摘要：深拷贝相比于浅拷贝速度较慢并且花销较大。所以在赋值完成后，在栈内存就有两个指针指向堆内存同一个数据。结果如下扩展运算符只能对一层进行深拷贝如果拷贝的层数超过了一层的话，那么就会进行浅拷贝那么我们可以看到和展开原算符对于深浅拷贝的结果是一样。 JS中数据类型基本数据类型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用数据类型：...

JackJiang 2019-08-23 14:31 评论0 收藏0