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;
      }
      
      

      2ES6 的 Object.assign()

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

      3ES6 的对象扩展

      let newObj = {...obj};
      
      

      深拷贝的实现方式

      1JSON.stringify 和 JSON.parse

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

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

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

      2jquery 和 zepto

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

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

      3lodash

      用 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程序设计有所帮助

      相关文章

      最新评论

      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>