JavaScript中的深浅拷贝问题详解

数据类型

• 基础数据类型: 数值, 布尔, 字符串等
• 引用数据类型: 数组 / 对象 
  只有引用数据类型才有拷贝的问题

浅拷贝

var arr = [1, 2, 3, 4];
var brr = arr;
arr.push(5);
console.log(brr); // 结果: [1, 2, 3, 4, 5]
// 思考: 为什么往arr数组末尾插入元素5, brr数组也跟着改变了呢?

arr 和 brr变量中装载的是数组的内存地址&7x0099(编的地址), 改变数组内容都是在改变这个连续地址中的&7x0099内的值, 所以他俩都收到影响 

深拷贝

var arr = [1, 2, 3, 4];
var brr = new Array();
arr.map(item => {
    brr.push(item);
})
arr.push(5);
console.log(brr); // 结果: [1, 2, 3, 4]
// 思考: 为什么这次arr没有影响brr呢?

brr的值, 保存了一个new Array()新开辟的地址空间, 所以brr和arr不在指向同一个数组了 

多层深拷贝

项目中数组/对象常用深克隆方式(可拷贝多层)

// 方式1:
function deepClone(obj){
    // 判断参数是数组还是对象, 准备一个空的
    let objClone = Array.isArray(obj) ? [] : {};
    // 非空, 并且是对象  (array或者object的typeof都是object)
    if(obj && typeof obj === "object"){
        // 遍历数组/对象
        for(key in obj){
        // 判断是否是当前对象的属性(防止复制原型链上的对象)
            if(obj.hasOwnProperty(key)){
            //判断obj子元素是否为对象，如果是，递归复制
                if(obj[key] && typeof obj[key] === "object"){
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
// 方式2:
JSON.parse(JSON.stringify(obj));