/* ===================== 直接看代码 ===================== */
<!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. C# 获取程序运行目录
			
    string a = "BaseDirectory:" + AppDomain.CurrentDomain.BaseDirectory + "\r\n" + & ...
    
			
    2. 
						
  2. BioConda--转载
			
    1. Conda安装 如BioConda官网[1]所说,BioConda需要Conda安装环境,如果你使用过Anaconda python安装环境,那么你已经有了Conda安装环境,否则,最好的办法是 ...
    
			
    3. 
						
  3. JS快速构建数组方法
			
    一.常用(普通)数组的构建 1.1 直接构建 let arr = ['mock1', 'mock2', 'mock3'] 1.2 通过new Array let arr = newArray('moc ...
    
			
    4. 
						
  4. 【BZOJ】4011: [HNOI2015]落忆枫音
			
    题目链接:http://blog.csdn.net/popoqqq/article/details/45194103 写代码的时候也没有很清晰....具体看这里吧 #include<iostre ...
    
			
    5. 
						
  5. openModelica调试
			
    1打印信息 Modelica.Utilities.Streams.print(“messge”);
    
			
    6. 
						
  6. Java中的单实例
			
    前几天刚学完单实例设计模式,今天看代码时发现一行代码很奇怪,getRuntime()函数的返回类型怎么是它本身,忽然想起前几天学的单实例模式,于是找到方法的定义,果然是静态私有变量,获取实例的公有方法 ...
    
			
    7. 
						
  7. Transactional cannot be resolved to a type
			
    SpringBoot整合Mybatis时遇到“ Transactional cannot be resolved to a type ” ,以为是没有导入相应的包 “ import org.sprin ...
    
			
    8. 
						
  8. 利用vue-cli3快速搭建vue项目详细过程
			
    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
    
			
    9. 
						
  9. const修饰函数
			
    #include <iostream> using namespace std; class A { public: A(int age); void printAge() const;  ...
    
			
    10. 
						
  10. lua --- 局部变量
			
    1.block(代码块) --- 一个控制结构.一个函数体.一个chunk   chunck --- 变量被声明的那个文件或者文本串 2.局部变量只在声明的那个block中有效 3.可以使用 do . ...
    
			
    11.