javascript深拷贝和浅拷贝的区别是什么?实现一个javascript深拷贝

2019-07-0945次阅读javascript

深拷贝和浅拷贝是针对复杂数据类型来说的,浅拷贝只拷贝一层,而深拷贝是层层拷贝。

 

深拷贝

深拷贝复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。 深拷贝后的对象与原来的对象是完全隔离的,互不影响,对一个对象的修改并不会影响另一个对象。

 

浅拷贝

浅拷贝是会将对象的每个属性进行依次复制,但是当对象的属性值是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化。
可以使用for in、 Object.assign、 扩展运算符 ... 、Array.prototype.slice()、Array.prototype.concat() 等,例如:

let obj = {
    name: 'xinran001',
    age:18,
    hobbies:['reading','photography']
};

let obj2 = Object.assign({},obj);
let obj3 = {...obj};

obj.name = 'robert';
obj.hobbies.push('coding');

console.log(obj);
//{name:'robert',age:18,hobbies:['reading','photography','coding']}

console.log(obj2);
//{name:'xinran001',age:18,hobbies:['reading','photography','coding']}

console.log(obj3);
//{name:'xinran001',age:18,hobbies:['reading','photography','coding']}

可以看出浅拷贝只最第一层属性进行了拷贝,当第一层的属性值是基本数据类型时,新的对象和原对象互不影响,但是如果第一层的属性值是复杂数据类型,那么新对象和原对象的属性值其指向的是同一块内存地址。

 

深拷贝实现

1.深拷贝最简单的实现是: JSON.parse(JSON.stringify(obj))

JSON.parse(JSON.stringify(obj))是最简单的实现方式,但是有一些缺陷:

  1. 对象的属性值是函数时,无法拷贝。
  2. 原型链上的属性无法拷贝
  3. 不能正确的处理Date类型的数据
  4. 不能处理RegExp
  5. 会忽略symbol
  6. 会忽略undefined

2.实现一个deepClone函数

  1. 如果是基本数据类型,直接返回
  2. 如果是RegExp或者Date类型,返回对应类型
  3. 如果是复杂数据类型,递归。
  4. 考虑循环引用的问题
function deepClone(obj,hash = new WeakMap()){

    if(obj instanceof RegExp) return new RegExp(obj);

    if(obj instanceof Data) return new Data(obj);

    if(obj === null || typeof obj !== 'object'){
        //如果是基本数据类型,直接返回
        return obj;
    }

    if(hash.has(obj)){
        return hash.get(obj);
    }

    /**
    *如果obj是数组,那么obj.constructor是[Function:Array]
    *如果obj是对象,那么obj.constructor是[Function:object]
    */
    let t = new obj.constructor();
    hash.set(obj,t);
    for(let key in obj){
        //递归
        if(obj.hasOwnProperty(key)){
            //是否是自身的属性
            t[key] = deepClone(obj[key],hash);
        }
    }

    return t;

}


 

上一篇: 如何正确判断js中this的指向?  下一篇: ES6可迭代对象有哪些特点  

javascript深拷贝和浅拷贝的区别是什么?实现一个javascript深拷贝相关文章