js深拷贝与浅拷贝

发表于 阅读次数：

简单来区别下深拷贝和浅拷贝：假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，这就是浅拷贝；如果B没变，那就是深拷贝

简单来区别下深拷贝和浅拷贝：假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，这就是浅拷贝；如果B没变，那就是深拷贝

基本数据类型：number,string,boolean,null,undefined。

引用数据类型：对象，数组，函数

a.基本类型–名、值存储在栈内存中

b.引用数据类型–名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

一、浅拷贝

原始类型为值传递，对象类型仍为引用传递

二、深拷贝

2.1 方式一

1
2
3

Json.parse(json.stringify(obj/arr))

2.2 方式二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
     * 0. 遍历传入的对象
     * 1. 判断是不是原始值（typeof），如果是，直接赋值，如果不是进行第二步
     * 2. 判断是数组还是对象 （instanceof、toSctring、constructor）
     * 3. 建立新的数组或者对象
     * 4. 重复上述步骤
     * */
    function deepclone(obj) {
        var tempObj = Object.prototype.toString.call(obj) ** "[object Array]" ? [] : {};// 判断传入的是数组还是对象
        for (var prop in obj){// 遍历传入的对象
            // 判断是否是自己的属性，避免拿到原型上的属性
            if(obj.hasOwnProperty(prop)){
                if(obj[prop] !** 'null' && typeof obj[prop] ** 'object'){
                    // 引用值走这里
                    if(Object.prototype.toString.call(obj[prop]) ** "[object Array]"){
                        tempObj[prop] = []
                    }else {
                        tempObj[prop] = {}
                    }
                    deepclone(tempObj)
                }else {
                    // 原始值走这里
                    tempObj[prop] = obj[prop]
                }
            }
        }
        return tempObj
    }

三、$.extend()

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target： Object类型

目标对象，其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型

第一个以及第N个被合并的对象。