js Object.assign()究竟是深拷贝还是浅拷贝

之前我有对object函数相关的常见方法做过总结，感兴趣的同学可以通过链接查看：

https://www.cnblogs.com/zhilu/p/13842177.html

一、今天对Object.assign()做一个分析总结。

1、定义：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

2、Object.assign()拷贝

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。

 

也就是说，当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝；

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

 

  

3、所以，当对象中有二级属性的时候，使用递归的方式实现深拷贝

二、延伸：怎样实现深拷贝呢

1、对象深拷贝的几种方法

 

1）用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象，但是需要注意的是，可以转成 JSON 格式的对象才能使用这种方法，如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

function deepClone2(obj) {
  let _obj = JSON.stringify(obj),
  return JSON.parse(_obj);
}

缺点：

（1）如果对象里有函数,函数无法被拷贝下来

（2）无法拷贝copyObj对象原型链上的属性和方法

（3）当数据的层次很深，会栈溢出

2）使用普通递归的方式实现深拷贝

function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}

缺点：

（1）无法保持引用

（2）当数据的层次很深，会栈溢出

3）防栈溢出函数

function cloneLoop(x) {
    const root = {};

    // 栈
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

优点：

（1）不会栈溢出

（2）支持很多层级的数据

 function copyObject(orig) {
    var copy = Object.create(Object.getPrototypeOf(orig));
    copyOwnPropertiesFrom(copy, orig);
    return copy;
  }


  function copyOwnPropertiesFrom(target, source) {
    Object
    .getOwnPropertyNames(source)
    .forEach(function (propKey) {
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
    return target;
  }

  var obj = {
    name: 'Jack',
    age: '32',
    job: 'developer'
  };

  var obj2 = copyObject(obj);
  console.log(obj2);
  obj.age = 39;
  obj.name = 'Tom';
  console.log(obj);
  console.log(obj2);

4）通过jQuery的extend方法实现深拷贝

var obj = {
    a: '123',
    b: 234,
    c: true,
    d: null,
    e: function() {console.log('test')},
    h: new Set([4,3,null]),
    i:Symbol('fsd'),
    k: new Map([ ["name", "test"],  ["title", "Author"]  ])
}
console.log($.extend(true, {}, obj))

5）lodash函数库实现深拷贝

let clone = cloneDeep(obj)

2、数组深拷贝的几种方法

1）concat(arr1, arr2,....)

2）slice(idx1, idx2)

1）没有参数是拷贝数组

2）只有一个参数是从该位置起到结束拷贝数组元素

3）两个参数，拷贝从起始位置到结束位置的元素（不包含结束位置的元素：含头不含尾）

需要注意的是，slice()和concat()这两个方法，仅适用于对不包含引用对象的一维数组的深拷贝

 

三、赋值、浅拷贝与深拷贝的区别