VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型

    JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象。

    基本类型值

    在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种。

    基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值是完全独立的,即使一个变量改变了也不会影响到第二个变量。

    var str1 = '撩课';
    var str2 = str1;
    str2 = 'itlike';
    console.log(str2); //'itlike'
    console.log(str1); //'撩课'

    引用类型值

    引用类型值是引用类型的实例,它是保存在堆内存中的一个对象,引用类型是一种数据结构,最常用的是Object,Array,Function类型,此外还有Date,RegExp,Error等。

    在ES6中提供了Set,Map2种新的数据结构。

    (二)JS中如何复制引用类型的

    基本类型和引用类型赋值的差异化
    举个例子:在下面代码中,只修改了obj1中的name属性,却同时改变了ob1和obj2中的name属性。

    var obj1 = {'name': '撩课'};
    var obj2 = obj1;
    obj2.name = '小撩';
    console.log(obj1); // {'name': '撩课'}
    console.log(obj2); // {'name': '撩课'}

    当变量复制引用类型值的时候,同样和基本类型值一样会将变量的值复制到新变量上,不同的是对于变量的值,它是一个指针,指向存储在堆内存中的对象。

    因为,在JS中,堆内存中的对象无法直接访问,必须要访问这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值。

    (三)浅拷贝

    在JS中,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是引用类型,拷贝的就是内存地址;所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

    下面是JavaScript提供的浅拷贝方法:

    Object.assign

    ES6中拷贝对象的方法,接受的第一个参数是拷贝的目标,剩下的参数是拷贝的源对象;

    语法:Object.assign(target, ...sources)

    var p = {
      'name': '张三',
    };
    var copyP = {};
    Object.assign(copyP, p);
    console.log(copyP);
    console.log(p);

    Object.assign是一个浅拷贝,它只是在根属性(对象的第一层级)创建了一个新的对象,但是如果属性的值是对象的话,只会拷贝一份相同的内存地址。

    扩展运算符

    利用扩展运算符可以在构造字面量对象时,进行克隆或者属性拷贝。语法如下:

    var cloneObj = { ...obj };
    var obj = {'name': '撩课', 'college': ['H5','JAVA','Python']}
    var obj2 = {...obj};
    obj.name='小撩';
    //{'name': '小撩', 'college': ['H5','JAVA','Python']}
    console.log(obj);
    //{'name': '撩课', 'college': ['H5','JAVA','Python']}
    console.log(obj2); 
    obj.college.push('Go');
    //{'name': '小撩', 'college': ['H5','JAVA','Python','Go']}
    console.log(obj); 
    //{'name': '小撩', 'college': ['H5','JAVA','Python','Go']}
    console.log(obj2);

    扩展运算符和Object.assign()存在同样的问题,对于值是对象的属性无法完全拷贝成两个不同对象;

    但是如果属性都是基本类型的值的话,使用扩展运算符更加简洁。

    (四)深拷贝

    浅拷贝只在根属性上在堆内存中创建了一个新的的对象,复制了基本类型的值,但是复杂数据类型也就是对象则是拷贝相同的地址。

    而深拷贝则是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

    JSON.stringify

    JSON.stringify()是目前开发过程中最常用的深拷贝方式,原理是把一个对象序列化成为一个JSON字符串,将对象的内容转换成字符串的形式再保存在内存中,再用JSON.parse()反序列化将JSON字符串变成一个新的对象。

    举个例子:

    var obj = {
      name: '撩课',
      age: 18,
      friends: ['小花', '小黑'],
      goodF: {
        name: '小撩',
        age: 19,
        address: '上海',
        pets: [{name: '土豆'}, {name: '马铃薯'}]},
      bir: new Date()
    };
    
    var newObj = JSON.parse(JSON.stringify(obj));
    obj.goodF.pets[0].name = '旺财';
    console.log(newObj);
    console.log(obj);

    使用JSON.stringify实现深拷贝有几点要注意:

    1)拷贝的对象的值中如果有函数,undefined,symbol,经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失;

    无法拷贝不可枚举的属性,无法拷贝对象的原型链
    3)拷贝Date引用类型会变成字符串

    4)拷贝RegExp引用类型会变成空对象

    对象中含有NaN、Infinity和-Infinity,则序列化的结果会变成null

    递归实现深拷贝

    具体实现如下:

    /**
     * 辅助函数, 判定是否是对象
     * @param obj
     * @returns {boolean}
     */
    function isObj(obj) {
      return obj instanceof Object;
    }
    
    /**
     * 深拷贝fromObj面的所有属性/值, 到toObj对象里面
     * @param fromObj 拷贝对象
     * @param toObj  目标对象
     */
    function deepCopyObj2NewObj(fromObj, toObj) {
      for (var key in fromObj) {
        if(fromObj.hasOwnProperty(key)){
          var fromValue = fromObj[key];
          // 如果是值类型,那么就直接拷贝赋值
          if (!isObj(fromValue)) {
            toObj[key] = fromValue;
          } else {
            // 如果是引用类型,那么就再调用一次这个方法,
            // 去内部拷贝这个对象的所有属性
            // fromValue是什么类型, 创建一个该类型的空对象
            var tmpObj = new fromValue.constructor;
    
            // console.log(tmpObj);
            // debugger;
            deepCopyObj2NewObj(fromValue, tmpObj);
            toObj[key] = tmpObj;
          }
        }
      }
    }

    (五)总结

    1)在日常开发中一般并不需要拷贝很多特殊的引用类型,深拷贝对象使用JSON.stringify是最直接和简单的方法。

    2)实现一个完整的深拷贝是非常复杂的,需要考虑到很多边界情况。对于特殊的引用类型有拷贝需求的话,建议借助第三方完整的库。

    以上所述是小编给大家介绍的JS中实现浅拷贝和深拷贝的代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • JS浅拷贝和深拷贝原理与实现方法分析
    • JavaScript对象的浅拷贝与深拷贝实例分析
    • JavaScript实现浅拷贝与深拷贝的方法分析
    • JavaScript深拷贝和浅拷贝概念与用法实例分析
    • javascript深拷贝、浅拷贝和循环引用深入理解
    • JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
    • 浅析javaScript中的浅拷贝和深拷贝
    • javascript深拷贝和浅拷贝详解
    • javascript对浅拷贝和深拷贝的详解
    • js对象浅拷贝和深拷贝详解
    • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝
    • JavaScript数组深拷贝和浅拷贝的两种方法
    • Javascript 浅拷贝、深拷贝的实现代码
    • javascript二维数组和对象的深拷贝与浅拷贝实例分析
    • javascript 关于赋值、浅拷贝、深拷贝的个人理解

    广而告之:
    热门推荐:
    用Flash图形化数据(二)

    让我们烤点甜饼(做饼图) 成功地安装了PHP地Shockwave Flash支持后,就可以用PHP创建Shockwave文件了。学习的最好方法就是直接跳到程序去,所以下面就让我们看看程序。第一个文件包括怎样使用类的示例代码,同时也显示了如何将一个Flash文件嵌入到HTML文档中。 <?p···

    MySQL InnoDB中的锁机制深入讲解

    写在前面 数据库本质上是一种共享资源,因此在最大程度提供并发访问性能的同时,仍需要确保每个用户能以一致的方式读取和修改数据。锁机制(Locking)就是解决这类问题的最好武器。 首先新建表 test,其中 id 为主键,name 为辅助索引,address 为唯一索引。 CREATE TABLE ···

    discuz在后台找不到用户名前台提示已经注册

    最近有很多用户反应在后台找不到用户名,但前台提示已经注册 我的用户名在这个论坛上居然找不到,而且通过用户搜索也找不到的。 可是到前台如果试图注册却提示已经被注册,如果去找回密码我却忘记了,注册的邮箱。 到后台去找这个用户,也是搜索不到。这倒底是怎么回事呢?···

    Vue单页式应用(Hash模式下)实现微信分享的实例

    本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说,微信开发的都应该清楚。 二.引入js文件: 在需要调用JS接口的···

    JS实现将对象转化为数组的方法分析

    本文实例讲述了JS实现将对象转化为数组的方法。分享给大家供大家参考,具体如下: 前言 其实这本来应该是一个很基础的问题了,但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来,但最近再遇到这个问题时竟然又卡主了,所以,关于这个问题,如何把一个对···

    深入Memcache的Session数据的多服务器共享详解

    一相关介绍1.memcache + memcache的多服务器数据共享的介绍,请参见http://www.guigui8.com/index.php/archives/206.html2.session机制:session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。当程序需要为某个客户端···

    ThinkPHP实例化模型的四种方法概述

    本文讲述了ThinkPHP实例化模型的四种方法,对于ThinkPHP程序设计来说有非常重要的应用。具体如下: 1、创建一个基础模型:实例化一个系统自带的数据库操作类    Test.Model.class.php页面代码如下: class TestModel extends Model{ }    UserA···

    DEDECMS织梦模板之首页调用图集内容/标题/图片的代码

    默认的图片集首页掉不出内容,如何解决这个问题呢? 1、我们需要修改include/extend.func.php文件 增加如下代码:   //获取图集内容 function getbody($id) { global $dsql; $row = $dsql->GetOne("SELECT body FROM addonimages WHERE ···

    JS+canvas画布实现炫酷的旋转星空效果示例

    本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果。分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性。这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这···

    php结合安卓客户端实现查询交互实例

    PHP 服务器端: function getids() { $this->output->set_header('Content-Type: application/json; charset=utf-8'); $jsonstr = ''; $pname = $pcallid = $pworkid = ''; if (isset($_GET['name'])) { $pname = $_GET['name']; } if (isset($_GE···