JavaScript深拷贝&浅拷贝

数据类型

• 基本数据类型可直接拷贝，6大基本数据类型有：String,Number,Symbol,Bool,null,undefined
• Object：因为js存储对象是存储的对象的地址，比如以下代码对象a和b 其实只是指向对象的地址的引用，所以当改动对象b的时候，实际上也改动了对象b

let a = {name:'张三',age:'18'}
let b = a

浅拷贝

• Array.concat和Object.assign也是浅拷贝，因为他们只开拷贝了原对象里面的数据类型为基本数据的属性，而类型为引用类型的属性还是浅拷贝。比如：

let xxx = [1,2,3,{name:'lin',age:'18'}]
let yyy = xxx.concat()
yyy[3].name = 'zhangsan'
console.log(xxx)
console.log(yyy)

• 打印的结果如下：assign同理

  
  
  image.png

深拷贝

1. 可以用JSON.stringify()和JSON.parse()

• 先用JSON.stringify()方法用于将 JavaScript 值转换为 JSON 字符串
• 再用JSON.parse()将其转换为一个对象，此时的对象就是一个新的对象
• 但是由于JSON只能识别JSON数据类型，即String,Number,Bool,Array,Object,Null，所以也只能实现这些类型的转换。不能复制function、正则、Symbol
• 如果有循环引用也会报错

2. 原生JS实现深拷贝

• 重点：判断类型，递归，循环引用，忽略原型
• 代码如下

function DeepCopy(obj, parent = null) {
            // 创建一个新对象
            let result = {};
            let keys = Object.keys(obj),
                    key = null,
                    temp= null,
                    _parent = parent;
            // 该字段有父级则需要追溯该字段的父级
            while (_parent) {
                // 如果该字段引用了它的父级则为循环引用
                if (_parent.originalParent === obj) {
                    // 循环引用直接返回同级的新对象
                    return _parent.currentParent;
                }
                _parent = _parent.parent;
            }
            for (let i = 0; i < keys.length; i++) {
                key = keys[i];
                temp= obj[key];
                // 如果字段的值也是一个对象
                if (temp && typeof temp=== 'object') {
                    // 递归执行深拷贝 将同级的待拷贝对象与新对象传递给 parent 方便追溯循环引用
                    result[key] = DeepCopy(temp, {
                        originalParent: obj,
                        currentParent: result,
                        parent: parent
                    });

                } else {
                    result[key] = temp;
                }
            }
            return result;
        }