1. /* ===================== 直接看代码 ===================== */
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 　　<meta charset="UTF-8">
  5. 　　<title></title>
  6. </head>
  7. <body>
  8. 　　<h1>http://www.codeceo.com/article/javascript-object-deep-copy.html</h1>
  9. 　　<p>
  10. 　　　　对象的深拷贝与浅拷贝的区别如下：
  11. 　　　　浅拷贝：仅仅复制对象的引用，而不是对象本身；
  12. 　　　　深拷贝：把复制的对象所引用的全部对象都复制一遍。
  13. 　　</p>
  1. 　　一. 浅拷贝的实现
  1. <script type="text/javascript">
    　　Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 （简单粗暴明了 推荐首选） 
    　　详情直戳  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign。
  1. 　　function test() {
  2.   　　'use strict';
  3.  
  4.   　　let obj1 = { a: 0 , b: { c: 0}};
  5.   　　let obj2 = Object.assign({}, obj1);
  6.   　　console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  7.  
  8.   　　obj1.a = 1;
  9.   　　console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  10.   　　console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  11.  
  12.  　　 obj2.a = 2;
  13.  　　 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  14.   　　console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  15.  
  16.   　　obj2.b.c = 3;
  17.   　　console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  18.   　　console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  19.  
  20.   　　// Deep Clone
  21.   　　obj1 = { a: 0 , b: { c: 0}};
  22.   　　let obj3 = JSON.parse(JSON.stringify(obj1));
  23.  　　 obj1.a = 4;
  24.   　　obj1.b.c = 4;
  25.   　　console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
  26.  
  27.   　　// 拷贝单个对象
  28.   　　var obj = { a: 1 };
  29.  　　 var copy = Object.assign({}, obj);
  30.   　　console.log(copy); // { a: 1 }  
  31.  
  32.   　　// 合并多个对象
  33.   　　let o1 = { a: 1 };
  34.   　　let o2 = { b: 2 };
  35.   　　let o3 = { c: 3 };
  36.  
  37.   　　let obj = Object.assign(o1, o2, o3);
  38.   　　console.log(obj); // { a: 1, b: 2, c: 3 }
  39.   　　console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变
  40. 　　}
  41.  
  42. 　　// 需要注意的是浅拷贝的话当自身或者目标对象改变两者皆会改变  （希望不改变则需要深拷贝）
  43. 　　test();
  1.  
  1. </script>
  2. <script type="text/javascript">
  3. 　　二. 深拷贝的实现

  4. 　　要实现深拷贝有很多办法，有最简单的 JSON.parse() 方法，也有常用的递归拷贝方法，和ES5中的 Object.create() 方法。
  5. 　　2.1 方法一：使用 JSON.parse() 方法
  6. 　　要实现深拷贝有很多办法，比如最简单的办法是使用 JSON.parse()：
  7. 　　function deepClone(initalObj) {
  8.     　　var obj = {};
  9.     　　try {
  10.        　　 obj = JSON.parse(JSON.stringify(initalObj));
  11.     　　}
  12.    　　 return obj;
  13. 　　}
  14. 　　var obj = {
  15.     　　a: {
  16.         　　a: "world",
  17.         　　b: 21
  18.     　　}
  19. 　　}
  20. 　　var cloneObj = deepClone(obj);
  21. 　　cloneObj.a.a = "changed";
  22. 　　console.log(obj.a.a); // "world"
  23. 　　这种方法简单易用。
  24. 　　但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。
  25. 　　这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。
  26. 　　2.2 方法二：递归拷贝
  27. 　　为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。
  28. 　　版代码如下：
  1. 　// 深拷贝 递归1.1 写法一
  2. 　　function deepClone(obj) {
  3.     　　var obj = {};
  4.     　　for (var i in initalObj) {
  5.         　　var prop = initalObj[i];
  6.         　　// 避免相互引用对象导致死循环，
  7.         　　if(prop === obj) {
  8.             　　continue;
  9.        　　 }
  10.         　　if (typeof prop === 'object') {
  11.            　　 obj[i] = (prop.constructor === Array) ? [] : {};
  12.            　　 arguments.callee(prop, obj[i]);
  13.         　　} else {
  14.             　　obj[i] = prop;
  15.         　　}
  16.    　　 }
  17.     　　return obj;
  18. 　　}
  1. 　
  1. // 深拷贝 递归1.2 写法二
  2. function deepCopy(p, c) {
  3. 　　var c = c || {};
  4. 　　for (var i in p) {
  5. 　　　　if (typeof p[i] === 'object') {
  6. 　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
  7. 　　　　　　deepCopy(p[i], c[i]);
  8. 　　　　} else {
  9. 　　　　　　　c[i] = p[i];
  10. 　　　　}
  11. 　　}
  12. 　　return c;
  13. }
  1.  
  1. 　　
  1.  // 深拷贝 递归1.3 写法二  比较全面的写法 参考至 （https://mp.weixin.qq.com/s/vXbFsG59L1Ba0DMcZeU2Bg）
  1.   function forEach(array, cloneTarget) {
  2.     let index = -;
  3.     const length = array.length;
  4.     while (++index < length) {
  5.       cloneTarget(array[index], index);
  6.     }
  7.     return array;
  8.   }
  9.  
  10.   function clone(target, map = new WeakMap()) {
  11.     if (typeof target === 'object') {
  12.       const isArray = Array.isArray(target);
  13.       let cloneTarget = isArray ? [] : {};
  14.       if (map.get(target)) {
  15.         return target;
  16.       }
  17.       map.set(target, cloneTarget);
  18.       const keys = isArray ? undefined : Object.keys(target);
  19.       forEach(keys || target, (value, key) => {
  20.         if (keys) key = value
  21.         cloneTarget[key] = clone(target[key], map);
  22.       });
  23.       return cloneTarget;
  24.     } else {
  25.       return target;
  26.     }
  27.   }
  1. 　　2.3 方法三：集合Object.assign()方法
  2. 　　// 深拷贝
  3. 　　function deepClone(initalObj) {
  4.     　　var obj = {};
  5.     　　for (var i in initalObj) {
  6.         　　var prop = initalObj[i];
  7.         　　// 避免相互引用对象导致死循环
  8.         　　if(prop === obj) {
  9.            　　 continue;
  10.         　　}
  11.         　　if (typeof prop === 'object') {
  12.             　　obj[i] = Object.assign(prop);
  13.        　　 } else {
  14.             　　obj[i] = prop;
  15.         　　}
  16.     　　}
  17.     　　return obj;
  18. 　　}
  19. </script>
  20. </body>
  21. </html>

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

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

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

  1. 并发编程（六）Object类中线程相关的方法详解

    一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详 ...

  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. 深拷贝与浅拷贝(mutableCopy与Copy)详解 iOS

    深拷贝与浅拷贝(mutableCopy与Copy)详解 iOS ios中并不是所有的对象都支持copy,mutableCopy,遵守NSCopying 协议的类可以发送copy消息,遵守NSMutab ...

  4. 用Newtonsoft将json串转为对象的方法(详解)

    首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq) ...

  5. Python学习之旅—生成器对象的send方法详解

    前言 在上一篇博客中,笔者带大家一起探讨了生成器与迭代器的本质原理和使用,本次博客将重点聚焦于生成器对象的send方法. 一.send方法详解  我们知道生成器对象本质上是一个迭代器.但是它比迭代器对 ...

  6. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  7. session的使用方法详解

    session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...

  8. (转)Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

  9. Java提高篇——equals()与hashCode()方法详解

    java.lang.Object类中有两个非常重要的方法: 1 2 public boolean equals(Object obj) public int hashCode() Object类是类继 ...

随机推荐

  1. 2、Python程序控制结构(0530)

    条件测试: 1.if 条件测试表达式 python的比较操作 1.所有的python对象都支持比较操作 可用于测试相等性.相对大小等: 如果是符合对象,python会检查其所有部分,包括自动遍历各级嵌 ...

  2. Java单例设计模式（实现Java的一个类只有一个对象）

    单例设计模式的定义:单例设计模式是一种软件设计模式,在它的核心包含一个称为单例类的核心类. 核心便是希望一个类只有一个对象.  如何实现类在内存中只有一个对象呢? 第一步:构造私有:第二步:本身提供一 ...

  3. Ubuntu18.04下安装MySQL

    Ubuntu上安装MySQL非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server 2. apt-get isntall mysql-client ...

  4. config配置

    <?php /** * User: Eden * Date: 2019/3/30 * 共有内容 */ /** CREATE TABLE `tf_configs` ( `id` int(11) N ...

  5. 总要先爬出坑的JEE架构

    先来看看官网对它的定义. Java平台企业版(Java EE)是社区驱动的企业软件的标准.Java EE是使用Java Community Process开发的,其中包括来自行业专家,商业和开源组织, ...

  6. 从classloader的变更说起

    classloader从1.6到1.7整体分成了两个版本.重点区别就是并行类加载. 1.6版本 protected synchronized Class loadClass(String name, ...

  7. wow 滚动动画

    1.demo <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  8. Android application backup

    警告 AndroidMenifest中application标签下android:allowBackup="true"时,会警告: Warning:On SDK version 2 ...

  9. MySQL学习(五)

    查询数据的学习与练习 建立一个表 CREATE TABLE goods ( `goos_id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT, `cat_ ...

  10. H5多媒体（用面向对象的方法控制视频、音频播放、暂停、延时暂停）

    视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...