js的赋值与浅拷贝、深拷贝

359 阅读3分钟

昨天翻了下数组API,看到concat和slice方法,突然想到这个两个方法是浅拷贝还是深拷贝,结果陷入了死胡同,为什么MDN文档说是浅拷贝,但进行简单的操作为什么能复制成功啊,纠结半天后才弄清原由,原来我一直把赋值和深浅拷贝搞混了。

先上知乎:javascript中的深拷贝和浅拷贝

首先不要把引用类型的赋值归结为浅拷贝,深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只拷贝一层对象的属性,而深拷贝则递归拷贝了所有层级。

js数据类型

基本类型为Number、String、Boolean、Undefined、Null,引用类型为Object。

基本类型是储存存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,所以可以直接访问。

引用类型存放在堆内存中,它的变量实际是存放在栈中的一个地址(指针)指向堆中的实际内存地址。

区分赋值、浅拷贝与深拷贝

** 赋值**

基本类型赋值(=)直接在栈中开辟新内存,把值赋值到新内存中,而引用类型的赋值(=)是直接复制栈内存中的地址(指针),并没有在堆内存总开辟新的内存,因此他们都指向同一个堆内存,任何操作都会影响原来的数据。

let obj2 = obj1;

浅拷贝与深拷贝

首先不要把赋值和浅拷贝和深拷贝混在一起。

浅拷贝和深拷贝都在堆内存中开辟新的内存,都进行了复制。

浅拷贝就是进行简单的复制,只会将对象的各个属性进行依次复制,不会递归复制,所以那些子属性如果再是引用类型(对象、数组、函数)的话,就只复制了他们的地址(指针),实际的内存地址没有被复制。

所以就理解为什么数组方法slice、concat、扩展运算符、Object.assign()这些都是浅拷贝了。它们都进行了简单的拷贝,没有再对深层次的数据进行拷贝。

深拷贝是对对象以及对象的所有子对象进行拷贝。

常见的浅拷贝

扩展运算符(...);
Object.assign();
Array.prototype.concat();
Array.prototype.slice();
lodash(_.clone());

深拷贝例子

JSON.parse(JSON.stringify());

虽然用起来很方便,但是,只适合一些简单的情景(Number, String, Boolean, Array, Object),扁平对象,那些能够被 json 直接表示的数据结构。function对象,RegExp对象是无法通过这种方式深拷贝。

let obj2=JSON.parse(JSON.stringify(obj1));

递归赋值;

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            //判断是否为自身属性
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

lodash(_.cloneDeep());

let obj2 = _.cloneDeep(obj1);

参考链接:

浅拷贝与深拷贝

js 深拷贝 vs 浅拷贝

JS中判断对象是对象还是数组的方法

结尾:如果哪里有错误希望多多指教。