拷贝还分深浅？探究JS中的深浅拷贝

开发中遇到的问题

需要对一个数组对象进行部分节点移除，但是该数组对象同时又是另一个表格的数据源，因此，会同时影响到表格数据。
原先采用，新建一个数组,遍历源数据一个个push进被Object.assign()复制过的对象，但是发现，修改复制过的数组，仍会改动源数组。因此用下列方法解决：

XX.getBlockTree(parms).then(x => {
    this.tableData = x.data;
    let copyArray = JSON.parse(JSON.stringify(x.data));
    this.filterActive(copyArray);
    this.blockSelData = copyArray;
});
filterActive(totalData){
    for(let i=totalData.length-1; i>=0; i--){
        if(totalData[i].type == 'sp'){
            totalData.splice(i, 1);
        }else{
            if(totalData[i].children.length>0){
                this.filterActive(totalData[i].children);
            }
        }
    }
}

拷贝归纳

对象的浅拷贝

1、对象的直接遍历赋值。

2、ES6中的 var copyObj = Object.assign({}, obj);

3、ES7扩展运算符 var copyObj = { …obj }

4、Jquery浅拷贝 var copiedObject = jQuery.extend({}, originalObject) 如果改变了originalObject，copiedObject 也会变。

数组的浅拷贝

（两者指向不同的对象，但是只能拷贝一层）

array.concat();
array.slice(0);
如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变，所以是浅拷贝。

对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

也就是说，如果原数组改变的是基本数据类型，比如String，Boolean，Number的数据，不会影响到新数组；
但是如果改变的是对象或者数组中的数据，是会影响到新数组的，也也就是对于对象或者数组，新旧数组指向的是一个对象。

深拷贝

（下面说的深拷贝是基本对象的深拷贝，不考虑对象的复杂属性，比如set，get，Function等）

1、最简单的方式 JSON.parse(JSON.stringify(Obj)) 这种方法使用较为简单，可以满足基本的深拷贝需求，而且能够处理JSON格式能表示的所有数据类型，但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。

2、jQuery深拷贝 var copiedObject = $.extend(true, {}, originalObject)