【JavaScript】深拷贝和浅拷贝

深拷贝和浅拷贝

JavaScript 有两种数据类型

1. 基本数据类型： string number boolean null undefied symbol
2. 引用类型: Object Arrat Function

对于基本数据类型是没有深浅拷贝之分的，存放在内存的栈区。 对于引用类型一般存放在堆去，引用指针存放在栈区，并指向引用本身。深浅拷贝都是相当于引用类型而言的。

浅拷贝

会互相影响，两个 JS 对象指向同一个内存地址

1. 简单的赋值

let obj = {
    parent: {
        children: "hello"
    },
    value: 12
}
let newObj = obj;
newObj.value = 24;
newObj.parent.children = "hello world";
console.log(obj)//{"parent": {"children": "hello world"}"value":24}

2. Object.assign(): 第一层为深拷贝，其他层级就只是浅拷贝了

let obj = {
    parent: {
        children: "hello"
    },
    value: 12
}
let newObj = Object.assign({}, obj);
newObj.value = 24;
newObj.parent.children = "hello world";
console.log(obj)//{"parent": {"children": "hello world"},"value": 12}

3. $.extand({}, obj): jQuery 插件
4. concat、slice 等函数操作，针对多层引用类型，如果是一维数组其实是深拷贝

深拷贝

修改互不影响，复制后的新对象指向一个新的内存地址

1. 手动赋值

let obj = {
    parent: 'hello',
    value: 12
}
let newObj = { parent: obj.parent,value: obj.value};

2. Object.assign(): 用法同上，适用于只有一维的深拷贝
3. $.extand(true, {}, obj):
4. JSON.parse(JSON.stringify(obj)): 二维及以上
5. lodash 库中的 _.clone(obj, true) 或者 _.cloneDeep(obj)：二维及以上

npm install lodash
"
import * as _ form 'lodash';

6. 自己写吧 遍历和判断赋值obj.hasOwnProperty(key)