JS中浅拷贝和深拷贝的区别以及几种实现方式

你的名字 2023-01-13 09:47 194阅读 0赞

### 文章目录 ###

*  深拷贝和浅拷贝
 *   *  浅拷贝和赋值
     *  深拷贝
     *   *  1. 递归实现
         *  2. 通过JSON对象实现深拷贝
         *  3. 通过jQuery的extend方法实现深拷贝
         *  4. Object.assign()拷贝
         *  5. lodash函数库实现深拷贝

# 深拷贝和浅拷贝 #

## 浅拷贝和赋值 ##

对于对象，赋值是直接复制的指针，浅拷贝则是不能拷贝他下一层的对象（属性中的对象）

赋值得到的对象 obj2 只是将指针改变，其引用的仍然是同一个对象，而浅拷贝得到的的 obj3 则是重新创建了新对象。

## 深拷贝 ##

### 1. 递归实现 ###

//使用递归的方式实现数组、对象的深拷贝
    function deepClone1(obj) {
      //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
      var objClone = Array.isArray(obj) ? [] : {};
      //进行深拷贝的不能为空，并且是对象或者是
      if (obj && typeof obj === "object") {
        for (key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
              objClone[key] = deepClone1(obj[key]);
            } else {
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    }

### 2. 通过JSON对象实现深拷贝 ###

//通过js的内置对象JSON来进行数组对象的深拷贝
    function deepClone2(obj) {
      var _obj = JSON.stringify(obj),//将JavaScript值转换为JSON字符串
      var objClone = JSON.parse(_obj);//将JSON字符串转为一个对象。
      return objClone;
    }

JSON对象实现深拷贝的一些问题  
无法实现对对象中方法的深拷贝

### 3. 通过jQuery的extend方法实现深拷贝 ###

var array = [1,2,3,4];
    var newArray = $.extend(true,[],array);

jQuery.extend源码

// extend方法为jQuery对象和init对象的prototype扩展方法
            // 同时具有独立的扩展普通对象的功能
            jQuery.extend = jQuery.fn.extend = function() {
            　　/*
            　　*target被扩展的对象
            　　*length参数的数量
            　　*deep是否深度操作
            　　*/
            　　var options, name, src, copy, copyIsArray, clone,
            　　　　target = arguments[0] || {},
            　　　　i = 1,
            　　　　length = arguments.length,
            　　　　deep = false;
    
            　　// target为第一个参数，如果第一个参数是Boolean类型的值，则把target赋值给deep
            　　// deep表示是否进行深层面的复制，当为true时，进行深度复制，否则只进行第一层扩展
            　　// 然后把第二个参数赋值给target
            　　if ( typeof target === "boolean" ) {
            　　　　deep = target;
            　　　　target = arguments[1] || {};
    
            　　　　// 将i赋值为2，跳过前两个参数
            　　　　i = 2;
            　　}
    
            　　// target既不是对象也不是函数则把target设置为空对象。
            　　if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
            　　　　target = {};
            　　}
    
            　　// 如果只有一个参数，则把jQuery对象赋值给target，即扩展到jQuery对象上
            　　if ( length === i ) {
            　　　　target = this;
    
            　　　　// i减1，指向被扩展对象
            　　　　--i;
            　　}
    
            　　// 开始遍历需要被扩展到target上的参数
    
            　　for ( ; i < length; i++ ) {
            　　　　// 处理第i个被扩展的对象，即除去deep和target之外的对象
                     //options  是来接收除了第一个参数外的所有参数。中间桥梁的作用吧
            　　　　if ( (options = arguments[ i ]) != null ) {
            　　　　　　// 遍历第i个对象的所有可遍历的属性
            　　　　　　for ( name in options ) {
            　　　　　　　　// 根据被扩展对象的键获得目标对象相应值，并赋值给src
            　　　　　　　　src = target[ name ];
            　　　　　　　　// 得到被扩展对象的值
            　　　　　　　　copy = options[ name ];
                                // Prevent never-ending loop
                                // 若参数中字段的值就是目标参数，停止赋值，进行下一个字段的赋值
                                // 这是为了防止无限的循环嵌套
                                //var _default = {name : 'wenzi'};
                                //var obj = {name : _default}
                                //$.extend(_default, obj);
                                //如果没有这个判断，则结果是：_default = {name : _default};
                                //如果有这个判断，则结果是：_default = {name : wenzi};
                               // _default是object类型，里面有个字段name，值是_default，而_default是object类型，里面有个字段name，值是_default......，无限的循环下去。于是jQuery中直接不进行操作，跳过这个字段，进行下一个字段的操作。
    
            　　　　　　　　if ( target === copy ) {
            　　　　　　　　　　continue;
            　　　　　　　　}
    
            　　　　　　　　// 当用户想要深度操作时，递归合并
            　　　　　　　　// copy是纯对象或者是数组
            　　　　　　　　if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
            　　　　　　　　　　// 如果是数组
            　　　　　　　　　　if ( copyIsArray ) {
            　　　　　　　　　　　　// 将copyIsArray重新设置为false，为下次遍历做准备。
            　　　　　　　　　　　　copyIsArray = false;
            　　　　　　　　　　　　// 判断被扩展的对象中src是不是数组
            　　　　　　　　　　　　clone = src && jQuery.isArray(src) ? src : [];
            　　　　　　　　　　} else { 
            　　　　　　　　　　　　// 判断被扩展的对象中src是不是纯对象
            　　　　　　　　　　　　clone = src && jQuery.isPlainObject(src) ? src : {};
            　　　　　　　　　　}
    
            　　　　　　　　　　// 递归调用extend方法，继续进行深度遍历
            　　　　　　　　　　target[ name ] = jQuery.extend( deep, clone, copy );
    
            　　　　　　　　// 如果不需要深度复制，则直接把copy（第i个被扩展对象中被遍历的那个键的值）
            　　　　　　　　} else if ( copy !== undefined ) {
            　　　　　　　　　　target[ name ] = copy;
            　　　　　　　　}
            　　　　　　}
            　　　　}
            　　}
    
            　　// 原对象被改变，因此如果不想改变原对象，target可传入{}
            　　return target;
            };

### 4. Object.assign()拷贝 ###

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

### 5. lodash函数库实现深拷贝 ###

lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝

参考：  
[https://juejin.im/post/59ac1c4ef265da248e75892b ][https_juejin.im_post_59ac1c4ef265da248e75892b]  
[https://blog.csdn.net/chentony123/article/details/81428803][https_blog.csdn.net_chentony123_article_details_81428803]

[本文链接https://blog.csdn.net/qq\_39903567/article/details/115796735][https_blog.csdn.net_qq_39903567_article_details_115796735]

[https_juejin.im_post_59ac1c4ef265da248e75892b]: https://juejin.im/post/59ac1c4ef265da248e75892b
[https_blog.csdn.net_chentony123_article_details_81428803]: https://blog.csdn.net/chentony123/article/details/81428803
[https_blog.csdn.net_qq_39903567_article_details_115796735]: https://blog.csdn.net/qq_39903567/article/details/115796735