Javascript对象的深浅拷贝

qieangel2013 发布于2019-08-22 16:12 / 3391人阅读

摘要：开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。高级属性修改深拷贝满足对象的复制，浅拷贝影响原数组。关于对象的深浅拷贝，暂且探索到这里，后续有新发现再进行补充。

开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。
其实都是copy。

深拷贝(递归复制，复制所有层级，独立副本，一个完全和原来对象属性无关的副本)
返回对象：一个。
传入对象：一个。
条件：JSON安全的对象，可以序列化为JSON字符串，并且可以解析为新的字符串。
深拷贝算法：

function deepCopy(data){
    let memory = null;
    const type = Object.prototype.toString.call(data);
    if (type === "[object Array]"){
        memory = []
        for (let i=0 ;i{
            memory[key] = data[key]
        })
    }else{
        return data;
    }
    return memory;
}

jQuery深拷贝:
var copiedObject = jQuery.extend(true, {}, originalObject)

es6深拷贝：
var copiedObject= JSON.parse(JSON.stringify(originalObject));

深拷贝是递归复制，新复制的对象与原对象是完全独立的两个对象，它们指向不同的内存地址，做set不会影响到对方。

浅拷贝（单次复制，复制最高层级，引用副本，一个基于对原对象属性引用的副本）
返回对象：一个。
传入对象：一个或多个。
条件：无。

jQuery浅拷贝：
var copiedObject = jQuery.extend({}, originalObject)

es6浅拷贝：
var copiedObject = Object.assign({},originalObject)

es7浅拷贝：
var copiedObject = {...originalObject}

浅拷贝算法：

  function shallowCopyObj(original){
        let copy = {}
        Object.keys(original).forEach(key=>{
            copy[key] = original[key]
        })
        return copy
    }

由于javascript的对象是存地址的，所以浅复制的对象与原对象，都指向同一个内存地址，属于引用复制，做set会影响到对方。

实验：
①普通属性修改：深拷贝和浅拷贝都可以满足对象的复制。
普通属性是指value值为非Array，Object类型的数据类型，也就是Number，String，Boolean等基本数据类型。
原因：基本数据类型属于值传递。

var obj = {foo:1};
var deepCopyObj = JSON.parse(JSON.stringify(obj));
deepCopyObj.foo = 2;
console.log("obj.foo:",obj.foo);//1
console.log("deepCopyObj.foo:",deepCopyObj.foo);//2

var obj = {foo:1};
var shallowCopyObj = Object.assign({},obj);
shallowCopyObj.foo = 2;
console.log("obj.foo:",obj.foo);//1
console.log("shallowCopyObj.foo:",shallowCopyObj.foo);//2

②高级属性修改：深拷贝满足对象的复制，浅拷贝影响原数组。
高级属性是指Array，Object数据类型。
原因：基本数据类型属于引用传递。

var obj = {foo:1,bar:{baz:1}};
var deepCopyObj = JSON.parse(JSON.stringify(obj));
deepCopyObj.bar.baz = 2;
console.log("obj.bar.baz:",obj.bar.baz);//1
console.log("deepCopyObj.bar.baz:",deepCopyObj.bar.baz);//2

var obj = {foo:1,bar:{baz:1}};
var shallowCopyObj = Object.assign({},obj);
shallowCopyObj.bar.baz = 2;
console.log("obj.bar.baz:",obj.bar.baz);//2 Attention！
console.log("shallowCopyObj.bar.baz:",shallowCopyObj.bar.baz);//2

印象中const也是保持变量地址不变的操作，那么es6中的let和const对于对象的深浅拷贝有影响吗？

也就是将上面代码中的var替换为let和const。

实验结果是let和const不会影响深浅拷贝的结果，因为let强调块作用域，而const强调变量整体地址空间的不变性。

关于对象的深浅拷贝，暂且探索到这里，后续有新发现再进行补充。

谢谢您的阅读～

云服务器 GPU云服务器深浅拷贝 javascript的dom对象 javascript浅拷贝 javascript深拷贝

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

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

JavaScript的深浅拷贝

摘要：什么是深浅概念深拷贝浅拷贝只针对像这样的对象，对于基本类型而言，可以理解为是没有深浅的区别的。和指向了同一块内存深拷贝重新开辟了一个空间，修改对象的属性，彼此不会影响。并不会更改使用递归适用于对象里面有对象什么是深浅概念深拷贝、浅拷贝只针对像Object/Array这样的对象，对于基本类型而言，可以理解为是没有深浅的区别的。浅拷贝复制的是引用，修改对象的属性，会彼此影响。 ju...

zhunjiee 2019-08-22 15:55 评论0 收藏0
JavaScript专题之深浅拷贝

摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐！数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 评论0 收藏0
深浅拷贝

摘要：深复制实现代码如下第一种方法通过递归解析解决第二种方法通过解析解决作者六师兄链接原生深拷贝的实现处理未输入新对象的情况通过方法构造新的对象深浅拷贝针对的是对象类型，如果是字符串的数组用[...arr]，还是不会影响要区分针对数组的深浅拷贝(默认情况为里面没有对象的数组)，与针对对象的深浅拷贝 JavaScript数组深拷贝和浅拷贝的两种方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 评论0 收藏0
javascript之深浅拷贝

摘要：为何写最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。深拷贝如果给放到新的内存中，将的各个属性都复制到新内存里，就是深拷贝。安全的值是指能够呈现为有效格式的值。参考文档冴羽的专题之深浅拷贝深拷贝与浅拷贝的实现为何写：最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。废话不多说，我们来一起复习一下吧，也希望留下您宝贵意见。何为深浅拷贝？...

LMou 2019-08-26 11:34 评论0 收藏0
JavaScript 中的深浅拷贝

摘要：基本类型指的是简单的数据段，而引用类型指的是一个对象保存在堆内存中的地址，不允许我们直接操作内存中的地址，也就是说不能操作对象的内存空间，所以，我们对对象的操作都只是在操作它的引用而已。工作中经常会遇到需要复制 JavaScript 数据的时候，遇到 bug 时实在令人头疼；面试中也经常会被问到如何实现一个数据的深浅拷贝，但是你对其中的原理清晰吗？一起来看一下吧！一、为什么会有深浅...

Tonny 2019-08-23 14:13 评论0 收藏0