/* ===================== 直接看代码 ===================== */
<!DOCTYPE html>

<html>

<head>

　　<meta charset="UTF-8">

　　<title></title>

</head>

<body>

　　<h1>http://www.codeceo.com/article/javascript-object-deep-copy.html</h1>

　　<p>

　　　　对象的深拷贝与浅拷贝的区别如下：

　　　　浅拷贝：仅仅复制对象的引用，而不是对象本身；

　　　　深拷贝：把复制的对象所引用的全部对象都复制一遍。

　　</p>
　　一. 浅拷贝的实现
<script type="text/javascript">
　　Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 （简单粗暴明了 推荐首选） 
　　详情直戳  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign。
　　function test() {

  　　'use strict';

  　　let obj1 = { a: 0 , b: { c: 0}};

  　　let obj2 = Object.assign({}, obj1);

  　　console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  　　obj1.a = 1;

  　　console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}

  　　console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

 　　 obj2.a = 2;

 　　 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}

  　　console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

  　　obj2.b.c = 3;

  　　console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}

  　　console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

  　　// Deep Clone

  　　obj1 = { a: 0 , b: { c: 0}};

  　　let obj3 = JSON.parse(JSON.stringify(obj1));

 　　 obj1.a = 4;

  　　obj1.b.c = 4;

  　　console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

  　　// 拷贝单个对象

  　　var obj = { a: 1 };

 　　 var copy = Object.assign({}, obj);

  　　console.log(copy); // { a: 1 }  

  　　// 合并多个对象

  　　let o1 = { a: 1 };

  　　let o2 = { b: 2 };

  　　let o3 = { c: 3 };

  　　let obj = Object.assign(o1, o2, o3);

  　　console.log(obj); // { a: 1, b: 2, c: 3 }

  　　console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变

　　}

　　// 需要注意的是浅拷贝的话当自身或者目标对象改变两者皆会改变  （希望不改变则需要深拷贝）

　　test();


</script>

<script type="text/javascript">

　　二. 深拷贝的实现


　　要实现深拷贝有很多办法，有最简单的 JSON.parse() 方法，也有常用的递归拷贝方法，和ES5中的 Object.create() 方法。

　　2.1 方法一：使用 JSON.parse() 方法

　　要实现深拷贝有很多办法，比如最简单的办法是使用 JSON.parse()：

　　function deepClone(initalObj) {

    　　var obj = {};

    　　try {

       　　 obj = JSON.parse(JSON.stringify(initalObj));

    　　}

   　　 return obj;

　　}

　　var obj = {

    　　a: {

        　　a: "world",

        　　b: 21

    　　}

　　}

　　var cloneObj = deepClone(obj);

　　cloneObj.a.a = "changed";

　　console.log(obj.a.a); // "world"

　　这种方法简单易用。

　　但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

　　这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

　　2.2 方法二：递归拷贝

　　为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。

　　版代码如下：




　// 深拷贝 递归1.1 写法一

　　function deepClone(obj) {

    　　var obj = {};

    　　for (var i in initalObj) {

        　　var prop = initalObj[i];

        　　// 避免相互引用对象导致死循环，

        　　if(prop === obj) {

            　　continue;

       　　 }

        　　if (typeof prop === 'object') {

           　　 obj[i] = (prop.constructor === Array) ? [] : {};

           　　 arguments.callee(prop, obj[i]);

        　　} else {

            　　obj[i] = prop;

        　　}

   　　 }

    　　return obj;

　　}




　




// 深拷贝 递归1.2 写法二

function deepCopy(p, c) {

　　var c = c || {};

　　for (var i in p) {

　　　　if (typeof p[i] === 'object') {

　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　deepCopy(p[i], c[i]);

　　　　} else {

　　　　　　　c[i] = p[i];

　　　　}

　　}

　　return c;

}








　　


 // 深拷贝 递归1.3 写法二  比较全面的写法 参考至 （https://mp.weixin.qq.com/s/vXbFsG59L1Ba0DMcZeU2Bg）


  function forEach(array, cloneTarget) {

    let index = -;

    const length = array.length;

    while (++index < length) {

      cloneTarget(array[index], index);

    }

    return array;

  }

  function clone(target, map = new WeakMap()) {

    if (typeof target === 'object') {

      const isArray = Array.isArray(target);

      let cloneTarget = isArray ? [] : {};

      if (map.get(target)) {

        return target;

      }

      map.set(target, cloneTarget);

      const keys = isArray ? undefined : Object.keys(target);

      forEach(keys || target, (value, key) => {

        if (keys) key = value

        cloneTarget[key] = clone(target[key], map);

      });

      return cloneTarget;

    } else {

      return target;

    }

  }




　　2.3 方法三：集合Object.assign()方法

　　// 深拷贝

　　function deepClone(initalObj) {

    　　var obj = {};

    　　for (var i in initalObj) {

        　　var prop = initalObj[i];

        　　// 避免相互引用对象导致死循环

        　　if(prop === obj) {

           　　 continue;

        　　}

        　　if (typeof prop === 'object') {

            　　obj[i] = Object.assign(prop);

       　　 } else {

            　　obj[i] = prop;

        　　}

    　　}

    　　return obj;

　　}

</script>

</body>

</html>




有问题或者有bug非常欢迎留言指正。


深拷贝1.3版本参考至： https://mp.weixin.qq.com/s/vXbFsG59L1Ba0DMcZeU2Bg  （递归方法总结的很全面推荐）


												


											
Object对象的浅拷贝与深拷贝方法详解的更多相关文章
	

    
								
  1. 并发编程（六）Object类中线程相关的方法详解
		
    一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详 ...
    
		
    2. 
						
  2. java数组、java.lang.String、java.util.Arrays、java.lang.Object的toString()方法和equals()方法详解
		
    public class Test { public static void main(String[] args) { int[] a = {1, 2, 4, 6}; int[] b = a; in ...
    
		
    3. 
						
  3. 深拷贝与浅拷贝(mutableCopy与Copy)详解 iOS
		
    深拷贝与浅拷贝(mutableCopy与Copy)详解 iOS ios中并不是所有的对象都支持copy,mutableCopy,遵守NSCopying 协议的类可以发送copy消息,遵守NSMutab ...
    
		
    4. 
						
  4. 用Newtonsoft将json串转为对象的方法(详解)
		
    首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq)  ...
    
		
    5. 
						
  5. Python学习之旅—生成器对象的send方法详解
		
    前言 在上一篇博客中,笔者带大家一起探讨了生成器与迭代器的本质原理和使用,本次博客将重点聚焦于生成器对象的send方法. 一.send方法详解  我们知道生成器对象本质上是一个迭代器.但是它比迭代器对 ...
    
		
    6. 
						
  6. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
		
    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...
    
		
    7. 
						
  7. session的使用方法详解
		
    session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...
    
		
    8. 
						
  8. (转)Spring JdbcTemplate 方法详解
		
    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...
    
		
    9. 
						
  9. Java提高篇——equals()与hashCode()方法详解
		
    java.lang.Object类中有两个非常重要的方法: 1 2 public boolean equals(Object obj) public int hashCode() Object类是类继 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. try里Response.end()问题
			
    问题 在xxx.aspx.cs中处理异步请求,大致代码如下: 但会发现始终会进catch. 原因 Response.End()会引发ThreadAbortException. 解决方案 使用HttpC ...
    
			
    2. 
						
  2. Linux的vi编辑器笔记
			
    vi编辑器,全称是visual interface,可以执行输出.删除.查找.替换等众多的文本操作. vi并不是一个排版程序,不可以对字体.格式.段落等其他的属性进行编排. vi是全屏文本编辑程序,没 ...
    
			
    3. 
						
  3. jqGrid API （转）
			
    来源:https://www.cnblogs.com/MonaSong/p/5109991.html JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGr ...
    
			
    4. 
						
  4. 【转】Windows下selenium+python自动化测试环境搭建
			
    原文链接:http://www.cnblogs.com/test-of-philosophy/articles/4322918.html 搭建平台:windows 1．安装python,下载地址:ht ...
    
			
    5. 
						
  5. modal结合art-template
			
    内容div <div id="modal-cont"></div> 模板tpl <script id="modal-tpl" ty ...
    
			
    6. 
						
  6. 使用Hexo搭建一个简单的博客（二）
			
    昨天想着用Hexo和github搭一个自己简单的博客,记录一下自己踩过的坑,具体的流程就不重复了,主要参考了一下几篇文章 GitHub+Hexo 搭建个人网站详细教程 使用Hexo+Github一步步 ...
    
			
    7. 
						
  7. Wiener’s attack python
			
    题目如下: 在不分解n的前提下,求d. 给定: e = 140586954170153340715880103465867497905399132874997078029388987191993846 ...
    
			
    8. 
						
  8. Discrete Log Algorithms ：Baby-step giant-step
			
    离散对数的求解 1.暴力 2.Baby-step giant-step 3.Pollard’s ρ algorithm …… 下面搬运一下Baby-step giant-step 的做法 这是在 ht ...
    
			
    9. 
						
  9. kbenigne学习3  get-started 2创建实体
			
    https://www.comblockengine.com/docs/1.0/get-started/createentity/ 2 从官网文档复制FirstEntity时,不要把...也给复制了  ...
    
			
    10. 
						
  10. QT json字符串生成和解析
			
    1         QT json字符串生成和解析 1.1  QT Json解析流程 (1)  字符串转化为QJsonDocument QJsonParseError json_error; QJso ...
    
			
    11.