javascript对象的深拷贝与浅拷贝

快来打我* 2023-02-20 02:45 17阅读 0赞

## 一、浅拷贝 ##

> 创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以**如果其中一个对象改变了这个地址，就会影响到另一个对象**。

### 1、直接赋值 ###

var a={ };
    var b={ c:1,d:2};
    a = b;
    b.c=5;
    console.log(a);//{c: 5, d: 2}
    console.log(b)//{c: 5, d: 2}

### 2、对象浅拷贝 ###

#### 1、Object.assign()： ####

var target={ };
    var source = { a:1,b:2,c:{ d:3},e:4};
    target = Object.assign(source);
    source.c.d='abcd';
    console.log(target);
    console.log(source);

### 3、数组浅拷贝 ###

--------------------

## 二、深拷贝 ##

#### 1、JSON.stringify 和JSON.parse ####

> JSON.stringify 转为字符串  
> JSON.parse 转为对象

//通过js的内置对象JSON来进行数组对象的深拷贝
    function deepClone(obj) { 
      let _obj = JSON.stringify(obj);
      let objClone = JSON.parse(_obj);
      return objClone;
    }

### 2、对象的深拷贝 ###

##### 2.1、递归的方式 #####

> Array.isArray() 用于确定传递的值是否是一个 Array。  
> hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

function _deepClone(source) { 
      let target;
      if (typeof source === 'object') { 
        target = Array.isArray(source) ? [] : { }
        for (let key in source) { 
          if (source.hasOwnProperty(key)) { 
            if (typeof source[key] !== 'object') { 
              target[key] = source[key]
            } else { 
              target[key] = _deepClone(source[key])
            }
          }
        }
      } else { 
        target = source
      }
      return target
    }

#### 2.2 、Object.assign()：可以是深拷贝，也可以是浅拷贝 ####

Object.assign(target，source)：ES6

var target = { };
    var source = { a:1};
    Object.assign(target ,source);
    source.a = 2;
    console.log(source); //{a:2}
    console.log(target); //{a:1}

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

为了兼容ie,重写Object.assign()

if (typeof Object.assign != 'function') { 
        Object.assign = function(target) { 
            'use strict';
            if (target == null) { 
                throw new TypeError('Cannot convert undefined or null to object');
            }
     
            target = Object(target);
            for (var index = 1; index < arguments.length; index++) { 
                var source = arguments[index];
                if (source != null) { 
                    for (var key in source) { 
                        if (Object.prototype.hasOwnProperty.call(source, key)) { 
                            target[key] = source[key];
                        }
                    }
                }
            }
            return target;
        };
    }

### 3、数组的深拷贝 ###

[对象的深拷贝与浅拷贝][Link 1]  
[对象的深拷贝和浅拷贝][Link 2]  
[Object.assign()深拷贝的用法、以及在IE浏览器不兼容的解决方案][Object.assign_IE]  
[如何实现数组的浅拷贝和深拷贝][Link 3]

[Link 1]: https://www.jianshu.com/p/c651aeabf582
[Link 2]: https://www.cnblogs.com/LVBingo/p/11290637.html
[Object.assign_IE]: https://blog.csdn.net/lgysjfs/article/details/91429600
[Link 3]: https://blog.csdn.net/cjwjyooo/article/details/80341734