1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      JS浅拷贝和深拷贝原理与实现方法分析

       更新时间£º2019年02月28日 09:26:04   作者£ºhuangpb0624   我要评论

      这篇文章主要介绍了JS浅拷贝和深拷贝原理与实现方法,结合实例形式分析了javascript浅拷贝及深拷贝相关概念¡¢原理¡¢实现方法与操作注意事项,需要的朋友可以参考下

      本文实例讲述了JS浅拷贝和深拷贝原理与实现方法¡£分享给大家供大家参考£¬具体如下£º

      浅拷贝只会拷贝一层£¬深层的引用类型改变还是会受到影响¡£

      深拷贝是所?#24515;?#37096;的属性还有值都被拷贝了一份£¬?#36824;?#28145;层的引用类型怎么改都不会受到影响¡£

      浅拷贝的实现方式

      1¡¢自定义函数

      function shallowClone (initalObj) {
         var obj = {};
         for ( var i in initalObj) {
          obj[i] = initalObj[i];
         }
         return obj;
      }
      
      

      2¡¢ES6 的 Object.assign()

      let newObj = Object.assign({}, obj);
      
      

      3¡¢ES6 的对象扩展

      let newObj = {...obj};
      
      

      深拷贝的实现方式

      1¡¢JSON.stringify 和 JSON.parse

      JSON.stringify 把对象转换成字符串£¬再用 JSON.parse 把字符串转换成新的对象¡£

      可以转成 JSON 格式的对象才能使用这种方法£¬如果对象中包含 function 或 RegExp 这些就不能用这种方法了¡£

      let newObj = JSON.parse(JSON.stringify(obj));
      
      

      2¡¢jquery 和 zepto

      jquery 和 zepto 里的 $.extend 方法可以用作深拷贝¡£

      var $ = require('jquery');
      var newObj = $.extend(true, {}, obj);
      
      

      3¡¢lodash

      用 lodash 函数库提供的 _.cloneDeep 方法实现深拷贝¡£

      var _ = require('lodash');
      var newObj = _.cloneDeep(obj);
      
      

      4. 自己封装

      deepClone = (obj) => {
          let objClone = Array.isArray(obj)?[]:{};
          if(obj && typeof obj==="object"){
            // for...in 会把继承的属性一起遍历
            for(let key in obj){
              // 判断是不是自有属性£¬而不是继承属性
              if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象或数组£¬如果是£¬递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                  objClone[key] = this.deepClone(obj[key]);
                }else{
                  //如果不是£¬简单复制
                  objClone[key] = obj[key];
                }
              }
            }
          }
          return objClone;
      }
      
      

      参考£ºhttp://www.4101676.com/article/99013.htm

      更多关于JavaScript相关内容感兴趣的读者可查看本站专题£º¡¶javascript面向对象入门教程¡·¡¢¡¶JavaScript错误与调试技巧总结¡·¡¢¡¶JavaScript数据结构与算法技巧总结¡·¡¢¡¶JavaScript遍历算法与技巧总结¡·及¡¶JavaScript数学运算用法总结¡·

      希望本文所述?#28304;?#23478;JavaScript程序设计有所帮助¡£

      相关文章

      • javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

        javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

        javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版£¬这里提供了两个版本£¬第二个在firefox下运行有些问题大家可以修改下£¬第一个的高度问题£¬已经修正£¬其实就是简单的加了css样式¡£
        2009-12-12
      • JSON传递bool类型数据的处理方式介绍

        JSON传递bool类型数据的处理方式介绍

        如果服务器端生成的JSON中有bool类型的数据时£¬到客户端解析时出现了小小的问题£¬下面简单为大家介绍下正确的处理方式
        2013-09-09
      • 详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

        详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

        最近项目需求要生成一个倒数7天的数组£¬下面小编把我的实现思路和代码整理分享给大家£¬供大家参考£¬需要的朋友可以参考下
        2015-10-10
      • 浅谈javascript中for in 和 for each in的区别

        浅谈javascript中for in 和 for each in的区别

        两个的作用都用来遍历对象£¬但为什么有了for in语句了还要for each in语句呢£¬后来看了下for each in开发的文档£¬for each in是作为E4X标准的一部分在javascript 1.6中发布的£¬而且它不是ECMAScript标准的一部分
        2015-04-04
      • JS实现漂亮的窗口拖拽效果(可改变大小¡¢最大化¡¢最小化¡¢关闭)

        JS实现漂亮的窗口拖拽效果(可改变大小¡¢最大化¡¢最小化¡¢关闭)

        这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小¡¢最大化¡¢最小化¡¢关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变¡¢还原及关闭等功能的相关实现技巧,需要的朋友可以参考下
        2015-10-10
      • Ajax和Comet技术总结

        Ajax和Comet技术总结

        Ajax是一种技术£¬一种能够向服务器请求额外的数据而无需卸载页面的技术£¬能够使网页具备更优的用户体验¡£Ajax技术的核心是XMLHttpRequest对象£¨XHR£©¡£本文从XHR开始谈起£¬理解Ajax技术的特点£¬再对跨域以及Comet等技术进行简要理解和总结¡£下面跟?#21028;?#32534;一起来看下吧
        2017-02-02
      • js获取上传文件的绝?#26376;?#24452;实现方法

        js获取上传文件的绝?#26376;?#24452;实现方法

        下面小编就为大家带来一篇js获取上传文件的绝?#26376;?#24452;实现方法¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2016-08-08
      • IE6 fixed的完美解决方案

        IE6 fixed的完美解决方案

        IE7已经支持position:fixed了£¬而我们的IE6呢£¿还继续使用js事件£¿消耗资源£¬破坏结构£¬画面闪耀¡£
        2011-03-03
      • react中fetch之cors跨域请求的实现方法

        react中fetch之cors跨域请求的实现方法

        本篇文章主要介绍了react中fetch之cors跨域请求的实现方法£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2018-03-03
      • JavaScript获取网页支持表单字符集的方法

        JavaScript获取网页支持表单字符集的方法

        这篇文章主要介绍了JavaScript获取网页支持表单字符集的方法,涉及javascript中acceptCharset方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
        2015-04-04

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>